怎么在百度浏览器中查看网页源代码和开发者工具？

需掌握查看源代码与开发者工具两种能力：前者用Ctrl+U/Cmd+U、右键或view-source:查看原始HTML，不执行JS；后者用F12、右键检查或菜单打开，展示实时DOM、JS、网络等动态信息。

你想快速查看网页原始HTML结构，或者调试JavaScript脚本、检查元素样式、监控网络请求，就得同时掌握查看源代码和打开开发者工具两种能力。百度浏览器基于Chromium内核，这两类功能入口不同、用途不同、触发方式也不同，不能混用。

直接查看网页原始HTML源代码

这一步不加载JS、不渲染DOM，只显示服务器返回的最原始文本，适合验证统计代码是否写入、检查meta标签或SEO配置。

方法一：快捷键直达
在任意已打开的网页中，直接按下 Ctrl + U（Windows/Linux）或 Cmd + U（macOS），页面立即跳转为纯文本格式的源码视图。

方法二：右键菜单调用
在网页空白处单击鼠标右键 → 在弹出菜单中选择【查看网页源代码】。注意：若右键菜单中没有该选项，说明当前页面可能被禁用了上下文菜单（常见于某些H5应用或iframe嵌套页）。

方法三：地址栏指令强制访问
点击地址栏，将光标移到URL最前方 → 输入 view-source:（注意冒号不能漏）→ 按回车。例如原网址是 https://www.baidu.com，则输入 view-source:https://www.baidu.com 后回车。此方式绕过所有前端拦截，100%返回原始响应体。

打开开发者工具进行动态调试

开发者工具展示的是实时渲染后的DOM树、运行时JS堆栈、网络请求详情和样式计算结果，和源代码不是一回事——比如通过JS动态插入的节点，在源代码里根本找不到。

第一步：用F12唤起基础面板
确保焦点在网页内容区（不要停留在地址栏或标签页上）→ 按下键盘 F12 键。若笔记本无独立F12键，请尝试 Fn + F12。

第二步：切换到Console或Elements标签页
F12默认打开的是Elements面板，显示当前DOM结构；如需执行JS命令或看报错信息，必须手动点击顶部的【Console】标签；如需修改CSS样式，点【Elements】后在右侧Styles区域直接编辑。

第三步：右键“检查”精准定位元素
在页面任意非可交互区域（如段落文字、空白背景）右键 → 选择【检查】→ 开发者工具自动展开，并高亮对应HTML节点。这个操作比F12更精准，尤其适合调试某个按钮或图片的样式问题。

第四步：菜单路径保底启动
点击浏览器右上角三点图标（⋮）→ 将鼠标悬停在【更多工具】上 → 在子菜单中点击【开发者工具】。此路径不受快捷键冲突影响，适合企业电脑或键盘映射被修改的场景。

第五步：地址栏输入 chrome://inspect 进行远程调试
在地址栏输入 chrome://inspect → 回车 → 点击【Configure…】→ 勾选 localhost:9222 → 返回网页刷新 → 在Remote Target列表中找到当前页 → 点击右侧【inspect】。该方式适用于需要连接手机WebView、调试PWA或排查跨域资源加载失败的情况。

调整开发者工具显示位置避免遮挡

当工具面板盖住关键UI、导致无法边看边操作时，必须重新布局。

点击开发者工具窗口右上角的三点图标（⋯）→ 从下拉菜单中选择【在底部显示】（推荐，默认）、【在右侧显示】（适合宽屏）、或【作为独立窗口打开】（多显示器用户首选）。

注意：切换位置后，工具窗口会立即重绘，但当前激活的标签页（如Console或Network）不会改变，无需重新切换。