chrome 插件开发各种功能demo_对 Web 开发很有用的 10 个 Chrome 浏览器插件

注：译文
原文：https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

“Progress isn’t made by early risers. It’s made by lazy men trying to find easier ways to do something.” - Robert H. Heinlein1、CSSViewer这个工具在识别和显示元素的 CSS 属性方面非常有用。它有一个浮动窗口，你可以把鼠标悬停在页面上任一元素上来查看它所有的 CSS 属性。你也可以通过快捷键在 CSSViewer 的窗体中轻松复制选定元素的样式。当然我们的浏览器的开发者工具本身也是支持这样的功能的，那为什么还需要使用这个插件呢？这个插件比浏览器自带的开发者工具先进很多，除了显示元素的基本宽高之外，还有很多生效的样式和信息。2、Augury这是我最爱的一个扩展工具。Augury 是由 Rangle.io 构建的 DevTool 扩展，用于调试，分析和优化 Angular 项目。Augury 在 DevTools 中提供了丰富的 UI ， 对此你可以：查看组件的依赖注入 (DI)树图编辑和更改组件中的属性Emit 事件等等 …… 如果您是 Angular 开发人员，没有在 DevTools 中使用 Augury，那么这是一件很可惜的事。Augury 有着你直接从浏览器调试 Angular 应用程序所需的一切。值得你试试。3、React Developer Tools这是 React 团队开发的 DevTool。就像 Augury 一样，React Developer Tools 提供了一个丰富的 UI ，我们可以监视 React 组件中的事件流。你也可以检查 React 组件的属性和状态，随意更改属性和状态，并查看在组件树传递过程中的变化。我经常使用的一项非常酷的功能是突出显示重新渲染的组件。4、JSONView浏览器通常不擅长显示 JSON 数据，通常密集地以纯黑白的形式显示，在定位深层嵌套的属性时也很困难。而 JSONView 格式化了 JSON 数据，以彩色树状视图显示，让我们很容易就看出属性和值。5、Library Sniffer我通常很好奇想知道某个网页是用什么框架搭建的，以及它用到了什么库？LibrarySniffer 在这方面给了我挺大的帮助的。这个工具可以为我们提供网页上的详细信息，无论它是基于 React，Angular，Vue，Svelte，Wordpress 等框架或平台。6、Web Developer这是一套工具。Web Developer 的作用是将日常使用的工具栏添加到浏览器。这个工具栏有许多方便的工具，程序员和设计人员都可以在日常工作中使用到它们，这能很好的提高我们的效率。它的工具有：向元素添加轮廓，显示标尺，查找页面上所有损坏的图像，更改页面布局，处理图像等等。它将很多这些经常使用的功能添加到 DevTools 检查器中了。7、LambdaTest兼容浏览器一直都是 Web 开发人员很苦恼的事。Web 开发人员会经常想我们开发出来的网站在不同的浏览器上显示是怎样的？通常这种情况，我们会在电脑里安装不同的浏览器，这样就可以看到我们的网站在不同浏览器上的效果。使用 Lambdatest 就不会那么麻烦了 ，它可以允许你在 2000 多个浏览器和操作系统上实时执行自动化和实时交互的跨浏览器测试。它们支持屏幕截图测试、响应测试和智能 UI 测试，一键点击 bug 日志到 bug 跟踪工具。8、ColorPick EyedropperColorPick Eyedropper 有一个浮动面板，当你悬停在网页中的元素上方时，会显示元素的颜色。单击该元素会将所选元素的颜色复制到剪贴板。用这个插件就可以很快的发现、复制和粘贴颜色值。9、 CSSPeeperCSSPeeper 是一个检查和复制元素样式的工具。使用 CSSPeeper，只要将鼠标悬停在网页中的元素上，单击鼠标，就可复制元素的样式。10、WhatFont在浏览网页时，通常吸引我注意的是页面中使用的字体。当我想看他使用了什么字体的时候，我会下意识的打击鼠标右键，打开开发人员工具，查看源代码。但是经常这样操作就太费时，太繁琐了。而 WhatFont 这个插件帮助了我，它只要你把鼠标停在文本上，就能快速查看到使用的字体。