一、基础断点设置与触发
1. 进入开发者工具：按下 `F12` 或右键点击页面选择“检查”→自动打开开发者工具，默认显示“Elements”面板。
2. 定位元素并添加断点：在“Elements”面板中选中目标元素→右键点击→选择“Break on”→勾选“Subtree modifications”（子树修改）或“Node removal”（节点移除）→当页面尝试修改或删除该元素时，调试器会自动暂停。
二、事件监听与动态断点
1. 通过Console手动触发断点：在控制台输入 `debugger;` →脚本执行到此处时会暂停，方便检查当前作用域的变量和调用栈。
2. 监听特定事件：在“Sources”面板中找到相关脚本文件→找到事件绑定代码（如 `addEventListener`）→在事件处理函数前点击行号设置断点→当用户触发事件时，调试器会暂停执行。
三、样式与布局调试
1. 强制元素状态：在“Styles”面板中勾选或取消某个CSS属性前的复选框→实时查看样式变化效果。若需固定元素状态，可右键点击样式规则→选择“Force state”→锁定当前样式。
2. 模拟视口与布局：点击开发者工具左上角的“Toggle device toolbar”→选择移动设备或自定义分辨率→观察元素在不同屏幕下的布局表现。
四、网络请求与资源加载分析
1. 捕获网络请求：切换到“Network”面板→刷新页面→查看所有资源加载记录。点击具体请求可查看头信息、响应数据及耗时。
2. 拦截并修改请求/响应：右键点击某个请求→选择“Block request”可阻止其加载，或右键点击响应→选择“Edit response”修改返回内容，测试页面对异常数据的处理逻辑。
五、高级调试技巧
1. 使用Snippets保存代码片段：在“Sources”面板右侧点击“Snippets”→新建代码片段→输入调试代码（如 `element.style.border = '1px solid red'`）→通过快捷键 `Ctrl+E`（Windows）/`Cmd+E`（Mac）执行，快速验证样式调整效果。
2. 远程调试移动端页面：使用USB连接安卓设备→在移动端Chrome设置中启用“远程设备调试”→在PC端开发者工具右上角点击“Remote Devices”→选择设备并调试页面，解决手机端元素异常问题。