Need tutorial on how to use developer tools to trouble-shoot js code

Does anyone know of any good tutorials or books that show how to use google Chrome developer tools to step thru javascript code. Or if firefox is better, same question.

Thanks, Mike

 

Hey Mike,

You can set break points in your JavaScript files through the sources tab. Locate your file by clicking the little box with a right arrow inside it and then navigate through the folder tree until you find the file you want. When you want to set a break point, click on the line number and the background of the number will change to blue. Refresh your page and that will pause at that area.

See the image below:


Have a read through this: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

I haven't used FireFox, but from my personal experience Chrome is extremely easy to use and certainly the best tool out there!

Glen

 

Thanks a lot, Glen.

I'll read that information. I tried setting breakpoints before, but I couldn't really decypher the data in the right hand panel. I'll try again after reading that stuff.

Thanks again, Mike

 

Here are two tried and tested methods. :

#1 Write your program in pseudocode - this will help you figure out logic errors
#2 Use console.log and use it on every var after every dam calculation/instruction executed , this will show you if something went stupid during runtime.

Also as a bonus here's another one :
Keep it simple - if you can use vanilla JS instead of a complex library use vanilla. It will save you from future nightmares.

 

By vanilla js do you mean I shouldn't use jQuery, only plain js?

 

When jQuery doesn't save you time yes you should try to go for standard JS . The selector system is jQuery's best feature but people tend to abuse jQuery often ending up with complicated spaghetti code. This holds especially true when it comes to loops.