Chrome 浏览器 Javascript 调试参考

此文章翻译自 https://developers.google.com...，是对 chrome 下调试 javascript 的工具和方法介绍。

调试 js 须要结合浏览器断点操做，具体可见个人上一篇文章：https://segmentfault.com/a/11...。

---

一、调试图标概览

打上断点以后，须要操做对应图标进行调试，图标以下：

从左到右分别是：

Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点中止）。

Step over next function call：执行到下一步的函数调用（执行当前断点所在行，跳到下一行且暂停）。

Step into next function call：进入当前函数，在第一行暂停。

Step out of current function：跳出当前执行函数。

Deactive/Active all breakpoints：关闭/开启全部断点（不会取消）。

Pause on exceptions：异常状况自动断点设置。

---

Pause/Resume script execution（ F8）

在断点暂停后，点击恢复脚本执行，直到下一个断点为止。

长按图标，会出现灰色的播放按钮，鼠标移上去再松开左键，会忽略全部的断点，强制渲染完整的页面。

---

Step over next function call （F10）

当在一行代码中暂停，代码里包含一个与正在调试的问题无关的函数时，能够点击此图标直接解析该函数，而不是进入函数内部逐行执行debug操做。

例如，当你在 debug 如下代码：

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

假设如今是在 A 处暂停。点击 '跳过下个函数调用' 图标，浏览器会解析被跳过的函数里的全部代码（这里是 B 和 C），而后在 D 处再次暂停。

---

Step into next function call （ F11）

当断点找到了要 debug 的确切函数，点击图标进入此函数内部，逐行查看分析里面的变量值和方法。

例如：

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

此时在 A 处打点暂停了，而 A 处就是与问题相关的函数，点击进入函数里，会在 B 处暂停，再次点击会在 C 处暂停，同时 B 处会显示 'name' 变量的值。

---

Step out of current function （Shift + F8）

进入到一个与正在 debug 的问题无关的函数后，能够点击此图标解析函数剩下的代码，跳出函数到下一行。

例如：

function updateHeader() {

var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first + ' ' + app.last; // B

    return name; // C

}

如今在 B 处暂停，step out 以后，浏览器解析 getName() 函数剩下的代码（C），而后在 D 处再次暂停。

---

二、调试区域其余功能概览

Run all code up to a certain line

若是你在 debug 一个很长的函数，里面包含了不少与问题无关的代码，须要区分出来。

首先在函数里设置第一个断点，执行至暂停，而后，有三种方法 debug ：

一、使用 step into function 逐行解析查看结果，会浪费很多时间；

二、根据结果判断哪些是无用的代码，越过它们再设置下一个断点，使用 resume script 执行到下一个断点；

三、根据结果判断哪些是无用的代码，在下一个须要暂停的地方，右键行数，选择 “continue to here”，浏览器会直接解析到那一行并暂停，推荐的方法。

---

View the current call stack

在一行代码里暂停时，能够在 Call Stack 面板查看是哪些栈将你带到了当前断点（到达当前函数调用了哪些函数）。若是不是在一行代码里暂停， Call Stack 面板是没有内容的。

若是要查看异步函数，能够勾选 Async 。（在 windows 版本中没有此选项，默认显示异步函数）。

点击函数会跳到此函数调用的地方。蓝色箭头是当前查看的函数。

---

Copy stack trace

在 Call Stack 面板里右键，选择 Copy stack trace 能够将面板里的 stack 信息复制到 clipboard。

复制的信息格式以下（函数名称、在代码里的行数）：

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)

---

Restart the top function of the call stack

在调试函数的过程当中，想回到函数的开头从新 debug 的时候，能够在 Call Stack 面板中对应的函数上右键，选择 Restart Frame 而无需在开头打断点。Call Stack 面板里是断点函数以及所涉及到的其余函数，最顶端的函数是当前的断点函数。

例如：

function factorial(n) {

    var product = 0; // B

    for (var i = 1; i <= n; i++) {

    product += i;

};

return product; // A

}

如今在 A 处暂停，点击 Restart Frame 以后，会在 B 处暂停。

---

Ignore a script or pattern of scripts

在 debug 过程当中，能够选择忽略部分脚本，不在 Call Stack 中显示，在 step into function 的时候也不会进入被忽略的脚本。

例如：

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A是你确认与当前问题无关的第三方库，那就能够将它关入黑盒子里忽略掉。

在编辑区操做： 在 Source Tab 中双击打开文件 -> 在文件编辑区右键，选择 Blackbox script 。

在Call Stack 面板操做： 在 Call Stack 面板中找到对应的脚本 -> 右键选择 Blackbox script 。

在控制台设置黑盒： 控制台右上角找到 'Customize and control DevTools' 图标（或按F1） -> 选择 Blackboxing tab -> 点击 Add pattern -> 在对话框中输入脚本名字或脚本名字的正则表达式 -> 点击 Add。

---

Change thread context

在网站有 web workers 或者 service workers 线程的时候，须要分别查看主线程和这两个线程的 context ，能够在 Threads 面板切换。

上图蓝色箭头处是当前线程的 context ， 能够点击切换其余线程。

---

View and edit local, closure, and global properties

在断点暂停时，能够在 Scope 面板里查看和编辑局部、闭包和全局范围内的属性和变量的值。不会显示不可枚举的属性。

双击一个属性值能够输入新的值。

---

Run snippets of debug code from any page

若是在调试中，须要一次次在控制台输入相同的内容的话，可使用 Snippets（代码片断） 功能减小重复劳动。代码片断是您在DevTools中编写、存储和运行的可执行脚本。

Snippets 是全局的，在浏览器的全部标签页都能找到和运行。

具体可查看 https://developers.google.com...。

---

Watch the values of custom JavaScript expressions

在 debug 过程当中，若是但愿重点观察某些变量的值（而不是在 Scope 面板里层层点开），能够加入 Watch 面板。Watch 面板里的值会在执行代码时自动刷新。

'+' 图标建立新的 expression；右边是刷新图标，手动刷新变量的值；鼠标移动到变量上，在右侧会出现删除图标。

---

Make a minified file readable

能够将最小化了的代码还原成对人友好的形式。

点击代码编辑区域左下角的 '{}' 图标。

---

Edit a script

若是要尝试修复 bug ， 不须要切换到编辑器修改，再刷新当前页面。你能够直接在代码编辑区域修改代码而后保存看看修改后的效果。若是是最小化了的代码，能够先还原成对人友好的格式。

tips：肯定修改方向以后，记得在编辑器代码里修改保存。

操做： 修改代码 -> 按 Command + S （mac）或 Ctrl + S （windows, Linux）保存修改 -> 查看效果。