利用chrome的调试效能调试JavaScript代码
日期：2014-05-16 浏览次数：20405 次
利用chrome的调试功能调试JavaScript代码
转载：http://blog.csdn.net/panda6174/archive/2009/05/07/4158952.aspx
看见网上很多人问怎么用chrome调试JavaScript代码，我也对这个问题抱着疑问，但是没有找到一篇能用的中文文章（可能我的google有问题），也不知道怎么点出一篇E文的,感觉作者写得不错，所以尽量按照原来的风格弄一篇中文的，希望对和我一样存在疑问的朋友有所帮助。如果高手路过，下面留言指点，或给与相关学习链接，谢谢。
原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html
下面我将通过一个例子让大家对chrome的调试功能有个大概的认识。
几个存在的bug：
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的吧，哈哈）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
（以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意）。
调试命令：
打开调试窗口后，你可以在底部的输入窗口中输入相关的调试命名，当你输入相关命令敲回车
执行后，调试信息窗口显示的调试命令前会加上$。下面是相关的调试命令，根据调试状态有
两个命令集：runnig，paused。注意：[]是可选项，<>是必选项。
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! *
基础实例：
实例将向你展示如何通过一些基本步骤添加两个断点，查看参数、变量运行时的情况，很简单的。
实例代码：
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
<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>
转载：http://blog.csdn.net/panda6174/archive/2009/05/07/4158952.aspx
看见网上很多人问怎么用chrome调试JavaScript代码，我也对这个问题抱着疑问，但是没有找到一篇能用的中文文章（可能我的google有问题），也不知道怎么点出一篇E文的,感觉作者写得不错，所以尽量按照原来的风格弄一篇中文的，希望对和我一样存在疑问的朋友有所帮助。如果高手路过，下面留言指点，或给与相关学习链接，谢谢。
原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html
下面我将通过一个例子让大家对chrome的调试功能有个大概的认识。
几个存在的bug：
我发现调试功能中有个小bug（作者发现的），尤其是在打开调试窗口时打开控制窗口，我的chrome浏览器会像变魔术一样从屏幕上消失（在下面的调试过程中没有遇到这样的问题，可能是作者用的β版的吧，哈哈）。接下来的步骤将不再由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工作量下的情况。
如果你设置了断点后关闭了调试工具，断点任然存在（在测试过程中发现对程序运行没有影响，但是再次启动调试工具后原来的断点会对调试产生影响）。
（以上问题，作者在MAC本本上调试出的问题，你不一定会碰到，不用在意）。
调试命令：
打开调试窗口后，你可以在底部的输入窗口中输入相关的调试命名，当你输入相关命令敲回车
执行后，调试信息窗口显示的调试命令前会加上$。下面是相关的调试命令，根据调试状态有
两个命令集：runnig，paused。注意：[]是可选项，<>是必选项。
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.
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! *
基础实例：
实例将向你展示如何通过一些基本步骤添加两个断点，查看参数、变量运行时的情况，很简单的。
实例代码：
下面是一个简单的HTML页面以及外部引用的js文件，有两个函数和两个按钮，两个函数分别是两个按钮点击时的处理函数。
HTML页面：
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
