Chrome 如何在代码中设置 javascript 断点？

在 Chrome 浏览器中设置 JavaScript 断点可以通过以下步骤实现：

1. 打开开发者工具： 要设置断点，首先需要打开 Chrome 的开发者工具。这可以通过多种方式完成：

   • 右击页面元素，选择“检查”(Inspect)。
   • 使用快捷键 F12 或 Ctrl+Shift+I（在 Windows/Linux上）或 Cmd+Opt+I（在 macOS 上）。

2. 定位到源代码： 打开开发者工具后，点击顶部的 "Sources" 标签页。这将显示所有加载的资源，包括 JavaScript 文件。

3. 查找 JavaScript 文件： 在 "Sources" 面板的左侧，你会看到一个文件资源树，通过这个树状结构可以找到你想要调试的 JavaScript 文件。点击相应的文件，它将在右侧的编辑器中打开。

4. 设置断点： 在编辑器中，你可以通过点击行号左侧的边缘来设置断点。点击后，会出现一个蓝色或红色的圆圈，表示在该行代码上设置了断点。

5. 触发断点： 现在断点已经设置，当浏览器执行到该行代码时，执行将暂停。这时候，你可以在 "Sources" 面板中检查变量的值、单步执行代码等。

6. 进一步的断点类型：

   • 条件断点：你可以通过右击行号并选择“Add conditional breakpoint”来设置一个条件断点，然后输入一个表达式，只有当该表达式为真时，代码才会在那里暂停。
   • DOM 断点：如果你想知道何时某个 DOM 元素被修改，你可以在 "Elements" 面板中右击元素，并选择 "Break on"，然后选择合适的条件，例如子元素的修改。
   • XHR 断点：如果你想在发生特定的 XMLHttpRequest 调用时暂停，你可以在 "Sources" 面板中的 "XHR/Fetch Breakpoints" 部分添加断点，输入 URL 的部分或全部。

7. 管理断点： 你可以在 "Sources" 面板的右侧查看所有的断点。这个断点列表允许你激活或禁用断点，也可以完全移除它们。

下面是一个简单的例子展示如何设置断点：

假设我们有一个 script.js 文件，其中有一个简单的函数：

javascript
function sayHello() {
    console.log('Hello, world!');
}

要在 console.log 语句上设置断点，我们会在 "Sources" 面板中打开 script.js 文件，然后点击该行对应的行号旁边。这样，当 sayHello() 函数被调用时，代码执行会在 console.log 之前暂停，让我们有机会检查代码的状态。