Chrome和Edge浏览器可通过五种方式打开开发者工具：一、快捷键（Win/Linux为Ctrl+Shift+I，macOS为Cmd+Option+I）；二、右键“检查”；三、菜单栏“更多工具→开发者工具”；四、地址栏输入view-source:查看原始HTML；五、F12键。
如果您想了解网页的结构、调试前端代码或学习HTML/CSS/JavaScript实现方式，需要直接查看当前页面的源代码。Chrome和Edge浏览器均内置了功能一致的开发者工具，以下是几种常用且可靠的操作方法：
一、使用快捷键快速打开开发者工具
快捷键是最高效的方式，适用于所有页面状态，包括加载中、已加载完成或发生错误时。该方法直接唤起开发者工具并默认定位到“元素”面板，可立即查看实时渲染的DOM结构。
1、在Windows或Linux系统中，按下 Ctrl + Shift + I 组合键。
2、在macOS系统中，按下 Command + Option + I 组合键。
3、若焦点位于页面内，按键后开发者工具窗口将立即弹出；若焦点在地址栏或非页面区域，需先点击页面空白处再触发。
二、通过右键菜单打开“检查”选项
该方式直观易用，特别适合初学者识别页面具体元素。右键操作会自动将开发者工具聚焦至所选HTML节点，并高亮其在DOM树中的位置。
1、在网页任意空白区域单击鼠标右键。
2、在弹出的上下文菜单中选择 检查 选项。
3、开发者工具将展开并自动定位到对应HTML标签，右侧同步显示该元素的样式、盒模型与事件监听器。
三、通过浏览器菜单栏手动调用
当快捷键被其他软件拦截或键盘布局异常时，可通过图形化菜单路径稳定启用开发者工具。此路径明确展示工具入口，便于理解其在浏览器功能体系中的归属。
1、点击浏览器右上角的三点竖排菜单按钮（Chrome为三个点，Edge为三个水平点）。
2、依次展开 更多工具 → 开发者工具。
3、开发者工具将以停靠模式（默认底部）或独立窗口模式打开，初始视图为“元素”面板。
四、使用地址栏命令直接跳转至源码视图
该方法绕过图形界面，直接在地址栏输入指令执行，适用于需快速定位原始HTML文本而非渲染后DOM的场景。它强制加载未经JavaScript修改的初始HTML源文件。
1、确保当前标签页处于目标网页。
2、点击地址栏，将光标置于URL前方。
3、输入 view-source:（注意末尾冒号），然后按回车键。
4、页面将切换为纯文本格式，完整显示服务器返回的原始HTML源代码，不包含任何动态插入内容。
五、通过F12功能键启用开发者工具
F12是Web开发标准热键，在Chrome与Edge中被统一支持。该键位独立于输入法与系统设置，响应优先级高，适合键盘操作习惯稳定的用户。
1、确保网页标签页处于活动状态。
2、直接按下键盘上的 F12 键。
3、开发者工具随即启动，默认激活“元素”面板；若此前关闭过工具窗口，F12将恢复上次使用的面板和停靠位置。
