Tuesday, December 12, 2017

Debug Javascript in web page in Chrome

Chrome version used is Version 63.0.3239.84
  1. click on the 3 vertical dots at the upper right corner of the Chrome browser screen.
  2. Select "More tools" -> "Developer tools". The debugger screen will show.
  3. The debug screen has tabs at the top and the left and right panes below it.
  4. In the top bar, select "Sources"
  5. In the left pane, there is a "Network" tab. Select it. It shows a tree structure below. Drill into it to find your page URL. Sometimes you may include some javascript libraries in your page. Those js files will be under the "js" folder in that left pane. You can select it if you want to debug it.
  6. After the above step, the right pane is just blank. It does not show the html file corresponding to the page URL. You need to reload the page in order to see the HTML content. A better way is to open the Developer tools before you get to that page in your application.
  7. Now you can just click on the line number of the HTML content. Just one click is enough. The line number will be high-lighted.
  8. Now you can click button on the application web page. A new pane will show. If there is Javascript executed, it will stop at the breakpoint.
  9. The new pane has a "Watch" section. You can write your javascript expressions there to watch their values.