谷歌浏览器（Chrome）提供了强大的开发者工具（DevTools）用于网页调试。以下是常用的调试方法

谷歌 Chrome手册 2026-04-09 2

打开开发者工具

常用方式：

快捷键
- Windows/Linux: F12 或 Ctrl+Shift+I
- Mac: Cmd+Option+I
右键菜单

在网页任意位置右键 → “检查”
菜单栏

点击右上角三个点 → 更多工具 → 开发者工具

主要面板功能

元素面板（Elements）

查看和编辑HTML/CSS
实时修改样式,查看盒模型
快捷键：Ctrl+Shift+C（Win）/ Cmd+Shift+C（Mac）快速选择元素

控制台面板（Console）

查看JavaScript错误和日志
执行JS代码

常用命令：

console.log()     // 输出日志
console.table()   // 表格形式显示数据
console.time()    // 计时
debugger;         // 添加断点

源代码面板（Sources）

设置断点：点击行号
调试控制：
- 继续执行（F8）
- 单步跳过（F10）
- 单步进入（F11）
- 单步跳出（Shift+F11）
监视变量：在右侧Watch面板添加
调用堆栈：查看函数调用关系

网络面板（Network）

查看所有网络请求
过滤请求类型（XHR、JS、CSS等）
查看请求详情和响应内容
模拟慢速网络

应用面板（Application）

查看和编辑Storage（LocalStorage、SessionStorage、Cookies）
管理缓存

性能面板（Performance）

录制页面性能
分析帧率、内存使用

内存面板（Memory）

分析内存泄漏
拍摄堆快照

实用调试技巧

条件断点

右键点击行号 → “添加条件断点”
输入条件表达式,满足条件时才暂停

DOM断点

在Elements面板,右键元素 → Break on
可选择：子树修改、属性修改、节点移除

XHR/Fetch断点

Sources面板右侧 → XHR/Fetch Breakpoints
拦截特定API请求

事件监听器断点

Sources面板右侧 → Event Listener Breakpoints
在特定事件发生时暂停

移动端调试

点击“切换设备工具栏”图标（手机形状）
模拟不同设备尺寸
调试触控事件、屏幕旋转

Workspace功能

将本地文件夹映射到Sources
直接编辑文件并保存到本地

调试工作流示例

// 示例：调试一个函数
function calculateTotal(items) {
    // 添加断点
    let total = 0;
    for (let item of items) {
        total += item.price * item.quantity;
        // 使用控制台
        console.log('当前总计:', total);
    }
    return total;
}