Simple Debugging of Javascript

creative commons licensed ( BY ) flickr photo shared by Dmitry Baranovskiy

We have a few people messing about with JavaScript for the first time1 so I figured I’d sketch out how I use Chrome to help debug things. With Chrome it’s relatively pleasant.

Chrome has developer tools which are very handy for all things made on the web. They’re even so kind as to provide really extensive advice on using these tools to troubleshoot JavaScript. I’d suggest going there if you’re serious but the pattern described below is far more efficient than my previous technique- which mainly consisted of mumbling curses while squinting very hard at the screen.

My technique is essential this-

Something is broken. With JavaScript this will often just result in a blank space. Typos will kill you. JavaScript is case sensitive.

I right click/ctrl click and choose inspect element.
Screen Shot 2015-02-01 at 4.35.11 PM

Then I move over to the Console view. It will have bright red warnings about my failure to match things up.
Screen Shot 2015-02-01 at 4.29.39 PM

From there I can click on the far right and shift to my actual code (the Sources screen) at the place where the issue is occurring. In this case the problem is that it references a div that doesn’t exist.

Screen Shot 2015-02-01 at 4.29.48 PM

1 I’m pretty much in that same cohort.

3 thoughts on “Simple Debugging of Javascript

  1. I was also squinting on my small lo-res monitor screen. But I tried using Firefox’s developer tools which were far too complex and unhelpful. I wonder if coding them one chart at a time and checking it on a browser might be more helpful than writing a whole chunk and trying to see if the errors are hidden somewhere? I was also itching to not just edit the code but also Stan’s interpretation of the statistics I had written on the Google Doc headers and labels etc. It became too overwhelming for me to edit. Novice mindset.

Comments are closed.