Google Chrome Debugging JS simple tutorial [UPDATE]

Off-topic, just beginning I write this content just to know some of their knowledge put up, unfortunately I analyzed my visit log, many friends have this demand, for everyone not white, I decided to enrich this article. Last update time 2014-02-14 Chrome version: 32.0.1700.107 m

I am a loyal Chrome fan, the use of it has been almost 2 years of history, the overall feel for me is refreshing, fast, concise. And the little ads ... ^_^, although I know ie8+ also has debugging tools, including what Xxbug Firefox, but after I used, the individual still very much prefer chrome Debug.

Chrome is very helpful for the siblings in the front-end, and it elegantly displays the DOM in real time, capturing the parameters that n Ajax passes over

View Dynamic DOM

Get AJAX Request Data preview

Includes n multiple plugins in chrome ...

Of course I'm here to enumerate a very useful JavaScript debugging technique

First please open "Google browser" (nonsense), then open a webpage, press "F12" will appear a console, find a called "Sources", click on it

OK, if your page has now loaded JS script, then you should be able to see some JS files

Then you can set the breakpoint on the left side of the column, the number of those positions, when you want to execute a function, the browser will automatically enter the debug mode

Be careful you will find that the scope variables area is actually the element of object, and it's a big surprise. At first we want to show an object or use

12345

functionforIn(o) {    for (i in o) {        document.write(‘<strong>‘ + i + ‘ --></strong> ‘+ o[i] + ‘<br />‘);    }}

You will find that the page is cumbersome and not very flexible, and now learn Chrome's debug tools I believe will bring you great help.

==2013-11-02 Update = =

When we open chrome, you have been deeply attracted by Google to Jane, until now the version of Chrome has come to the 30.0.1599.101 M,google is really great.

Good drop, I add some of the content that I later use slowly to everybody, is my own work note.

Generally we open most of the site some JS file is already been yui\uglifyjs and other JS compression tool compressed code, let you look at the format to debug very not easy (at all impossible). A feature of formatting code is also available in Chrome.

Click on the button on the pretty print to instantly format the current file in standard form. I would like to say, this formatting code at the moment I only know that the ability to format the DOM and the Js,css file does not have formatting effects of course it is not supported.

Brief introduction of several control about JS debugging

The JS Control Panel is the side panel at the top, and these toolbars allow you to step through the code.

continue: continue executing the code until we encounter another breakpoint.

step: ignore the inside of the method body, that is, do not enter the details of the method body to execute, only call the return value to continue at the current execution of the next step.

Enter Details: detail-by-statement execution, into the method body and then execute.

Exit Details: The detail statement returns the main function body.

Breakpoint Switch: Determines whether the breakpoint is turned on/off.

These are just a few rough notes, if you need more in-depth understanding of chrome devtools may come here, here is absolutely the primary information and very detailed and authoritative, if you are fortunate to be the wall, then congratulations, you have to learn how to build a ladder, the problem you can Google or degree hundred.

Source: http://www.markdream.com/code/chrome-google-js-debug.shtml