“网页源代码”是排查前端问题的第一手资料，查看方式却远不止 Ctrl+U 一种。本文把查看源代码、开发者工具、移动端调试、以及看懂返回内容三块讲清，让你能自己定位样式冲突、接口报错与内容未渲染等问题。

一、三种"看源代码"，看到的不是同一个东西

• 视图源代码（Ctrl+U / view-source:网址）：服务器最初下发的 HTML。看不到 JS 动态插入的内容，是查服务端渲染结果的地方。
• Elements 面板（F12）：当前 DOM 实况，含 JS 改动后的结构、CSS 计算结果。查样式与脚本效果用它。
• Network 面板：所有资源请求（HTML、CSS、JS、接口、图片），能看到响应头与内容。查接口与加载失败用它。

常见误区：在 Elements 里改了内容刷新就没了（DOM 是运行时状态），想永久改变要在源代码或脚本里做；反之"Ctrl+U 里找不到某段内容"不代表页面没有——多半是前端渲染的。

二、桌面浏览器常用面板与快捷键

F12 / Ctrl+Shift+I     打开开发者工具
Ctrl+U                查看页面源代码
Ctrl+Shift+C          进入元素选择模式（点谁查谁）
Ctrl+F（在Elements内） 搜索DOM节点
Ctrl+Shift+P           命令菜单（截图、响应式、清缓存等）

四个高频用法：

1. 定位样式冲突：Elements → Styles 区看规则来源，被划掉的是被覆盖的；Computed 区看最终生效值，能判断是"没写"还是"被覆盖"。
2. 查接口报错：Network → Fetch/XHR 过滤 → 点开请求看 Status、Response、Payload。401/403 看鉴权、500 看后端、CORS 报错看 Console 里的 Access-Control-Allow-Origin。
3. 看资源为什么 404：Network 里该资源请求的真实 URL（含拼接后的路径）一目了然，这对排查 CSS 里 url() 路径基准问题尤其有用。
4. 断点调试：Sources → 行号打断点，或用事件监听断点（如 click）定位脚本来源。

三、看懂 HTML 里的关键信息

<!DOCTYPE html>                  <!-- 决定渲染模式，缺失会进怪异模式 -->
<meta charset="utf-8">           <!-- 中文乱码首先看这里 -->
<meta name="viewport" content="width=device-width,initial-scale=1">  <!-- 移动端适配 -->
<title>                          <!-- 搜索结果标题 -->
<meta name="description">        <!-- SEO 摘要 -->
<link rel="canonical" href="">   <!-- 规范地址，防重复收录 -->
<script src="..." defer>         <!-- defer/async 影响渲染时机 -->

实用判断点：页面错乱先看有没有 <!DOCTYPE html>；中文乱码看 charset 是否与响应头一致；移动端显示异常先确认 viewport；内容显示不全可看是否被 noscript 或前端框架占位容器替代。

四、手机端与平板上怎么查看

• Android Chrome：用数据线连接电脑，电脑 Chrome 打开 chrome://inspect，勾选 USB 调试后可远程审查手机页面（DevTools 完整能力）。
• iPhone Safari：设置里开启 Safari 的"高级 → Web 检查器"，Mac 上 Safari 开发菜单可直连调试。
• 没有电脑时：地址栏输入 view-source: 前缀（部分浏览器支持），或使用支持查看源码的移动浏览器。

五、服务器返回内容与编码问题

如果 Ctrl+U 打开是乱码：优先检查 Content-Type: text/html; charset=utf-8 与 <meta charset> 是否一致；本地文件用记事本另存为 UTF-8 再传；FTP 传输务必用二进制模式（ASCII 模式会破坏多字节编码）。这与前面《记事本打开乱码》一篇属同一类根因：编码声明与实际字节不匹配。

六、常见问题 FAQ

问：能在这里改了代码保存吗？
答：DevTools 修改只作用于本地运行时，刷新即失效，不会改动服务器；需要持久修改要改源文件并部署。

问：为什么看不到压缩后的 JS？
答：启用 { }（Pretty print）格式化；生产包通常没 Source Map，可用它调试但变量名已被缩短。

问：怎么只抓接口不抓图片？
答：Network 面板用 Fetch/XHR 过滤器，或在 Filter 框输入 method:POST、mime-type:application/json 之类表达式。

要点：Ctrl+U 看服务端给的 HTML，F12 Elements 看运行时 DOM，Network 看所有请求与响应；样式被划掉是被覆盖、状态码 4xx/5xx 看响应体、找不到内容先分清静态还是前端渲染。手机调试用 USB + chrome://inspect，这是最高效的组合。

• 调试
• 开发者工具
• 前端