likes
comments
collection
share

前端必备！高效的 Chrome 插件推荐

作者站长头像
站长
· 阅读数 49

在前端开发中，Chrome 插件是不可或缺的工具，它们可以大大提高我们的工作效率和工作质量。这里为大家推荐20款最实用的前端开发必备的 Chrome 插件，希望能对大家的工作有所帮助。

  1. Web Developer

Web Developer 是一款功能全面的 Chrome 插件，它为开发人员提供了许多常用的工具，包括调试工具、CSS 编辑器、表单填充器等。同时，它还可以检查网站的 SEO、可访问性等方面，是一款非常实用的插件。

  1. React Developer Tools

React Developer Tools 是 Facebook 出品的一款 Chrome 插件，它提供了强大的调试和分析工具，可以为 React 开发人员提供开发效率和工作质量提升。

  1. Vue.js devtools

Vue.js devtools 是 Vue.js 官方出品的一款 Chrome 插件，它为 Vue.js 开发提供了类似 React Developer Tools 的调试和分析工具，开发人员可以在 DevTools 中查看组件树、props 和 data 数据、方法等信息，提高开发效率。

  1. Lighthouse

Lighthouse 是由 Google 开发的一款 Chrome 插件，它可以对网站进行性能、可访问性、PWA 等方面的检测，并提供详细的改进建议，开发人员可以通过 Lighthouse 来优化网站的性能和用户体验。

  1. ColorZilla

ColorZilla 是一款简单易用的 Chrome 插件，它可以帮助开发人员获取网页上的颜色信息，开发人员可以使用 ColorZilla 来快速获取颜色代码、调整颜色值等，提高开发效率。

  1. WhatFont

WhatFont 是一款非常实用的 Chrome 插件，它可以帮助开发人员快速识别网页上的字体，开发人员可以使用 WhatFont 来查看网页上使用的字体名称、字体大小、行高等信息，方便进行字体样式设计。

  1. Regular expression tester

Regular expression tester 是一款 Chrome 插件，它可以帮助开发人员快速测试正则表达式，开发人员可以使用 Regular expression tester 来检测正则表达式的正确性、效率等，提高开发效率。

  1. JSON Viewer

JSON Viewer 是一款简单易用的 Chrome 插件，它可以帮助开发人员查看和编辑 JSON 数据，开发人员可以使用 JSON Viewer 来格式化 JSON 数据、查看 JSON 数据的层次结构等，方便进行数据处理。

  1. CSS Peeper

CSS Peeper 是一款简单易用的 Chrome 插件，它可以帮助开发人员快速获取网页上使用的 CSS 样式信息，开发人员可以使用 CSS Peeper 来查看 CSS 样式的属性、值、选择器等信息，方便进行样式设计。

  1. EditThisCookie

EditThisCookie 是一款 Chrome 插件，它可以帮助开发人员管理网站的 cookie，开发人员可以使用 EditThisCookie 来查看、编辑、删除网站的 cookie，方便进行登录、测试等操作。

  1. PageSpeed Insights

PageSpeed Insights 是一款由 Google 开发的 Chrome 插件，它可以帮助开发人员分析网站的性能和速度，并提供详细的改进建议，开发人员可以使用 PageSpeed Insights 来优化网站的性能、加速网页加载。

  1. CSS-Shack

CSS-Shack 是一款设计 CSS 样式的工具，它可以帮助开发人员快速创建、编辑和调整 CSS 样式，同时还提供了丰富的图形界面和实用的工具，方便开发人员进行样式设计和修改。

  1. Octotree

Octotree 可以帮助开发人员在 GitHub 上查看代码仓库的目录结构和文件内容，方便进行代码管理和阅读。Octotree 通过侧边栏的形式展示代码目录，可以快速浏览代码文件，支持多种编程语言，非常适合 GitHub 开发人员使用。

  1. Clear Cache

Clear Cache 可以帮助开发人员清除浏览器的缓存，避免缓存导致的问题和错误。

  1. Browserstack Local

Browserstack Local 可以帮助开发人员在本地测试网站，方便进行本地开发和测试。

  1. Page Ruler Redux

Page Ruler Redux 可以帮助开发人员测量网页元素的尺寸和距离，方便进行页面布局和设计。

  1. GitZip

GitZip 可以帮助开发人员快速下载 GitHub 上的代码仓库，方便进行代码管理和复用。

  1. Webpage Screenshot

Webpage Screenshot 可以帮助开发人员快速截取网页截图，方便进行设计和布局的调整。

  1. CSS Scan

CSS Scan 可以帮助开发人员快速扫描网页上的 CSS 样式，开发人员可以使用 CSS Scan 来查看 CSS 样式的属性、值、选择器等信息，方便进行样式设计。

  1. Daily.dev

Daily.dev 可以帮助开发人员获取最新的开发资讯和技术文章，包括前端、后端、移动端等多个领域，方便了解最新的开发动态和趋势。

转载自:https://juejin.cn/post/7229618740727693370
评论
请登录