有时候我们想看看某个网页到底是怎么写的:布局用了什么标签、样式是怎么调的、结构是怎么组织的。浏览器虽然能按 F12 看,但对不太熟的人不太友好,复制出来也不方便。这个小工具就是给你一个简单的入口——把网址粘进去,点一下,那个网页的源代码就抓下来,清清楚楚地显示在你面前,还能格式化、复制,想研究哪部分都行。
主要功能
输入网址,抓取源码
最上面一格填网址,比如 https://www.baidu.com,点"获取源码",工具就去把那个网页的 HTML 抓回来。抓取过程中按钮会变成"抓取中...",转好了就恢复。抓到的内容显示在下面的代码预览区。
代码高亮显示
源码用 HTML 语法高亮,标签、属性、文字各有各的颜色,背景是深色的,看起来像专业的代码编辑器。左边还有行号,方便对着看。
源码统计
中间一排小字显示抓到的源码有几个数据:
总大小:源码占多少 KB,超过 1MB 会显示成 MB
总字符数:一共有多少个字符
总行数:一共有多少行
HTML 标签数:一共有多少个 HTML 标签
这样一眼就能知道这个页面大概多复杂。
一键格式化
抓来的源码经常是挤在一起的,一层套一层不好看。点"格式化代码",工具会按 HTML 的层级重新缩进,每个标签各占一行,缩进用两个空格,读起来清楚多了。格式化之后统计数字也会跟着更新。
复制源码
点"复制源码",整个源码就复制到剪贴板,可以粘到编辑器里慢慢研究或保存下来。
清空
点"清空",网址和源码都清掉,重新开始。
手机也能用
手机上按钮变宽变高,手指点着方便。代码区高度会调整,不会占满整个屏幕。
适合谁用
做网页开发的人,想参考别人页面的结构、看某个效果是怎么实现的,抓下来研究最直接;学 HTML、CSS 的人,看真实页面的源码比看教程更直观;做数据抓取、分析页面结构的人,可以先看看页面长什么样再定抓取规则;排查页面问题的人,也能拿它对比线上和本地代码的差别。
用起来什么感觉
界面分三块:上面填网址,中间是操作按钮和统计,下面是代码预览。整体操作就一个流程——填网址、点获取、看源码,剩下的格式化、复制都是顺手的事。代码区是深色主题,颜色区分清楚,行号在左边,长代码可以滚动看。抓取走的是服务器中转,所以不受浏览器跨域限制,一般的网页都能抓。手机上是单列排布,按钮大。不需要安装,打开网页就能使,用完关掉就行。