利用chrome调试JavaScript代码

时间 2019-11-15

标签利用 chrome 调试 javascript 代码栏目 Chrome 繁體版

原文原文链接

看见网上不少人问怎么用chrome调试JavaScript代码，我也对这个问题抱着疑问，可是没有找到一篇能用的中文文章（可能个人google有问题），也不知道怎么点出一篇E文的,感受做者写得不错，因此尽可能按照原来的风格弄一篇中文的，但愿对和我同样存在疑问的朋友有所帮助。若是高手路过，下面留言指点，或给与相关学习连接，谢谢。javascript

下面我将经过一个例子让你们对chrome的调试功能有个大概的认识。html

几个存在的bug：
    我发现调试功能中有个小bug（做者发现的），尤为是在打开调试窗口时打开控制窗口，个人chrome浏览器会像变魔术同样从屏幕上消失（在下面的调试过程当中没有遇到这样的问题，多是做者用的β版的吧，哈哈）。接下来的步骤将再也不由我控制。我仅仅是用了一个很简单的测试页面就出了问题，不敢想象更大工做量下的状况。

    若是你设置了断点后关闭了调试工具，断点任然存在（在测试过程当中发现对程序运行没有影响，可是再次启动调试工具后原来的断点会对调试产生影响）。java

（以上问题，做者在MAC本本上调试出的问题，你不必定会碰到，不用在乎）。chrome

调试命令：
打开调试窗口后，你能够在底部的输入窗口中输入相关的调试命名，当你输入相关命令敲回车express

执行后，调试信息窗口显示的调试命令前会加上$。下面是相关的调试命令，根据调试状态有浏览器

两个命令集：runnig，paused。注意：[]是可选项，<>是必选项。less

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页面：学习

 1 <html>
 2   <head>
 3   <title>TEST</title>
 4   <script type="text/javascript">
 5   function hello1(){
 6     var d = new Date();
 7     var str = "Hello World - One./n/nIt is ";
 8     alert( str + d.toString() );
 9   }
10 </script>
11 <script type="text/javascript" src="hello2.js"></script>
12   </head>
13   <body>
14     <input type="button" onclick="hello1()" value="Hello 1" />
15     <input type="button" onclick="hello2('hey hey')" value="Hello 2" />
16   </body>
17 </html>

hello2.js：

function hello2( foo ){
  var d = new Date();
  var str = foo + "/n/nHello World - Two./n/nIt is ";
  alert( str + d.toString() );
//keleyi.com
}

一步步来：
一、保存上面的代码和页面而后在chrome中打开该页面。你能够经过两种方式打开调试窗口，一种是Page Icon --> 开发人员 --> 调试 JavaScript；另外一种是经过快捷键Ctrl + Shift + L打开。调试窗口打开后，你将看见一个很大的带滚动条的信息显示窗和能够输入调试命令的文本框。

二、若是你输入help后回车，将在信息显示窗口中看见你能够输入的调试命令的相关信息。咱们从scripts命令该开始。在命令输入框中输入scripts后回车，在信息窗口中你将看见当前页面所引用的js文件，注意，若是你的chrome中有JavaScript console，将会有许多js文件被引入。

三、咱们不能像在VS里面那样随意的设置断点，可是咱们能够经过另外一种方式来设置。在实例代码中有hello1()和hello2()两个函数，要验证函数的存在可使用print命令。在命名输入框中输入print hello1你将在信息窗口中看见函数对应的代码，当咱们确实函数确实存在，咱们就能够经过break hello1设置该函数的断点，当函数被调用时会在函数入口处中止下来。hello2的设置方式同样。

四、为了验证断点是否已经设置，咱们可使用break_info命令来查看断点信息。若是仅仅是想了解第几个断点是什么，可使用断点序列来查看，命令以下：break_info 1，该命令查看第二个断点是什么。

五、当咱们设置好断点后，你能够经过点击页面上的按钮来触发断点，若是你单击第一个按钮，hello1函数被调用的时候会中止下来，你能够经过args命令查看当前函数参数的状况，可是hello1没有参数，因此你看不见任何东西，你能够试试点击第二个按钮来获取参数来看看args的效果。此时你可使用next命令使程序继续往下执行；若是你想查看当前变量的实际状况，能够再命令输入框中输入locals，信息窗口中就会显示当前变量的信息。next使程序执行下一行代码，若是想程序直接继续往下执行直到该中止时中止，输入continue便可。

六、一样在调试过程当中，你能够经过print命令输出变量的状况，用step代替next，用stepall代替continue命令执行相关的调试，本身动手试试看看效果有什么不一样吧。

七、最后咱们但愿移除断点，采用什么方法呢？在命令框中输入clear 1，而后再点击第二个按钮试试有什么效果，哇，程序直接执行了并无在hello2函数出中止下来，hello2的断点消失了。

上面的内容但愿对你入门chrome的调试有所帮助，有的地方没有按照E文里面的方式翻译，若是有什么不对的地方，请指正，咱们的目标，“共同进步才是真的进步”。

原文地址：http://www.pascarello.com/lessons/browsers/ChromeDebugHelp.html