February 27th, 2015
Have you ever wished there was a free javascript debugger that was easy to use? I mean, who really wants to learn yet another debugging tool? Thankfully, firefox has a javascript debugger built into it that is pretty easy to use.
This article was written using firefox 36.
To use the javascript debugger, go to the page that
has the javascript code you want to debug and then go to:
Tools -> Web Developer -> Web Console.
You'll see at the top of this little area that appears,
a number of tabs you can choose from to view such as:
Inspector, Console, Debugger.
For our purposes, we're not going to delve too deep
into debugging the javascript (like watching and playing
with variables). We're going to focus on simply finding
syntax errors quickly. So, go to the Console Tab.
You'll notice that the Console tab lists lines of text. At the beginning of these lines of text you see different colors and sometimes symbols. The colors relate to the source of the error you received (the source and their colors are listed above these lines of text). So, if you have a javascript error, the line will have the color orange at it's beginning.
You'll also notice that the source buttons (with colors) above the errors have a light blue background. If you click on these different buttons, the errors that relate to them will be removed from the list. So, if you're trying to focus on debugging javascript, you need only de-select the others to only see javascript errors.
Another item worth mentioning is that to the right, the Console will sometimes display the line number of where the issue is along with the filename. This is a bit tricky. It's tricky because it's referring to the file that it reads on the client end - not on the server. So, while your index.php file may include several other files, the debugger only sees one main file. So if you are including other files, you'll need to view the source within the browser in order to get the corresponding line number to what is being reported by firefox.
All in all, this is a pretty nice way to find some javascript syntax errors.