如何在Chrome中进行本地JavaScript调试？

Chrome本地调试JavaScript代码

Chrome浏览器提供了强大的开发者工具，可以帮助开发者方便地对JavaScript代码进行调试，本文将详细介绍如何在Chrome中利用开发者工具进行本地调试JavaScript代码。

一、设置断点

1. 在Source内容区设置断点

步骤：

1. 打开Chrome开发者工具（Windows系统中按下F12键）。

2. 选择Sources面板。

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

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

示例：

    function add(a, b) {
        return a + b; // 在这一行的左侧点击设置断点
    }

2. 在js文件中设置断点

步骤：

1. 在js源文件中需要执行断点操作的代码前加上debugger关键字。

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

示例：

    function add(a, b) {
        debugger; // 在这一行添加debugger关键字
        return a + b;
    }

二、设置断点执行条件

步骤：

1. 右键点击设置的断点，选择“Edit breakpoint…”。

2. 输入执行断点的条件表达式，当表达式为true时断点调试才会生效。

示例：

    let count = 0;
    function increment() {
        count++;
        debugger; // 设置断点并添加条件
        if (count > 5) {
            console.log('Count is greater than 5');
        }
    }

在断点上右键，选择“Edit breakpoint…”，输入count > 5，只有当count大于5时，断点才会触发。

三、Call Stack调用栈

1. 界面介绍

功能：

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

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

使用技巧：

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

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

四、DOM元素设置断点

1. DOM Breakpoints介绍

功能：

1. 除了可以给js代码设置断点，我们还可以给DOM元素设置断点，因为我们有时候需要监听和查看某个元素的变化、赋值情况，但是并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件。

使用说明：

1. 我们右键点击需要监听的DOM节点，选择“Break On…”菜单项，在出现的三个选择项中任选一个便会添加断点。

2. 这三个选择项分别对应如下三种修改情况：子节点修改（subtree modifications）、自身属性修改（attribute modifications）、自身节点被删除（node removal）。

3. 设置好断点后，当DOM元素要被修改时，代码就会在自动停留在修改处。

五、统一管理所有断点

功能：

1. 我们可能会在不同的文件、不同的位置添加许多断点，这些都会显示在Source页面里的Breakpoints、DOM Breakpoints区域中。

2. Breakpoints：js断点。

3. DOM Breakpoints：DOM元素断点。

4. 点击断点前面的复选框可以暂时“去掉/加上”该断点，点击断点可跳转到相应的程序代码处。

六、快捷键

快速定位文件：使用快捷键Ctrl + p。

快速定位文件中成员函数：使用快捷键Ctrl + Shift + O。

七、格式化

1. js代码格式化

功能：为了减小体积，有时候我们发现一些js源码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式。

2. 格式化返回的JSON数据

步骤：

1. 有时我们调试程序时需要查看服务端返回的数据内容，这个在Network选项卡中就可看到，但如果后台返回的是没有格式化的JSON数据，查看起来会异常痛苦。

2. 我们可以通过chrome控制台的copy接口来实现JSON数据的格式化，首先请求项的右键菜单中选择Copy Response拷贝响应内容，命令行中先输入copy()，然后将拷贝的数据粘贴到括号中，回车后copy接口便会自动将数据进行格式化，并保存到剪贴板中，我们将其粘贴到文本编辑器中就可以看到效果。

示例：

    {"name":"John","age":30,"city":"New York"}

八、使用Snippets编写代码片段

1. Snippets介绍

功能：在Sources页面下的Snippets栏目中，我们可以随时进行JS代码的编写，运行结果会打印到控制台，代码是全局保存的，我们在任何页面，包括新建标签页，都可以查看或运行这些代码，我们不再需要为了运行一小段JS代码而新建一个HTML页面。

使用样例：

1. 点击“New Snippet”按钮，创建一个新的片段文件。

2. 在代码区域输入js代码。

3. 按下“Ctrl + Enter”或者点击右下方的按钮执行代码，可以看到代码执行成功且反应到当前页面上了。

九、Async调试

功能：Chrome调试器的Async模式是为调试异步函数所设计一个功能，默认情况下调用栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难，开启Async模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。

测试代码：

    //做饭
    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);
    });

代码调试：我们都知道Promise的回调是异步执行的，默认情况下调用栈只记录到回调函数本身，我们无法找到代码执行的顺序，这给我们调试带来巨大的困难，开启Async模式后，异步函数之前的调用栈都会被记录下来，而且调用栈中代码执行状态也得到了保留。

到此，以上就是小编对于“chrome本地调试js”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。