如何在Chrome中调试JavaScript代码？

Chrome Debug JS

一、熟悉 Sources 面板

Chrome DevTools 的 Sources 面板是调试 JavaScript 的核心区域，通过按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），可以打开 DevTools，然后点击 Sources 面板，Sources 面板包含以下三个主要部分：

1、文件预览窗口：此处列出页面请求的每个文件。

2、代码编辑窗口：在文件预览窗口中选择文件后，此处会显示该文件的具体内容。

3、JavaScript 调试窗口：包含检查页面 JavaScript 的各种工具，DevTools 窗口布局较窄，此窗口会显示在代码编辑窗口下方。

二、使用断点暂停代码

断点是调试过程中最重要的功能之一，它允许你在特定代码行暂停执行，并检查相关变量的值，与console.log() 方法相比，断点具有显著优势，以下是设置断点的几种方式：

1、代码行断点：直接点击代码行号槽，为相应的行添加断点，断点会在执行该行代码之前暂停。

2、条件断点：右键点击行号槽，选择 "Add conditional breakpoint"，输入条件表达式，只有当条件满足时，断点才会生效。

3、事件监听器断点：在 Event Listener Breakpoints 面板中，勾选特定的事件类型（如 Mouse 事件中的 click），DevTools 将在这些事件触发时自动暂停。

4、DOM 更新断点：在 Elements 面板中，右键点击特定元素，选择 Break on -> Subtree modifications 或 Attribute modifications，当 DOM 发生变化时，代码将暂停。

5、XHR/Fetch 断点：用于调试 AJAX 请求，可以在 Network 面板中设置。

三、检查变量的值

当代码在某一行暂停时，Scope 窗格会显示当前作用域内的所有变量及其值，你可以双击变量值进行编辑，Watch Expressions 允许你监视任意 JavaScript 表达式的变化情况：

1、点击 Watch 标签。

2、点击右边的 + 添加表达式。

3、输入需要监视的表达式，按 Enter 键确认。

控制台也可以用来求值任意 JavaScript 语句，这对于测试潜在解决方案非常有用，输入parseInt(n) + parseInt(u) 并按 Enter 键，查看结果是否符合预期。

四、尝试修改代码

找到问题后，可以直接在代码编辑窗口中进行修改，修改完成后，点击 Deactivate breakpoints 取消激活断点，然后点击 Resume script execution 按钮继续执行代码，验证修改是否有效，这种方式只会影响本地运行时的代码，不会改变服务器上的代码。

五、其他调试技巧

1、单步执行：使用 Step over next function call 和 Step into next function call 按钮逐步执行代码，帮助理解代码执行顺序。

2、黑盒脚本：对于第三方库，可以使用 Blackbox script 功能忽略这些脚本的具体内容，避免调试时进入不必要的复杂代码。

3、异常断点：选中 Pause on exceptions 按钮，当脚本抛出异常时自动暂停，便于捕获和修复错误。

Chrome DevTools 提供了强大的工具来调试 JavaScript 代码，通过合理使用断点、观察变量、单步执行等功能，可以高效地找到并修复代码中的错误，掌握这些技能将大大提升你的开发效率和代码质量。

FAQs

Q1: 如何在 Chrome DevTools 中设置断点？

A1: 在 Chrome DevTools 中设置断点的方法如下：

1、打开 Chrome DevTools（按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux））。

2、选择 Sources 面板。

3、在文件预览窗口中找到并点击要调试的文件。

4、在代码编辑窗口中，点击目标行号槽，即可添加一个断点，断点标记会出现在该行号旁边。

5、你也可以通过右键点击行号槽，选择 "Add conditional breakpoint" 来设置条件断点，输入条件表达式后按 Enter 键确认。

6、对于事件监听器断点，可以在 Event Listener Breakpoints 面板中勾选特定事件类型（如 click），这样当该事件触发时会自动暂停执行。

7、对于 DOM 更新断点，可以在 Elements 面板中右键点击特定元素，选择 Break on -> Subtree modifications 或 Attribute modifications，当 DOM 发生变化时会自动暂停执行。

8、对于 XHR/Fetch 断点，可以在 Network 面板中设置，用于调试 AJAX 请求。

9、设置好断点后，可以点击 Resume script execution 按钮运行代码，当达到断点位置时会自动暂停执行。

10、你可以在 Scope 窗格中查看当前作用域内的变量及其值，也可以在 Watch Expressions 中添加需要监视的表达式。

11、如果需要修改代码，可以直接在代码编辑窗口中进行修改，然后点击 Deactivate breakpoints 取消激活断点，再点击 Resume script execution 按钮继续执行代码以验证修改是否有效。

Q2: Chrome DevTools 如何调试异步代码？

A2: Chrome DevTools 提供了多种方法来调试异步代码，包括 Promises、async/await、事件监听器等，以下是一些常用的调试技巧：

1、Promises：在处理 Promises 时，可以通过在 Promise 链的每个 then 和 catch 回调中设置断点来调试。

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
    debugger; // 在这里设置断点
    // 处理数据...
})
.catch(error => {
    debugger; // 在这里设置断点
    // 处理错误...
});

2、Async/Await：对于 async/await 代码，可以直接在 await 表达式处设置断点。

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    debugger; // 在这里设置断点
    // 处理数据...
}
fetchData();

3、事件监听器：对于事件监听器，可以使用 Event Listener Breakpoints 功能自动暂停执行，勾选鼠标事件中的 click，当点击事件发生时会自动暂停执行。

4、MutationObserver：对于基于 MutationObserver 的异步操作，可以在回调函数内部设置断点。

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        debugger; // 在这里设置断点
        // 处理 mutation...
    });
});
observer.observe(document.body, { attributes: true, childList: true, subtree: true });

5、Web Workers：对于 Web Workers，可以在 DevTools 中切换到对应的 worker 脚本，并像调试主线程一样设置断点。

6、Request/Response Breakpoints：对于网络请求，可以在 Network 面板中设置断点，确保在请求发出或响应接收时暂停执行。

7、Blackboxing：为了避免进入不需要调试的第三方库代码，可以使用 Blackbox scripts 功能将这些脚本标记为“黑盒”，从而跳过它们。

8、Console and Watch：使用控制台和监视表达式来检查变量的状态和值变化，在控制台中输入watchExpression 然后按 Enter 键添加监视表达式。

9、Step Over and Step Into：使用单步执行按钮逐步执行代码，帮助理解异步流程的具体执行顺序。

10、Pause on Exceptions：选中 Pause on exceptions 按钮，当脚本抛出异常时自动暂停执行，便于捕获和修复错误。

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