How to Debug Javascript Function in Chrome

In this article I explain how to debug a JavaScript function in Chrome.

Open the Chrome browser and type in an URL address.

When you first reach the page with the JavaScript function to be debugged use the following procedure.

For Chrome

1. Right-click on that page and click "Inspect element"; the page will be split into two parts:



2. Now click on "Sources".



3. After clicking on Sources the page will look like:



4. Click on the "Show Navigator" button



5. Select your aspx page or .js file where your function is.



6. Double-click on your aspx page or .js file. Now your page will look like:



7. Now add a breakpoint in your function:



8. Now do the step, to call your function for debugging. I am calling a JavaScript function on a button click so when I click on the button it will stop on that breakpoint.



9. Now I want to see the rowCount value, select the row count then right-click and click "Add to watch"



10. After clicking on Add to watch it will show the row count in the right pane in the watch expressions.