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

想真正掌握网页调试，光会按F12可不够。你得同时具备两种能力：查看源代码和打开开发者工具。前者让你看到服务器返回的原始HTML文本，不执行任何Ja vaScript；后者则展示实时渲染的DOM、JS运行状态、网络请求等动态信息。百度浏览器基于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）不会改变，无需重新切换，省心省力。