前端或开发人员一定要会，谷歌浏览器20个扩展程序

Posted 2023-04-16

参考技术A 相信我谷歌浏览器是浏览器里绝对最好的，想用好浏览器一定要知道这20个有用的扩展程序。

CSS Viewer是一个简单但非常有效的 Web 开发者 Chrome 扩展。顾名思义，无论您将鼠标悬停在何处，此插件都会向您显示给定页面的 CSS 属性。将出现一个小的弹出窗口，向您显示构成您指向的元素的 CSS 数据。

无论您是想创建简单的 WordPress 主题还是现代和复杂的主题，这都是一个非常智能的扩展，可以在您将鼠标指向的任何地方轻松识别关键 CSS 属性。

WhatFont 对于需要识别网页上使用的字体的开发人员来说是一个非常有用的 Chrome 扩展程序。它快速、有效，并且可以在几秒钟内识别页面中的单个字体。它还标识了家庭、大小、重量和颜色。所有这些都在浏览器的一个小弹出窗口中。

Fonts Ninja以与 WhatFont 类似的方式来识别网页中的字体。如果 WhatFont 出于任何原因不适合您，这是一个有用的选择。它的工作原理几乎相同，但界面更小。否则，这两个扩展的外观和感觉非常相似。

安装扩展程序，您应该会在工具栏中看到一个小的绿色忍者图标。在 Chrome 中打开网页，选择图标，然后将鼠标悬停在您要识别的字体上。您应该会在突出显示的字体上看到一个页面概览弹出窗口和一个单独的弹出窗口。简单但非常有效。

Page Ruler Redux 是一个 chrome 扩展，可让您查看网页上任何元素的宽度、高度和位置。 这对于优化您的网站以获得更好的可读性非常有帮助。此外，Page Ruler Redux 提供了键盘快捷键，可以轻松浏览您的网页。

CSS Peeper允许您检查网站上使用的整个调色板。您可以以视觉上吸引人的方式查看所有这些列表，以便您找到它们。

CSS Peeper是为设计师量身定制的 CSS 查看器。使用 Chrome 扩展程序访问有用的样式。使命是让设计师专注于设计，并尽可能少地花时间挖掘代码。

Window Resizer对于 Web 开发人员来说是一个非常有用的 Chrome 扩展。它简单但非常有效，尤其是在使用响应式设计或应用程序时。它会安装到 Chrome 中，并将您正在使用的任何屏幕调整为一系列流行的屏幕尺寸。Window Resizer 等扩展有助于开发在桌面和移动设备上看起来很棒的响应式网页设计。

涵盖了最常见的尺寸、移动设备、平板电脑、台式机，并且仿真似乎非常准确。这里的人经常使用 Window Resizer 并对其评价很高。这对我们来说已经足够了！

BrowserStack是另一个对 Web 开发人员非常有用的 Chrome 扩展。与 Window Resizer 一样，此扩展程序允许您测试您的工作的响应能力。此扩展程序允许您使用不同的浏览器进行测试，而不是不同的屏幕尺寸。

安装扩展程序，在 Chrome 中打开您的页面，选择 BrowserStack 并从选项卡中选择一个设备选项。然后将使用该设备上的浏览器仿真来呈现该页面。简单但非常有效。不过，您确实需要一个 BrowserStack 帐户才能使其正常工作。

此扩展程序可帮助您以像素完美的准确性开发您的网站！

PerfectPixel允许开发人员和标记设计人员在已开发的 html 顶部放置一个半透明的图像叠加层，并在它们之间进行像素完美的比较。

如果您在 GitHub 上花费大量时间寻找新项目，Githunt非常有用。这个 Chrome 开发者扩展不依赖于 GitHub 的趋势项目提要，而是通过在浏览器的新选项卡区域中突出显示所有趋势项目，从而将其脱颖而出。

您可以搜索不同语言的项目，并阅读简短的项目描述和当前打开的问题数量。然后，您只需在选项卡中选择项目即可转到该项目并进一步检查它。如果您喜欢为新项目做出贡献，这是一个非常有用的小扩展。

Wappalyzer是一个非常有效的工具，用于识别网页背后的底层技术。它可以快速识别 Web 服务、CMS 类型、分析工具、插件、javascript 库和大量其他应用程序。如果您想知道页面背后的秘密，这是找出答案的一种方法。

