Inspect code with Chrome

Anyone who codes makes mistakes, so it's no surprise that browsers  include robust tools that help coders find their mistakes. This lesson focuses on the Chrome console, but don't forget that Firefox and Safari have similar tools.

  1. To begin, visit http://workbook.mynmi.net/demos/candidates.html and click the next button. Nothing happens because candidates.html is connected to candidates.js which has an error in its code.
  2. Right-click on candidates.html, and then click Inspect on the drop-down menu that appears.
  3. A list of elements should appear as shown below. To find the error, click on console.

  4. At this point you should a message that indicates that the problem is on line 24 of candidates.js.  Click on candidates.js:24 and candidates.js will open. You probably can spot the error (a missing > ) on line 24.

Of course if you were working on candidates.js in Brackets, you could not just find, but immediately correct your mistake.

The main point

Code inspectors are great tools and you owe it to yourself to use them. There is however, one caveat, if you are using Brackets. Live preview generates a lot of additional code that can make the inspection process more difficult. You usually are better off to click on the html file and open it directly in Chrome.

Print Friendly, PDF & Email