利用chrome调试JavaScript代码

喜欢ヅ旅行 2022-09-18 14:50 210阅读 0赞

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

下面我将通过一个例子让大家对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.

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

![复制代码][copycode.gif]

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>

![复制代码][copycode.gif]

hello2.js：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

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

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

4、为了验证断点是否已经设置，我们可以使用break\_info命令来查看断点信息。如果仅仅是想了解第几个断点是什么，可以使用断点序列来查看，命令如下：break\_info 1，该命令查看第二个断点是什么。

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

6、同样在调试过程中，你可以通过print命令输出变量的情况，用step代替next，用stepall代替continue命令执行相关的调试，自己动手试试看看效果有什么不同吧。

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

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

[copycode.gif]: /images/20220828/c0de195a4d7645329a95fb17254f7d69.png