Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

APPENDIX A ■ Debugging JavaScript
Sequential Uncommenting
Another easy way to trace an error is to comment out the whole script and uncomment it function by function or—if
it is a single function—line by line. Test the script every time you uncomment a line by reloading it in a browser, and
you will quickly get to the one that causes the error. This can take time, though, and it would be much easier to know
roughly where the error occurs, which is why you need to rely on your browser to give you this information.
Built in Developer Tools
Debugging code in browsers has been greatly improved. Now all browsers have developer tools built in that give you
the ability to inspect, update, and save code directly from the browser. But first, how do you access the developer tools
in each browser.
Microsoft Internet Explorer
Internet Explorer exposes its developer tools if you click on the gear icon on the top-right corner of the browser and
then select “F12 developer tools.” You can also press F12 on your keyboard to get the tools to appear. (See Figure A-4.)
Figure A-4. The F12 developer tools in Microsoft Internet Explorer
One thing you will notice with the built-in tools is that they have many similar features. These features include
a panel to inspect each part of your page, HTML, CSS, and JavaScript, as well as a profiler and a network monitor.
In addition to all of these features is the console where you can write JavaScript directly.
Safari
The debugging tools in Safari are not available by default. To turn them on, go to Safari, Preferences, Advance and
then select “Show Develop menu in menu bar.”
352
www.it-ebooks.info