前端开发者的 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),而且背后还有强大的社区,今天就跟大家整理一下 Chrome 中那些针对开发者的扩展及应用。

octotree

当你查看 Github 文件时你有没有因为不停切换文件而感到烦躁?octotree 能够将一个 Repository 以文件树的形式展现。

《前端开发者的 Chrome extensions/apps》

JSONView

将你的 JSON 数据更好地展现出来。

《前端开发者的 Chrome extensions/apps》

Code Cola

以可视化方式在线编辑页面样式。

《前端开发者的 Chrome extensions/apps》

CSSViewer

查看页面任意一个元素的 CSS 样式。

《前端开发者的 Chrome extensions/apps》

Font Playground

以可视化的方式为页面选中的元素设置不同的字体。

《前端开发者的 Chrome extensions/apps》

WhatFont

检查页面中任意元素的字体。

《前端开发者的 Chrome extensions/apps》

Page Ruler

在页面上画一把“尺子”,可以度量宽高、位置等信息。

《前端开发者的 Chrome extensions/apps》

PerfectPixel by WellDoneCode

将图片插入页面后可以在像素级上调整图片位置,对于像素控而言尤其有用。

《前端开发者的 Chrome extensions/apps》

Google PageSpeed Insights Extension

原理同将网址放入到 PageSpeed Insights 中,来测试网页的加载速度。这个插件可以一键为网页的加载速度打分,并且可以为你链接到 PageSpeed Insights

《前端开发者的 Chrome extensions/apps》

Responsive Web Design Tester

测试响应式网页的利器。自认为比 Chrome DevTools 自带的 “Device Toolbar” 看得舒心。

《前端开发者的 Chrome extensions/apps》

User-Agent Switcher for Chrome

切换浏览器的 User Agent。

《前端开发者的 Chrome extensions/apps》

Usersnap – visual feedback & bug reports

让你快速以可视化的方式提交 bug。

《前端开发者的 Chrome extensions/apps》

Wappalyzer

一键识别网页中用到了哪些软件,但并不是很全。

《前端开发者的 Chrome extensions/apps》

Web Developer

添加一个工具栏供开发者调试网页。

《前端开发者的 Chrome extensions/apps》

Web Developer Checklist

为开发者提供一个最佳实践的检查表。

《前端开发者的 Chrome extensions/apps》

PicMonkey Extension

可以修改页面中的所有图片或者页面截图。

《前端开发者的 Chrome extensions/apps》

Apps(应用)

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

《前端开发者的 Chrome extensions/apps》

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

Postman

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

《前端开发者的 Chrome extensions/apps》

Google 文档

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

《前端开发者的 Chrome extensions/apps》

Marmoset

为代码创建酷炫的快照

《前端开发者的 Chrome extensions/apps》

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

    原文作者:CompileYouth
    原文地址: https://segmentfault.com/a/1190000008127810
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