浏览器F12，Sources-源代码/来源面板调试使用

最新推荐文章于 2024-07-19 10:33:49 发布

fxshy

最新推荐文章于 2024-07-19 10:33:49 发布

阅读量1.4k

点赞数 21

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/fxshy/article/details/139113741

版权

在浏览器的开发者工具中，"Sources" 面板右侧的这些选项是用于调试 JavaScript 的强大工具。下面是对每个选项的详细解析及其使用方法：

1. 监视 (Watch)

用途：

监视特定变量或表达式的值。

使用方法：

在 "Watch" 面板中点击 "+" 按钮。
输入你要监视的变量名或表达式。
每当代码执行暂停时，"Watch" 面板会显示这些变量或表达式的当前值。

2. 断点 (Breakpoints)

用途：

查看和管理当前设置的所有断点。

使用方法：

在 "Breakpoints" 面板中可以看到所有已设置的断点。
你可以启用或禁用每个断点，或者右键点击删除断点。

3. 作用域 (Scope)

用途：

查看当前执行上下文中的所有变量。

使用方法：

当代码执行暂停时，"Scope" 面板显示当前作用域链中的所有变量，包括局部变量、闭包变量和全局变量。
可以展开每个作用域查看详细信息。

4. 调用堆栈 (Call Stack)

用途：

查看代码执行暂停时的调用堆栈，帮助追踪函数调用路径。

使用方法：

当代码执行暂停时，"Call Stack" 面板显示从当前执行点回溯的所有函数调用。
点击堆栈中的任何一行可以跳转到相应的代码位置。

5. XHR/提取断点 (XHR/Fetch Breakpoints)

用途：

设置在 XMLHttpRequest 或 Fetch API 调用时自动暂停代码执行。

使用方法：

在 "XHR Breakpoints" 面板中点击 "+" 按钮。
输入 URL 的全或部分地址（可用通配符）。
当匹配的请求发出时，代码执行会自动暂停。

6. DOM断点 (DOM Breakpoints)

用途：

在 DOM 树的变化（如节点的增加、删除、属性变化）时自动暂停代码执行。

使用方法：

在 "Elements" 面板中选择一个元素，右键点击该元素，选择 "Break on" 子菜单。
选择 "Subtree Modifications"、"Attributes Modifications" 或 "Node Removal"。

7. 全局监听器 (Global Listeners)

用途：

列出所有全局的事件监听器。

使用方法：

在 "Global Listeners" 面板中，你可以看到页面中所有全局范围内的事件监听器。
点击某个监听器可以跳转到其定义位置。

8. 事件监听器断点 (Event Listener Breakpoints)

用途：

设置在特定事件（如点击、键盘事件）触发时自动暂停代码执行。

使用方法：

在 "Event Listener Breakpoints" 面板中展开事件类型列表。
勾选你感兴趣的事件类型。当这些事件触发时，代码执行会自动暂停。

9. CSP 违规断点 (CSP Violation Breakpoints)

用途：

在内容安全策略 (Content Security Policy, CSP) 违规时自动暂停代码执行。

使用方法：

在 "CSP Violation Breakpoints" 面板中启用此断点。
当 CSP 违规（如加载了未授权的脚本）时，代码执行会自动暂停。

使用实例

function fetchData() {
    var url = 'https://api.example.com/data';
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}