Skip to content

Latest commit

 

History

History
155 lines (79 loc) · 7.21 KB

extensions-and-apps.md

File metadata and controls

155 lines (79 loc) · 7.21 KB

推荐给开发者的 Chrome extensions/apps

在文章开头,需要普及一下几个概念,那就是 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 扩展和应用。

Extensions(扩展)

对于开发者来说,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(应用)

在介绍开发者用的 Apps 之前,我想先介绍一款扩展:远方 New Tab,与大家熟悉的 Momentum 相似,但我觉得这款扩展更适合我,不仅因为新的 Tab 页面上保留了 Google 原来的搜索框,也添加了几个有用的菜单:History、Bookmarks 和 Apps。所以我平时打开 Chrome apps 的入口都在这个页面。可能有人觉得搜索框影响图片的展现,你还可以将搜索框设置成隐藏,当鼠标悬浮到相应位置时,搜索框也能自动出现。

介绍了这款能够快速打开 Chrome apps 的扩展后,我们来看看有哪些适合开发者使用的应用。

使用 Postman 可以模拟向服务器发起请求。

具有云储存、同时编辑等功能。

![](./res/Google Doc.jpg)

为代码创建酷炫的快照

如果你有其他好用的扩展或应用,希望不吝分享。