Web开发过程中少不了和浏览器打交道,因此好用的扩展或浏览器应用往往必不可少,本文将介绍一些适合Web开发/Web设计的Chrome扩展,同时附带介绍一些提高工作效率的小工具。

值得一提的是,其实Chrome的开发者工具就已经实现了某些扩展的功能,只是为了进一步提升工作效率,我们往往偏向选择浏览器扩展。

JavaScript and CSS Code Beautifier

商店地址

一个可以快速美化JS和CSS代码的扩展,自动添加换行缩进、代码语法高亮,设置界面也很直观,有多种展示风格。虽然Chrome开发者工具已经自带类似的功能(https://developers.google.com/web/tools/chrome-devtools/javascript/reference#format),但对于懒人来说,这个扩展在某些简单的场合更好用。

另外,如果想要JSON文件的美化工具,可以试试JSON Viewer,不过貌似打开大文件的时候有问题,就不专门说明了。

Web Developer

商店地址

Chrome自带的开发者工具虽然强大,但直观性有待改善,Web Developer扩展就很好地弥补了这个缺点,将众多功能分类展示,可以方便地查看页面元素信息、集中查看所有CSS和JS并所见即得地修改(同样支持代码美化和语法高亮)、一键查看不同尺寸的响应式布局、以及检查CSS和HTML代码是否符合W3C标准等等。

例如,选择CSS类别中的“Edit CSS”,可以看到当前页面调用的所有CSS:

然后可以直接在里面修改,效果均所见即得,比如清空所有样式,只修改背景颜色为#2233:

依然是把Chrome开发者工具可以做的事情办得更好,总体是一个比较好用的扩展。

React Developer Tools

商店地址

Facebook自家出品的扩展,可直接在Chrome控制台中查看React组件及其继承关系、修改相关属性,支持鼠标直接点选元素。如果网站使用了React的话,扩展图标会自动出现颜色。

Awesome Autocomplete for GitHub 以及 Octotree

Awesome Autocomplete for GitHub商店地址

Octotree商店地址

因为这两个扩展都是改进GitHub浏览体验的,所以就放在一起介绍了。

Awesome Autocomplete for GitHub为页面顶端的项目入口提供了关键字自动完成功能,优先提示热门项目和高活跃度用户;Octotree则是为项目页面添加了类似IDE的侧边文件树功能,支持私有Repo和Github Business。

与Octotree类似的还有Insight.io for Github,功能要更强大一些,主要是在文件树的基础上支持跳转到定义、交叉引用、查找引用、支持类和方法的搜索,不过需要授权Insight.io访问,私有Repo也要导入到上面才能实现上述功能,自行取舍吧。

PHP Console

商店地址

比较经典的一款扩展,允许开发者将PHP debug信息输出到Chrome控制台中,并且还支持远程执行PHP代码。使用之前除安装此扩展之外,还需要在PHP项目中引用PHP Console库,具体可以参考扩展使用帮助。

Postman

商店地址

开发和调试REST API的必备工具,不解释。可用于创建和发送任何HTTP请求,支持不同的认证机制(Basic Auth、Digest Auth、OAuth 1.0、OAuth 2.0),现在Postman的教程也很多,就不在这里展开说明了(注意安装完成后需要在Chrome应用中打开,Postman不属于浏览器扩展)。下图展示了向GitHub的API发送HTTP GET请求来简单获取用户的基本信息:

Builtwith和Wappalyzer

Builtwith商店地址

Wappalyzer商店地址

均用来分析网站使用了哪些技术,包括前端后端框架、服务器环境、插件、CDN等等,两个插件的分析结果有所不同,可以相互参考。不过现在有些网站对这类插件做了一定的防探测处理,可能效果不佳。

ColorZilla

商店地址

好用的取色器扩展,可以自动分析DOM元素,同时带一个在线CSS渐变生成器,简单明了。

Yet Another Lorem Ipsum Generator

商店地址

快速生成模拟文本,自动复制到剪贴板。

如果是要在HTML代码中快速填充,可以用VSCode的Emmet插件、使用loremN(N为单词数,可不填)实现。

最后介绍两个比较有意思的非开发类Chrome扩展/应用。

Marmoset

商店地址

快速创建风格化代码截图,设计网站UI的时候可以用到:

Momentum

商店地址

效率管理工具,将Chrome首页替换为一个Dashboard,显示天气、当前时间、当前工作目标和To-Do List,每天更换的高清背景图片非常漂亮,Pro版还提供更多自定义功能。