Chrome开发者工具可通过F12、Ctrl+Shift+I（Win/Linux）或Cmd+Option+I（macOS）等五种方式打开，包含Elements、Console、Network、Sources四大核心面板，支持实时编辑HTML/CSS、执行JS命令、监控网络请求及设置断点调试。
如果您希望在网页开发或调试过程中实时查看和修改页面结构、样式、脚本或网络请求，则需要借助 Chrome 内置的开发者工具。以下是快速上手使用该工具的具体操作路径：
一、打开开发者工具
开发者工具是 Chrome 浏览器中用于网页调试与分析的核心面板，通过多种方式均可快速调出，所有入口均直接激活同一套功能界面，适用于 Windows、macOS 和 Linux 系统。
1、在任意已加载的网页中按下 F12 键（Windows/Linux），或按 Fn + F12（部分笔记本需配合功能键）。
2、在 Windows/Linux 系统中同时按下 Ctrl + Shift + I；在 macOS 系统中同时按下 Command + Option + I。
3、在网页任意空白处或目标元素上点击鼠标右键，从上下文菜单中选择 检查 选项，工具将自动高亮对应 HTML 节点。
4、点击浏览器右上角三点垂直菜单图标（┇），依次选择 更多工具 → 开发者工具。
5、在地址栏输入 chrome://inspect 并回车，可进入远程设备调试管理界面，点击目标页面下的 inspect 链接即可打开对应控制台。
二、切换并熟悉主要功能面板
开发者工具由多个标签页组成，每个面板对应不同类型的调试任务，初始默认显示“Elements”面板，可通过顶部标签栏快速切换，所有操作均在当前页面上下文中实时生效。
1、点击顶部 Elements 标签，查看和实时编辑当前页面的 HTML 结构与 CSS 样式规则。
2、点击 Console 标签，执行 JavaScript 命令、查看运行时错误日志及 console.log() 输出结果。
3、点击 Network 标签，监控页面刷新后产生的全部 HTTP/HTTPS 请求，包括状态码、响应头、资源大小与加载时序。
4、点击 Sources 标签，在左侧文件树中定位 JS 文件，于行号左侧单击设置断点，实现代码暂停与变量监视。
三、使用元素面板修改网页样式
Elements 面板允许用户动态查看和调整 DOM 结构与 CSS 样式，所做更改仅作用于当前会话，刷新后恢复原始状态，适合快速验证视觉效果。
1、在 Elements 面板中，将鼠标悬停在 HTML 元素上，页面对应区域会以蓝色边框高亮显示。
2、点击左上角选择元素图标（↖），然后在页面上直接点击目标元素，自动定位到对应 DOM 节点。
3、在右侧 Styles 侧边栏中，找到某条 CSS 规则，双击属性值（如 color: #333 中的 #333），输入新值（如 blue）并按回车确认。
4、勾选或取消勾选某条 CSS 属性前的复选框，可即时启用或禁用该样式，页面立即响应变化。
四、在控制台中执行基础调试命令
Console 面板提供交互式 JavaScript 运行环境，可用于验证代码逻辑、查询变量、捕获异常或模拟用户行为，所有输入均在当前页面全局作用域下执行。
1、在 Console 输入框中输入 document.title 并回车，查看当前页面标题文本内容。
2、输入 console.log("Hello DevTools")，观察输出结果出现在控制台底部，确认执行环境就绪。
3、输入 debugger，页面后续 JavaScript 执行将暂停，并自动跳转至 Sources 面板中断点位置。
4、输入 $$("a")，获取当前页面所有 标签的 NodeList，支持链式调用如 .forEach(...)。
五、监控网络请求并识别异常
Network 面板能够完整记录页面加载过程中的全部资源请求，帮助识别失败请求、性能瓶颈或冗余加载项，所有数据基于真实网络行为捕获。
1、进入 Network 面板后，点击左上角圆形录制按钮（或按 Cmd/Ctrl + R 刷新页面），开始捕获请求。
2、观察每条请求的 Status 列：红色状态码（如 404、500）表示请求失败，绿色（如 200）表示成功。
3、点击某条请求，在下方面板中切换至 Headers 页签，查看请求头与响应头的完整字段与值。
4、切换至 Preview 或 Response 页签，直接查看服务器返回的原始内容或渲染预览。
