Javascript debug in chrome

By | April 18, 2015
Share the joy
  •  
  •  
  •  
  •  
  •  
  •  

These days, I’ve been working on google oauth 2. I found chrome is really a good tool for debugging javascript. Following pictures give a summary for the use.

1. Take an example that we want to debug the ajax function on this page.
http://allenlipeng47.com/PersonalPage/dict/toDict

2. Ctrl + Shift + I or Chrome Settings –> More tools –> Developer tools to popup the debug window

3. Go to Network, click the button in dictionary page and see what happens. We captured this ajax process.

4. Check header

5. Check preview

5. Check response

6. Go to sources, let’s set a breakpoint in the javascript program

7. Breakpoint stopped the program

8. In console, we can see the variables and debug.