Basic information on Chrome's Debugger

来源：互联网发布：php图书管理系统代码编辑：程序博客网时间：2024/05/17 08:33

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 or

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 stepallsince 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