只需安装扩展程序，在页面上选择它，就会出现一个弹出窗口，突出显示该页面上运行的所有可识别应用程序。

分析任何网页是否违反最佳实践。此扩展可帮助 Web 开发人员轻松发现网站中的问题区域。

生成调色板的免费浏览器扩展。设计师和前端开发人员必备的工具。抓取任何网站的颜色。

GoFullPage 是一个浏览器扩展程序，可以截取您在浏览器中查看的整个网页的屏幕截图。当您单击扩展程序图标时，扩展程序会向下滚动，并且在当前页面上，您正在浏览器中查看，将每个滚动窗口组合成一个显示在新选项卡中的图像。

Check My Links是一个链接检查器，它可以抓取您的网页并查找损坏的链接。它是主要为网页设计师、开发人员和内容编辑器开发的扩展。

当您编辑一个包含大量链接的网页时，能够快速检查页面上的所有链接是否正常工作不是很方便吗？这就是“检查我的链接”的用武之地。

该扩展程序可以快速找到网页上的所有链接并为您检查每个链接。它突出显示哪些是有效的，哪些是坏的，就这么简单。

您可以一键将所有坏链接复制到剪贴板！

Lorem Ipsum Generator是最好的 Chrome 扩展之一。它的功能正如其名称所暗示的那样。它为演示网站生成填充文本并且做得很好。

只需安装扩展程序，在页面中选择它，告诉它您要生成多少 Lorem Ipsum 副本，然后从窗口中复制它。将其粘贴到您的页面中，您就完成了。

Corporate Ipsum是 Lorem Ipsum Generator 的流行替代品。如果您的客户对占位符文本更加挑剔，或者您想增加商业网站的感觉，那么这就是您来的地方。这个 Chrome 开发者扩展会生成 lorem ipsum，但带有企业风格。

它也很像 Lorem Ipsum 生成器。安装扩展程序，打开您的页面，选择图标并告诉它要生成多少副本。复制并将其分页到位并移动到下一个。这是一种生成更多面向业务的占位符文本的快速、简单的方法。

React Developer Tools专门用于开源 React JavaScript 库。如果您使用 React，此扩展可帮助您根据需要检查库。

安装扩展程序，您应该会在 Chrome 工具栏中看到两个图标。一个用于组件，另一个用于 Profiler。组件向您显示 React 在页面上使用的内容，而 Profiler 向您显示性能数据。如果您使用 React，这是必不可少的工具！

EditThisCookie是一个对开发人员非常有用的 Chrome 扩展。它使您能够按页面编辑、删除、创建和保护 cookie。它还允许您将它们导出以进行分析、阻止它们、将它们导入 JSON，并且通常可以对 cookie 执行尽可能多的操作。

最有用的工具是搜索和读取 cookie 的能力。开发人员会发现大多数工具在某一时刻很有用。

UX Check是一个可用性分析器，它使用 Nielsen 的 10 个启发式方法来评估页面。它可以快速突出潜在的可用性问题，并使您能够添加注释、截屏并导出准备在团队中共享的发现。

UX Check 是一种非常有效的方式来执行轻量级用户测试，而不需要过多的细节。在交付项目进行全面测试之前作为第一次通过测试的理想选择。

Checkbot 它检查页面的链接、错误、安全性、性能、搜索引擎优化和一系列其他注意事项。这是一个非常有用的工具，可以添加到您的曲目中，并且对于发布前的最后一遍非常有用。

这20个扩展工具前端开发人员很有用，也有一些专门适用于狭窄领域的工具。可以让您的工作更轻松。无论是通过提高生产力、解决问题还是简化流程，这里都有工具可以完成所有这些事情，甚至更多。

收藏！前端开发人员必备的11个在线工具

点击菜单栏“粉丝福利”

拿小度，兑手机！

作为前端开发人员，互联网有很多令人惊叹的工具，这些工具为我们的生活提供了极大的便利。

 

本文将快速回顾开发工作中经常使用的 11 个工具。

 

大家和小芯一起来看看吧~

 

1. Minify

 

