浏览器自带工具：零成本入门首选

要说最方便的网页源码查看工具，其实早就藏在你每天用的浏览器里。这些工具不用下载安装，按下快捷键就能打开，功能还特别全，我刚开始学前端时，整整半年都靠它们”偷师”别人的网页设计。

先说说 Chrome开发者工具，这是我用得最多的一个。你随便打开一个网页，比如豆瓣首页，想看看它的导航栏是怎么写的，有三种简单方法打开：按F12键、右键点击页面空白处选”检查”，或者按Ctrl+Shift+I（Mac用户是Cmd+Opt+I）。打开后会看到一个分栏界面，左边是网页预览，右边就是源码区域。点”Elements”面板，你会发现鼠标移到源码上，左边预览区对应的部分会高亮——这就是”元素审查”功能，能帮你快速定位到想研究的代码块。我去年帮朋友的美食博客改标题样式时，就是用这个功能找到标题对应的

标签，然后在右边的”Styles”面板里直接改字体大小和颜色，改完实时就能看到效果，确定没问题了再复制代码到博客后台，比瞎猜效率高10倍。

如果你用的是Firefox浏览器，它的 开发者工具 也很好用，特别是对CSS新手更友好。同样按F12打开，点”样式编辑器”面板，这里会把网页所有的CSS文件按顺序列出来，还能搜索关键词。我之前想模仿一个摄影网站的图片hover效果（鼠标放上去图片会轻微放大），就在Firefox里搜”hover”，很快找到了对应的代码：transform: scale(1.05); transition: 0.3s;，复制到自己的网站里，效果一模一样。而且Firefox有个”3D视图”功能，点右上角的立方体图标，能看到网页的层级结构，像看建筑剖面图一样，特别直观，对理解”嵌套标签”帮助很大。

Edge浏览器的 开发者工具 则胜在”接地气”，它内置了”代码格式化”功能。有时候看到的源码是一堆挤在一起的字母，像乱码一样，点一下Edge工具栏里的”{}”图标，代码会自动换行、缩进，还会标上不同颜色（HTML标签蓝色、属性红色），瞬间清爽多了。我教我表妹学做网页时，她一开始总抱怨源码看不懂，用Edge格式化后，她指着彩色代码说：”原来每个标签都有开头和 啊，像括号一样！”

可能你会问：”这些工具这么强，还要其他工具干嘛？”其实浏览器工具更适合”临时查看”，如果想保存源码慢慢研究，或者对比多个网页的代码，就需要第三方工具来帮忙了。

第三方工具：功能升级的实用选择

除了浏览器自带的，还有些第三方工具能解决更具体的问题，比如在线格式化源码、批量分析网页结构，甚至帮你找出代码里的错误。我整理了3类最实用的，都是免费且不用注册的，直接打开网页就能用。

先推荐 在线源码查看工具，比如Code Beautify（https://codebeautify.org/，添加nofollow标签）。有时候你从网页复制源码，粘贴到记事本里是一团乱麻，这时候把代码粘贴到Code Beautify的”HTML格式化”框里，点”Beautify Code”，它会自动帮你排版，还能把压缩过的代码（就是去掉空格和换行的那种）还原成正常格式。我之前帮公司整理竞争对手的网页结构，他们的代码压缩得特别厉害，一行有几千个字符，用这个工具格式化后，才看清他们用了哪些新的HTML5标签。而且它还支持CSS和JavaScript的格式化，一个工具解决三种代码问题，对新手来说很友好。

如果你经常需要分析不同网页的源码，浏览器插件 会更方便，比如Web Developer（Chrome和Firefox都能装）。安装后浏览器右上角会多一个图标，点一下就能看到”查看源码”、”禁用CSS”、”显示所有链接”等几十种功能。我最喜欢它的”查看生成的源码”功能——有些网页是用JavaScript动态加载内容的，普通查看源码看不到这些内容，用这个插件就能显示完整的生成后代码。上次我研究一个电商网站的商品筛选功能，怎么都找不到筛选后的列表代码，用Web Developer一点”查看生成的源码”，所有商品数据清清楚楚地列在里面，原来他们是用AJAX动态加载的。

最后说一个 轻量级桌面工具：Notepad++（Windows系统）配合”HTML Tag”插件。如果你想把源码保存到本地慢慢改，Notepad++比系统自带的记事本好用100倍。它能自动高亮代码颜色，还能折叠标签（点标签前面的”+”号，就能把一整块代码收起来），找嵌套结构特别方便。我自己的习惯是，用浏览器工具找到想要的代码，复制到Notepad++里，然后用”HTML Tag”插件检查标签是否闭合——有时候少写一个