Debug JavaScript code using Chrome's debugging Function

This article is reproduced, the original address: http://blog.csdn.net/panda6174/article/details/4158952 saw a lot of people on the internet asked how to use chrome to debug JavaScript code, I also hold questions about this problem, however, I didn't find a usable Chinese article (maybe my Google has a problem), and I don't know how to write an e-article. I feel that the author has done a good job, so try to get a Chinese article according to the original style, and hope it will be helpful to friends who have questions like me. If you pass by, leave a message or give a link to the study. Thank you.

Address: http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html

Next, I will use an example to give you a rough idea of Chrome's debugging function.

Several bugs:
I found that the debugging function has a small bug (found by the author), especially when opening the debugging window to open the control window, my Chrome browser will disappear from the screen like magic (this problem was not encountered in the following debugging process, maybe it was the author's beta version, haha ). The subsequent steps will not be controlled by me. I just used a very simple test page and it went wrong. I could not imagine a situation with more work.

If you disable the debugging tool after you set the breakpoint, the breakpoint still exists (during the test, it is found that the program runs normally, however, after the debugging tool is started again, the original breakpoint will affect debugging ).

(You may not have encountered any of the above problems that the author has tried to increase in Mac ).

DEBUG command:
After opening the debugging window, you can enter the relevant debugging name in the input window at the bottom. When you enter the relevant command, press Enter.

After execution, $ is added before the DEBUG command displayed in the debug information window. The following are related Debugging commands.

Two command sets: runnig and paused. Note: [] is optional, and <> is required.

Commands while page is running (no breakpoints hit)

Break [condition]

Set a break point where the location is <function> or <script: Line: POS>

Break_info [breakpoint #]

List the current breakpoints [or the details of the breakpoint that is specified]

Clear <breakpoint #>

Remove a specified breakpoint

Help [command]

Display the help information for the current status [or the specified command]

Print <expression>

Output the expression specified which can be string, object, function, variable, etc.

Scripts

List all of the scripts attached to the page.

Commands while page is paused in debugging mode (break point is hit)

ARGs

Summerize the arguments to the current function. does not display anything if there are no arguments.

Break [condition]

See running description

Break_info [breakpoint #]

See running description

Backtrace [<from frame #> <to frame #>]

Look at all the current frames [or look at the frames specified in the range.] * looks like you need to specify both. Changed notation here compared to the help in the debugger *

Clear

See running description

Continue

Continues the execution of the script.

Frame [frame #]

Shows the current frame [or shows the specified frame]

Help

See running description

Locals

Summarize the local variables for current frame. displays the variables and their values.

Next

Moves to the next line in the Code. Seems to be like step.

Print

See running description

Scripts

See running description

Source [from line] | [<from line> <num lines>]

Show the current functions source code [or see a specified line or range of lines]

Step

Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *

Stepout

* Seems to not work! Shocould step out of the current debugging step. It shocould work like continue! *

Basic instance:
The instance will show you how to add two breakpoints through some basic steps to view the running status of parameters and variables, which is very easy.

Instance code:
The following is a simple HTML page and externally referenced JS file. There are two functions and two buttons. The two functions are the processing functions when two buttons are clicked.

HTML page:
<HTML>
<Head>
<Title> test </title>
<SCRIPT type = "text/JavaScript">
Function hello1 (){
VaR d = new date ();
VaR STR = "Hello world-one./N/nit is ";
Alert (STR + D. tostring ());
}
</SCRIPT>
<SCRIPT type = "text/JavaScript" src = "hello2.js"> </SCRIPT>
</Head>
<Body>
<Input type = "button" onclick = "hello1 ()" value = "Hello 1"/>
<Input type = "button" onclick = "hello2 ('Hey hei')" value = "Hello 2"/>
</Body>
</Html>

Hello2.js:
Function hello2 (FOO ){
VaR d = new date ();
VaR STR = Foo + "/n/nhello world-two./N/nit is ";
Alert (STR + D. tostring ());
}

Step by step:
1. Save the above Code and page and open the page in chrome. You can open the debugging window in two ways: Page icon> developer> debug JavaScript, and CTRL + Shift + L. After opening the debugging window, you will see a large display window with a scroll bar and a text box that allows you to enter Debugging commands.

2. If you enter help and press enter, you will see the debugging command information you can enter in the information display window. Let's start with the scripts command. Enter scripts in the command input box and press Enter. In the information window, you will see the JS file referenced on the current page. Note that if your chrome contains the Javascript console, many JS files will be introduced.

3. We cannot set breakpoints as randomly as in Vs, but we can set them in another way. There are two functions in the instance code: hello1 () and hello2 (). to verify the existence of the function, run the print command. Input print hello1 in the name input box. You will see the code corresponding to the function in the Information Window. When the function does exist, we can use break hello1 to set the breakpoint of the function, when a function is called, it stops at the function entrance. Hello2 is set in the same way.

4. to verify whether the breakpoint has been set, run the break_info command to view the breakpoint information. If you only want to know what the first breakpoint is, you can use the breakpoint sequence to view it. The command is as follows: break_info 1, which shows what the second breakpoint is.

5. After the breakpoint is set, you can click the button on the page to trigger the breakpoint. If you click the first button, the hello1 function will be stopped when it is called, you can use the ARGs command to view the current function parameter, but hello1 does not have a parameter, so you cannot see anything. You can try to click the second button to obtain the parameter to see the effect of argS. Now you can run the next command to run the program. If you want to view the actual situation of the current variable, you can enter locals in the command input box, the information window displays information about the current variable. Next enables the program to execute the next line of code. If you want the program to continue directly until it stops, enter continue.

6. During the debugging process, you can use the print command to output the variables, use step instead of next, and use stepall instead of the continue command to execute related debugging, try it and see if the effect is different.

7. What method should we use to remove a breakpoint? Enter clear 1 in the Command box, and then click the second button to try the effect. Wow, the program runs directly and does not stop the hello2 function. the breakpoint of hello2 disappears.

The above content may help you with chrome debugging. Some of them are not translated in the e-document. If there is anything wrong, please correct our goal, "common progress is real progress"

Address: http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html

Next, I will use an example to give you a rough idea of Chrome's debugging function.

Several bugs:
I found that the debugging function has a small bug (found by the author), especially when opening the debugging window to open the control window, my Chrome browser will disappear from the screen like magic (this problem was not encountered in the following debugging process, maybe it was the author's beta version, haha ). The subsequent steps will not be controlled by me. I just used a very simple test page and it went wrong. I could not imagine a situation with more work.

If you disable the debugging tool after you set the breakpoint, the breakpoint still exists (during the test, it is found that the program runs normally, however, after the debugging tool is started again, the original breakpoint will affect debugging ).

(You may not have encountered any of the above problems that the author has tried to increase in Mac ).

DEBUG command:
After opening the debugging window, you can enter the relevant debugging name in the input window at the bottom. When you enter the relevant command, press Enter.

After execution, $ is added before the DEBUG command displayed in the debug information window. The following are related Debugging commands.

Two command sets: runnig and paused. Note: [] is optional, and <> is required.

Commands while page is running (no breakpoints hit)

Break [condition]

Set a break point where the location is <function> or <script: Line: POS>

Break_info [breakpoint #]

List the current breakpoints [or the details of the breakpoint that is specified]

Clear <breakpoint #>

Remove a specified breakpoint

Help [command]

Display the help information for the current status [or the specified command]

Print <expression>

Output the expression specified which can be string, object, function, variable, etc.

Scripts

List all of the scripts attached to the page.

Commands while page is paused in debugging mode (break point is hit)

ARGs

Summerize the arguments to the current function. does not display anything if there are no arguments.

Break [condition]

See running description

Break_info [breakpoint #]

See running description

Backtrace [<from frame #> <to frame #>]

Look at all the current frames [or look at the frames specified in the range.] * looks like you need to specify both. Changed notation here compared to the help in the debugger *

Clear

See running description

Continue

Continues the execution of the script.

Frame [frame #]

Shows the current frame [or shows the specified frame]

Help

See running description

Locals

Summarize the local variables for current frame. displays the variables and their values.

Next

Moves to the next line in the Code. Seems to be like step.

Print

See running description

Scripts

See running description

Source [from line] | [<from line> <num lines>]

Show the current functions source code [or see a specified line or range of lines]

Step

Step through the code line by line when paused in debug mode. * Not sure what is different between step and next *

Stepout

* Seems to not work! Shocould step out of the current debugging step. It shocould work like continue! *

Basic instance:
The instance will show you how to add two breakpoints through some basic steps to view the running status of parameters and variables, which is very easy.

Instance code:
The following is a simple HTML page and externally referenced JS file. There are two functions and two buttons. The two functions are the processing functions when two buttons are clicked.

HTML page:
<HTML>
<Head>
<Title> test </title>
<SCRIPT type = "text/JavaScript">
Function hello1 (){
VaR d = new date ();
VaR STR = "Hello world-one./N/nit is ";
Alert (STR + D. tostring ());
}
</SCRIPT>
<SCRIPT type = "text/JavaScript" src = "hello2.js"> </SCRIPT>
</Head>
<Body>
<Input type = "button" onclick = "hello1 ()" value = "Hello 1"/>
<Input type = "button" onclick = "hello2 ('Hey hei')" value = "Hello 2"/>
</Body>
</Html>

Hello2.js:
Function hello2 (FOO ){
VaR d = new date ();
VaR STR = Foo + "/n/nhello world-two./N/nit is ";
Alert (STR + D. tostring ());
}

Step by step:
1. Save the above Code and page and open the page in chrome. You can open the debugging window in two ways: Page icon> developer> debug JavaScript, and CTRL + Shift + L. After opening the debugging window, you will see a large display window with a scroll bar and a text box that allows you to enter Debugging commands.

2. If you enter help and press enter, you will see the debugging command information you can enter in the information display window. Let's start with the scripts command. Enter scripts in the command input box and press Enter. In the information window, you will see the JS file referenced on the current page. Note that if your chrome contains the Javascript console, many JS files will be introduced.

3. We cannot set breakpoints as randomly as in Vs, but we can set them in another way. There are two functions in the instance code: hello1 () and hello2 (). to verify the existence of the function, run the print command. Input print hello1 in the name input box. You will see the code corresponding to the function in the Information Window. When the function does exist, we can use break hello1 to set the breakpoint of the function, when a function is called, it stops at the function entrance. Hello2 is set in the same way.

4. to verify whether the breakpoint has been set, run the break_info command to view the breakpoint information. If you only want to know what the first breakpoint is, you can use the breakpoint sequence to view it. The command is as follows: break_info 1, which shows what the second breakpoint is.

5. After the breakpoint is set, you can click the button on the page to trigger the breakpoint. If you click the first button, the hello1 function will be stopped when it is called, you can use the ARGs command to view the current function parameter, but hello1 does not have a parameter, so you cannot see anything. You can try to click the second button to obtain the parameter to see the effect of argS. Now you can run the next command to run the program. If you want to view the actual situation of the current variable, you can enter locals in the command input box, the information window displays information about the current variable. Next enables the program to execute the next line of code. If you want the program to continue directly until it stops, enter continue.

6. During the debugging process, you can use the print command to output the variables, use step instead of next, and use stepall instead of the continue command to execute related debugging, try it and see if the effect is different.

7. What method should we use to remove a breakpoint? Enter clear 1 in the Command box, and then click the second button to try the effect. Wow, the program runs directly and does not stop the hello2 function. the breakpoint of hello2 disappears.

The above content may help you with chrome debugging. Some of them are not translated in the e-document. If there is anything wrong, please correct our goal, "common progress is real progress"