Chrome浏览器提供五种方式打开开发者工具：一、快捷键Ctrl+Shift+I（Win/Linux）或Cmd+Option+I（macOS）；二、右键→“检查”；三、菜单→更多工具→开发者工具；四、右键→“查看网页源代码”查原始HTML；五、元素选择器（Ctrl+Shift+C）快速定位DOM元素。
如果您在使用谷歌浏览器时需要查看网页的源代码或调试页面元素，Chrome浏览器内置的开发者工具可以满足这一需求。以下是进入和使用开发者模式的具体步骤：
一、通过快捷键打开开发者工具
该方法适用于所有操作系统，响应迅速且无需鼠标操作，适合高频调试场景。
1、在目标网页处于激活状态时，按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）。
2、此时页面右侧或底部将立即弹出开发者工具面板，默认显示“Elements”标签页。
二、通过右键菜单打开开发者工具
该方式直观易懂，适合初学者快速定位功能入口，无需记忆快捷键。
1、在网页任意空白区域点击鼠标右键。
2、在弹出的上下文菜单中选择 检查 选项。
3、开发者工具随即展开，光标自动定位到当前右键位置对应的HTML节点。
三、通过地址栏按钮打开开发者工具
该路径提供图形化入口，便于在快捷键失效或被拦截时作为备用方案。
1、点击浏览器右上角的三点竖排菜单图标（即“更多”按钮）。
2、依次选择 更多工具 → 开发者工具。
四、查看网页原始HTML源代码
开发者工具中的“Elements”面板展示的是渲染后的DOM树，若需查看服务器返回的原始HTML，应使用“页面源代码”功能。
1、在网页任意位置右键单击。
2、选择 查看网页源代码（注意：此项与“检查”为不同选项）。
3、新标签页将打开纯文本格式的原始HTML，不包含JavaScript动态插入的内容。
五、在开发者工具中快速定位元素
利用元素选择器可实现所见即所得的DOM结构定位，大幅缩短查找时间。
1、确保开发者工具已打开并位于“Elements”标签页。
2、点击左上角的 元素选择图标（箭头方框图标） 或按 Ctrl + Shift + C（Windows/Linux）/Cmd + Shift + C（macOS）。
3、将鼠标悬停在网页内容上，对应HTML节点会实时高亮，点击即可在Elements面板中选中该元素。
