1. 打开开发者工具的基础操作
- 快捷键启动：按`Ctrl+Shift+I`（Windows）或`Cmd+Opt+I`（Mac）→自动打开与当前标签页绑定的调试面板→默认显示“元素”和“控制台”选项卡。
- 右键菜单入口：点击网页任意区域→选择“检查”→直接跳转到对应DOM节点（适合定位广告弹窗或动态加载内容）。
2. 使用元素面板修改网页结构
- 实时编辑HTML：在“元素”标签下展开网页代码→双击文本节点可直接修改文字（如将“登录”改为“退出”）→右键选择“编辑属性”修改图片链接或按钮样式。
- 添加测试节点：右键点击某个标签→选择“编辑为HTML”→输入div>测试内容 3. 通过控制台执行JavaScript
- 打印日志信息：在控制台输入`console.log('测试消息')`→查看输出结果→支持展开对象（如`console.dir(document)`）和分组日志（`console.group()`）。
- 强制触发事件：输入`document.querySelector('button').click()`→模拟点击按钮→配合定时器（`setInterval`）实现自动化操作（如自动翻页）。
4. 网络面板分析请求数据
- 捕获页面资源：切换到“网络”标签→刷新页面→查看所有加载请求（如JS、图片、API接口）→点击具体条目可查看头信息和响应数据。
- 过滤关键请求：在过滤框输入`.json`或`.api`→快速定位接口地址→右键复制请求链接（用于Postman复现或接口测试）。
5. 利用源代码面板调试脚本
- 设置断点调试：在“源代码”标签找到目标JS文件→点击行号添加断点→重新加载页面→逐步执行代码（支持`Step over`和`Step into`操作）。
- 实时修改脚本：在断点暂停状态下→直接修改变量值（如将`var count=0`改为`count=10`）→继续执行观察效果（适合修复前端计算错误）。