Using the chrome dev tool

[Jtwa11]

Is there a way to use the chrome dev tools to learn from other peoples javascript? I know I use it all the time for CSS and HTML, but I’m not sure how to use it for javascript?

[Alen]

@jtwa11, I’m not sure is Chrome Dev Tools is the place to learn JavaScript, but it allows you to inspect other developers code. The browser is the environment JavaScript runs in, so technically if you open up Chrome Dev Tools and click on console, you can type JavaScript and get a response.

learn from other peoples javascript

This is becoming harder and harder to do. When I first started, we didn’t have minification, now the code is abstracted too much making it hard to read and make sense.

If you want to learn JavaScript check out

• You Don’t Know JavaScript
• FREE JavaScript Books

[Senff]

You can use the inspector to view a site’s Javascript, and also to edit it “live” to see what impact it would have, like you can edit HTML and CSS on the fly.

Basically, you can add breakpoints to scripts, then when you reload, the script execution would “pause” at each breakpoint. That’s when you can make changes to Javascript that hasn’t been executed yet, save, and continue by “un-pausing” and you will see what your changes would do.

Check out:
https://developer.chrome.com/devtools/docs/javascript-debugging

[Jtwa11]

@Senff thank you for the link

Here’s a good link for learning javascript from other developers
https://www.youtube.com/watch?v=2zmUSoVMyRU

[Senff]

A lot of it is guesswork, I think. Unless you put breakpoints everywhere to see which files are being accessed at what time, it can be quite a struggle to figure out which .JS file is meant for whichever functionality.

It depends, though. If you see a slider, you can expect the CSS styles and classes, and then when you see something like class="superSlider", and a .JS file called superSlider.js, you’d know where to look.

[Author]

Posts