要快速查看网页源码或调试HTML/CSS/JS,需用开发者工具的Sources面板或view-source:协议;F12、右键检查、三点菜单均可唤起开发者工具,Ctrl+U或view-source:可查看原始HTML。

你想在百度浏览器里快速定位某个按钮的HTML结构、验证CSS样式是否生效,或者检查页面加载了哪些JS文件,就得同时打开开发者工具并切换到源代码视图——它比原始源码更真实,能看见JS动态生成的内容。
先唤起开发者工具
确保当前网页已完全加载,且鼠标焦点落在页面内容区域(不要停在地址栏或标签页上)→ 按下 F12 键。这是最直接的入口,响应快、不依赖菜单层级。
若键盘无独立F12键(如多数笔记本),请尝试 Fn + F12 组合。部分机型需长按Fn再按F12才能触发,短按可能无效。
右键点击页面任意非交互区域(比如正文段落、空白背景)→ 在弹出菜单中选择【检查】。这个操作会自动高亮对应DOM节点,比F12更精准,特别适合调试某个具体元素。
点击浏览器右上角三点图标(⋮)→ 将鼠标悬停在【更多工具】上 → 在子菜单中点击【开发者工具】。此路径绕过所有快捷键冲突,适合企业环境或键盘映射被修改的设备。
切换到Sources面板查看可格式化的源代码
开发者工具默认打开的是【Elements】面板。要看到带行号、可折叠、支持断点调试的真实源文件,必须手动点击顶部导航栏中的【Sources】标签。
左侧资源树中展开“Page”节点 → 找到当前网页的HTML文件(通常为域名后缀名,如 baidu.com 或 index.html)→ 单击选中它。此时右侧主区域显示未经压缩的原始HTML文本,但仍是扁平结构。
在右侧代码编辑区底部工具栏中,点击大括号 {} 图标(Format code)。这一步会自动添加缩进、换行和层级对齐,让混乱的HTML立刻变得可读。不点它,你面对的就是一整屏挤在一起的标签。
用view-source:强制查看服务器返回的原始HTML
方法一:快捷键直达
在任意已打开网页中,直接按下 Ctrl + U(Windows/Linux)或 Cmd + U(macOS),页面立即跳转为纯文本格式的源码视图。它不执行JavaScript,也不渲染DOM,只展示服务器最初吐出来的那堆字符。
方法二:地址栏指令强制访问
点击地址栏 → 将光标移到URL最前方 → 输入 view-source:(注意冒号不能漏)→ 按回车。例如原网址是 https://www.baidu.com,则输入 view-source:https://www.baidu.com 后回车。此方式绕过所有前端拦截,【100%返回原始响应体】,适合验证SEO meta、统计代码是否写入。
方法三:右键菜单调用
在网页空白处单击鼠标右键 → 选择【查看网页源代码】。若菜单中没有该选项,说明当前页面可能禁用了上下文菜单(常见于H5应用或iframe嵌套页),请改用前两种方法。



















