Debugging JavaScript

Debugging JavaScript with Chrome dev tools

To discover the simplicity of JavaScript debugging in Chrome, follow these steps:

Step 1:

Display your page in Chrome (the page you created in the previous exercise), and turn on the Developer Tools 🛠 pane (with F12 (press fn key on Mac) or Ctrl+Shift+I or Cmd+Opt+J for Mac). Select the Source tab and in the source file hierarchy, click (index). To the right from the source file hierarchy, the index.html file is displayed. Scroll down to the var mark line, and click the line number to set a breakpoint, as shown in the figure below.