在文章开头,需要普及一下几个概念,那就是 Chrome 中的 extension、app 和 plugin,分别是扩展、应用和插件的意思,不能混为一谈。
- extension(扩展):在 Chrome 地址栏输入 chrome://extensions 打开。Chrome 扩展是指可以增加 Chrome 浏览器功能或性能的小程序。“扩展”经常会被大家说成是“插件”
- app(应用):Chrome 地址栏输入 chrome://apps 打开。利用网页技术实现与本地桌面程序一样的应用程序。不过除了 Chrome OS,Google 将不再为 Windows、Mac、Linux 提供 App 支持,并且建议我们利用 PWA 技术创建 Web app,或者改成写扩展,或者利用 Electron 或者 nw 创建本地应用
- plugin(插件):Chrome 地址栏输入 chrome://plugins 打开。这才是 Chrome 的“插件”,这是对浏览器本身功能的增强。比如 "Chrome PDF Viewer" 插件可以使得浏览器具有浏览 PDF 文件的能力
平时我们不用关心插件,我们经常用到的是“扩展”,并且偶尔也会使用到“应用”。所以今天主要就介绍几款 Chrome 扩展和应用。
对于开发者来说,Chrome 不仅自身厉害(可以参见[Chrome DevTools](../devtools/Chrome DevTools Overview.md)),而且背后还有强大的社区,今天就跟大家整理一下 Chrome 中那些针对开发者的扩展及应用。
当你查看 Github 文件时你有没有因为不停切换文件而感到烦躁?octotree 能够将一个 Repository 以文件树的形式展现。
将你的 JSON 数据更好地展现出来。
以可视化方式在线编辑页面样式。
查看页面任意一个元素的 CSS 样式。
以可视化的方式为页面选中的元素设置不同的字体。
检查页面中任意元素的字体。
在页面上画一把“尺子”,可以度量宽高、位置等信息。
将图片插入页面后可以在像素级上调整图片位置,对于像素控而言尤其有用。
![](./res/PerfectPixel by WellDoneCode.png)
编辑 cookie。
原理同将网址放入到 PageSpeed Insights 中,来测试网页的加载速度。这个插件可以一键为网页的加载速度打分,并且可以为你链接到 PageSpeed Insights。
测试响应式网页的利器。自认为比 Chrome DevTools 自带的 "Device Toolbar" 看得舒心。
![](./res/Responsive Web Design Tester.png)
切换浏览器的 User Agent。
![](./res/User-Agent Switcher for Chrome.png)
让你快速以可视化的方式提交 bug。
一键识别网页中用到了哪些软件,但并不是很全。
添加一个工具栏供开发者调试网页。
为开发者提供一个最佳实践的检查表。
![](./res/Web Developer Checklist.png)
可以修改页面中的所有图片或者页面截图。
![](./res/PicMonkey Extension.png)
React 开发者工具。
![](./res/React Developer Tools.jpg)
Vue 开发者工具。
![](./res/Vue.js devtools.png)
在介绍开发者用的 Apps 之前,我想先介绍一款扩展:远方 New Tab,与大家熟悉的 Momentum 相似,但我觉得这款扩展更适合我,不仅因为新的 Tab 页面上保留了 Google 原来的搜索框,也添加了几个有用的菜单:History、Bookmarks 和 Apps。所以我平时打开 Chrome apps 的入口都在这个页面。可能有人觉得搜索框影响图片的展现,你还可以将搜索框设置成隐藏,当鼠标悬浮到相应位置时,搜索框也能自动出现。
介绍了这款能够快速打开 Chrome apps 的扩展后,我们来看看有哪些适合开发者使用的应用。
使用 Postman 可以模拟向服务器发起请求。
具有云储存、同时编辑等功能。
![](./res/Google Doc.jpg)
为代码创建酷炫的快照
如果你有其他好用的扩展或应用,希望不吝分享。