Chrome 是 Google 出品的一款非常优秀的浏览器，其内置了开发者工具（Windows 系统中按下 F12 即可开启），可以让我们方便地对 JavaScript 代码进行调试。

为方便大家学习和使用，本文我对 Chrome 的调试技巧做个系统的总结。

有两种方法可以给代码添加断点：

（1）找到要调试的文件，然后在内容源代码左侧的代码标记行处点击，即可打上一个断点。

（2）刷新浏览器，当页面代码运行到断点处便会暂停执行。

（3）如果是 Vue 项目的活，我们可以 vue.config.js 配置中开启 source-map 配置，这样浏览器就可以通过映射来找到源文件，从而进行断点的设置和调试了：

（1）我们在 js 源文件中需要执行断点操作的代码前加上 debugger。

（2）刷新浏览器，当页面代码运行到断点处会暂停执行。

（1）右键点击设置的断点，选择 Edit breakpoint...

（2）输入执行断点的条件表达式，当表达式为 true 时断点调试才会生效。有了条件断点，我们在调试代码的时候能够更加精确地控制代码断点的时机。

（1）当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。

（2）Call Stack 列表的下方是 Scope Variables 列表，可以查看此时局部变量和全局变量的值。

（1）调试时当前调用在哪里，Call Stack 列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处，便会调到相应的位置，方便我们再回头去看看代码。

（2）如果想重新从某个调用方法处执行，可以右键选择 Restart Frame。断点就会跳到此处开头重新执行，同时 Scope 中的变量值也会依据代码重新更改，这样就可以方便地回退来重新调试，省得我们再重新刷新整个页面。

四、添加全局的事件监听断点

    比如我们想要监听页面上某个按钮点击后的响应，我们在点击按钮前勾选“Event Listener Breakpoints”面板下 Mouse -> click 事件。接着点击页面按钮就会跳到对应的代码位置。

（1）如果我们使用一些第三方的框架，可能会定位到第三方框架内的代码，比如跳到了 iview.js 中，而我们希望是能定位到我们项目代码中的点击响应。因此我们可以右键点击这个调用栈，选择“Add script to ignore list”将其忽略。

（2）这样再次测试可以发现成功定位到我们代码中按钮点击事件响应中了：

（2）我们可以通 XHR/Fetch Breakpoints 来管理 XHR 请求相关的断点。首先点击➕新增一个断点，然后输入该地址部分内容，当一个 XHR 请求的链接包含输入的值时，便会中断进程进入断点。我们就可以通过调用栈查看整个请求前后的调用代码，

六、DOM 元素设置断点

1，DOM Breakpoints 介绍

2，使用说明

七、统一管理所有断点

八、快捷键

1，快速定位文件

2，快速定位文件中成员函数

九、格式化

1，js代码格式化

2，格式化返回的 JSON 数据

3，返回的 JSON 对象内的 JSON 字符串格式化

十、使用 Snippets 编写代码片段

1，Snippets 介绍

2，使用样例

十一、Async 调试

1，测试代码

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){  //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}

//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){ //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('用过的碗和筷子');
        }, 2000);
    });
    return p;
}

cook()
.then(eat)
.then(function(data){
    console.log(data);
});

2，代码调试