本文介绍如何使用Chrome浏览器内置的调试器进行网页调试。包括设置断点、查看参数及局部变量等基本操作。适用于初学者快速上手。
Forwarded from: http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html
Tags: Chrome Debug
I have been seeing a bunch of questions on how to use chrome's debugger so this is my quick and dirty instruction/tutorial/help page. Hopefully when I get some sleep I can make it better! For right now I tried to get the basics down with a quick walk through example. This is not edited, spell checked, grammer checked, verified, fully completed, fully documented, etc. I wrote it at 2AM! I will edit it!
Initial Findings - Bugs - Quirks
I am finding the debugger to be a little buggy, especially when the JavaScript Console is open with the Debugger. My Chrome Browser has disappeared from the screen like magic. The stepping can lock up and leave you hanging. I am using this on a VERY simple page and having issues. I have not tried this on anything major.
If you close the debugger after you set debug points, the debug points remain. BUT there is a problem with it. When you try to read their info, clear them, or run the code it errors. Looks like they are removed from some sort of memory, but the references are left in the code itself.
I am running this on a Vista Home Premium on a MacBook with Boot Camp with 2 gigs of RAM. I use this set-up daily for some .NET development. If I can track down the errors, I will see if I can log them. For now I am just learning about this thing!
The Commands
These are the commands that you enter in the textbox at the bottom of the debugger. After you enter them, the debugger shows the command with a $ in fornt of it. The follow line(s) will be the output of the command that you enter. There are two command sets depending on the state that the debugger is in: running and paused. NOTE: [] is optional - <> is required
Commands while page is running (no breakpoints hit)
- break [condition]
- Set a break point where the location is <function> or <script:function> or <script:line> 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! Should step out of the current debugging step. It should work like continue! *
Basic Walk Through
This should show you how to do some basic steps of adding 2 break points, looking at the arguments, and looking at the variables. It is very basic
The code
The code is a simple html page with an external JavaScript file. There are two functions and two buttons that have hard coded event handlers that call the functions.
The 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 hey')" 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() );
}
Do the walking!
Save the code to your system or use your own project and open it up in Chrome. If you have not opened up the debugger yet it is located at the Page Icon --> Developer --> JavaScript Debugger or use the short cut ALT+`. You should see a large scrollable area and a textbox. You will be entering in the commands at the textbox at the bottom.
If you type in help and hit enter, it will bring up a list of the commands you can use right now. We will strat off with using scripts. Type scripts into the command line, hit enter, and you should see references to the scripts attached to the html page. Notice if you have the JavaScript console, there are tons of other JS files attached.
We can not add our breakpoints. The simpliest way is to use the function name to specify the location. In the example code we have two functions hello1() and hello2(). To verify that the functions are there we can use print. Type print hello1 into the command line and you should see the functions code. Since we know the function is there, we can than type in break hello1 and hit enter. That sets breakpoint 0 to the hello0 function. We than type in break hello2 and we get breakpoint 1 attached to the hello2 function.
To verify that the breakpoints are added, we use break_info in the command line and it should show us our two break points. To just see the info for our second break point we can specify the number such as break_info 1. The details for the break point is shown.
After we set the break points, we should try to hit them. If you are using the provided code, click the first button. This button has no arguments passed in. When you hit the button, the debugger should said it is paused. Type in args into the debugger's commandline and it should not show anything. Type in next and the next line should appear and execute. To view the local variables, you can type in locals into the commandline. It will show you the name/value pairs of all the local variables in the hello0 function. You can now either keep typing the next command to step through the rest of the functions lines or you can type in the command continue.
This time click the second button to start the debugger again. Type in the args command and this time you should see the name value pairs of the passed in arguments since hello2 has arguments. You can use the print command to output the variables at this time to debug if you wish. You can also use source to view the current functions source code. Instead of using next to step through the lines of code, you can also use step. I would not advise using stepall since it hangs my debugger. Run through the rest of the steps to show the alert.
Finally if we want to remove a break point, we can use the clear command. To remove the second break point, type in clear 1. Now the breakpoint should not be hit when we click the second button on our page.
Well that was a quick walk-through with the debugger. Hopefully it will be as pretty as Firebug's one day. I also hope to get this article in better shape when I am actually awake enough to edit this blabbling.
Hope this helps,
Eric Pascarello
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
