我常用的 10 个建站 Chrome 插件：从开发调试到 SEO 优化

点一下图标，直接告诉你当前网站用了什么 CMS、什么前端框架、什么统计工具、什么 CDN。做竞品分析时特别好用——看到某个站点加载飞快，先拿 Wappalyzer 扫一眼是不是用了 Cloudflare + Next.js，比自己猜靠谱多了。我一般在研究同类型站点时第一步就是点它，快速判断对方的技术水位。

和 Wappalyzer 功能重叠，但信息维度更细，会列出网站使用的全部第三方服务、广告平台、邮件营销工具等。缺点是免费版每天查询次数有限。我的用法是：Wappalyzer 做日常快速扫盲，BuiltWith 做深度调研时备用。

这是我用得最频繁的 SEO 插件。一键分析当前页面的标题、描述、H 标签结构、图片 alt 缺失、外链数量、内链数量，还能批量检查 SERP 预览。最实用的功能是批量检查死链：输入一个页面 URL，它能自动爬取该页面下的所有链接并标出 404。上线前跑一遍，基本能消灭大部分链接问题。

比 SEO Minion 更轻量，打开页面后自动在右侧弹出信息面板，显示标题长度、描述长度、Canonical 标签、Open Graph 标签、Schema.org 结构化数据等。我主要用它做快速巡检——改完代码刷新页面，扫一眼右侧面板确认 meta 信息没出错。

Chrome 自带的性能审计工具，不需要额外安装，按 F12 打开 DevTools 就能找到。但我单独把它列出来，是因为很多人没养成定期跑 Lighthouse 的习惯。它能给出性能、可访问性、最佳实践、SEO 四项评分，并附带具体优化建议。我每次发布新页面前至少跑一遍，确保性能分不低于 90。

一个老牌但极其强大的插件，把前端调试常用的几十个小功能集中在一个工具栏里。我最高频用的是这几个：禁用 JavaScript（看纯静态渲染效果）、禁用 CSS（检查语义化标签结构）、显示图片 alt 属性（快速排查 SEO 遗漏）、查看响应式布局断点。功能多但不杂，每个都很扎实。

调试 API 接口时，如果后端返回的是裸 JSON，Chrome 默认的展示方式很难阅读。这个插件能把 JSON 数据自动格式化、高亮、可折叠，还支持深色模式。配合 Workers 或后端接口调试时，能省掉很多复制到编辑器里格式化的步骤。

一键截取整个网页的长图，包括视口外的内容。我主要用在两个场景：一是做设计稿对比时，把线上页面截下来和稿图叠在一起看差异；二是写教程文章时，需要截取完整的页面效果做配图。截图质量很高，支持 PNG 和 PDF 导出。

网页版取色神器，鼠标悬停到页面任意位置，实时显示该像素的颜色值，支持 HEX、RGB、HSL 多种格式复制。做页面还原时，经常需要提取竞品或参考站点的配色，ColorZilla 比截图丢到 PS 里吸色快十倍。它还带一个页面配色分析功能，能自动提取当前站点的主色调板。

鼠标悬停到文字上，直接显示该文字使用的字体、字号、行高、字重。看到某个网站字体搭配很舒服，不用去审查元素里翻 CSS，点一下 WhatFont 就全出来了。我收集字体方案时全靠它，做设计参考效率极高。