怎么查看网站的源代码

怎么查看网站的网站源代码

按 Ctrl+U。这是源代码最快的方式，没有之一。网站浏览器会弹出一个新标签页，源代码里面密密麻麻全是网站代码，那就是源代码你当前看到的这个页面的原始文件。Chrome、网站Edge、源代码Firefox 都支持这个快捷键，网站Mac 上换成 Command+Option+U 就行。源代码

但很多人不知道的网站是，Ctrl+U 看到的源代码只是服务器最初发过来的那份 HTML。如果页面加载完之后，网站JavaScript 又往里面塞了内容——比如微博的源代码信息流、淘宝的网站商品列表——那你在 Ctrl+U 的页面里根本找不到这些东西。它只认“原始文件”，不认“后来改过的样子”。

右键检查才是日常用得最多的

在页面任意位置点右键，选“检查”或者“Inspect”。右侧（或下方）会弹出一个面板，里面显示的是浏览器当前实际渲染的 DOM 结构。跟 Ctrl+U 的区别在于：这里能看到 JavaScript 动态插入的节点，能看到你悬停某个元素时它对应的代码行被高亮，还能直接双击修改文字、删掉广告、把按钮颜色改成粉色——只要刷新一下，全都会还原，因为你改的只是本地内存里的那份拷贝。

我平时排查页面问题时，基本只用这个方式。比如想确认某个标题到底用的什么标签，右键一点，<h2 class="entry-title"> 明明白白。比翻源码快得多。

想看某个具体元素的代码怎么办

右键 → 检查，面板会自动定位到那个元素。这比在几千行 HTML 里大海捞针高效太多。如果你想知道某个 CSS 类名是从哪个文件来的，在右侧面板的 Styles 标签里，每个规则后面都会标注来源文件和行号。点一下就能跳过去。改样式的时候尤其好用——直接在面板里调数值，实时看效果，满意了再抄回自己的代码里。

还有个场景：你想知道某个按钮点击后触发了什么请求。切到 Network 标签，点一下按钮，新出现的请求就是答案。点进去看 Headers 和 Response，接口地址、参数、返回数据一目了然。这比读源码猜逻辑快十倍。

手机浏览器也能看

Chrome 手机版地址栏输入 view-source: 加网址，比如 view-source:example.com，就能看到源码。不过手机上操作 DOM 检查不太方便，屏幕小，面板挤。真要调试还是连电脑用远程调试更实际。Android 用 Chrome 的 chrome://inspect，iPhone 用 Safari 的 Develop 菜单，都能把手机页面投到电脑上检查。

几个容易踩的坑

有些网站会禁用右键菜单，右键点了没反应。这时候用 Ctrl+Shift+I 直接打开开发者工具，或者 F12，照样能看。还有些网站检测到开发者工具打开就跳转或弹窗，这种属于反调试手段，绕过方法就不展开说了，不是正常开发该花精力的地方。

另外，view-source: 这个协议在部分浏览器上已经被弱化了。Chrome 从某个版本开始，地址栏直接输 view-source: 会被当成搜索词处理，得先打开开发者工具再操作。所以还是记住 Ctrl+U 最省事。

最后说一句：看源代码这件事，门槛低到几乎为零，但真正会用的人不多。大部分人右键“检查”只是为了抄个颜色或者偷张图。其实那个面板里藏着的东西远不止这些——性能分析、内存快照、网络限速模拟、设备模拟，每一个都值得单独花时间摸一遍。源码只是入口，不是终点。

本文地址：http://www.79wt.cn/news/1170b9299790.html