为减小应用代码的包大小空间，可以对其进行压缩。压缩能清除空白格,无效代码等，让应用程序的包大小大幅减小，从而加快浏览器的加载时间。

 

这个在线工具minify.com能够对网站代码进行压缩。

 

2.Unminify

 

这个工具与Minify的作用恰恰相反。

 

Unminify通过解压、去模糊化和美观化代码，能够再次读出一段压缩过的代码。

 

3. BundlePhobia

 

你是否曾经不确定node_modules的空间大小，或只想知道pakckage.json 在电脑中占存多少？BundlPhobia能为你解答。

 

此工具可以上传一个packa.json 文件，同时显示从package.json 中植入的附属项的大小。

 

4. Stackblitz

 

这是最受欢迎的工具。Stackblitz提供了世界范围内最普及和使用频率最高的IDE 程序和网页上的 VisualStudioCode。

 

只需单击一下，Stackblitz 便能快速架构起Angular,React,Vue,Vanilla,RxJS,TypeScript等项目。

 

想要尝试编写新代码，或浏览器 中JS当前的任何框架特征，Stackblitz对你来说都大有裨益。想象你正在阅读 Angular 的一篇文章，遇到了想要尝试的代码，就将浏览器最小化，用几个 LOC 构建新的 Angular 项目。

 

操作简单便捷。

 

还有很多好用的在线IDE，但我相信Stackblitz有其独特之处。Visual Studio Code这款工具大家都擅长使用，也都喜欢使用，Stackblitz正是抓住了这点。

 

来源：Pexels

5. Babel REPL

 

Babel是一个免费的开源 JS 编译器，用于将现代 ES 代码隐藏到普通旧版本的 ES5 JavaScript 中。

 

此工具由 Babeljs 团队开发，是一款在线 Web 应用程序，它可以将 ES6+ 代码转码到 ES5。

 

我们可以用它来测试ES 的近期更新和ECMA在某些阶段添加的新功能。IT 能美化代码、限制文件大小，并让人在转换期间享受时空之旅。

 

6. Bit.dev

 

Bit.dev是个很好的组件中心。笔者用它进行组装、记录和管理不同项目中的可重用构件，能提高代码的重复利用度、加快开发进程并优化团队协作。

 

对于重新构建设计系统，它也是不错的替代品（因为它基本上满足设计系统所需）。Bit.dev和Bit与完美协作，Bit是一个开源工具，用于分离并发布组件。

 

Bit.dev支持React,React withTypeScript,Angular,Vue等组件

 

示例：在 Bit.dev 中搜索共享的 React 组件

 

7. Prettier Playground

 

Prettier是款稳定的JS代码格式器。通过它来解析、再编辑代码，代码格式可以保持不变，实现最佳JS编码实践。

 

此工具在开发工作中受到广泛使用，不仅如此它也提供了一个美化代码的在线平台。

 

来源：Pexels

8. JWT.io

 

如果你正在使用 JSON Web Tokens（JWT） 保护应用程序，或使用 JWT 让用户访问后端上的受保护资源。

 

决定是否应访问路由或资源的一种方法是检查令牌的过期时间。有时会需要解码 JWT 来查看其有效负载，jwt.io恰好提供这项服务。

 

此在线工具让人能够得到查看有效负载的权限。粘贴标记后，jwt.io解码令牌，并显示其有效负载。

 

9. Postman

 

此工具有助于快速测试 API端点：GET,POST,DELETE,OPTIONS,PUT.

 

笔者用过此工具，它值得排在第10位。

 

10. CanlUse

 

对于Web API（网络应用程序接口） 在某个浏览器中能否兼容是否曾有疑惑，或在手机浏览器中是否可用？这个在线工具能帮助你轻松测试 Web API 浏览器的兼容性。

 

假设你想了解哪些浏览器及其版本支持 Web ShareAPI：

navigator.share（...）

可以看到，所有支持navigator.share（...）的浏览器及其版本都罗列出来了。

 

11. JSLint

 

在使用JSLint的人看来，JSLint在他们心中排第一。JSLint 的在线版本能够对浏览器中的一段 JS 代码或 JS 文件进行编译。

 

结论

 

当然还有很多好用的工具未被列出来，这部分欢迎机智的大家在留言区补充哟~