每个前端程序员都应该知道的10个Chrome扩展

Posted 2023-01-31 艾编程教育

开发人员一直在寻找使他们的生活更轻松、更高效的方法，因为我们都知道开发应用程序的过程并不像听起来那样结构化。您会遇到各种错误和障碍，可能需要几天时间才能克服。所以为了让这个过程更容易，每个开发人员都应该尝试各种 chrome 扩展：-

 

1、开发人员工具箱

下载地址：
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

此扩展是开发人员的工具箱。您可以禁用 JS、玩弄 cookie、在页面上突出显示各种 CSS 属性、在表单上启用自动完成以及突出显示网页的特定部分以解决问题。它可以帮助您的网站做出响应。

2、Requestly

下载地址：
https://chrome.google.com/webstore/detail/redirect-url-modify-heade/mdnleldcmiljblolnjhpnblkcekpdkpa

Requestly 是一个面向前端开发人员和 QA 的测试和调试工具。Requestly 允许开发人员修改标头、重定向 URL、切换主机、模拟 API 响应、延迟网络请求等等。

3、Wappalyzer

下载地址：
https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

Wappalyzer 旨在帮助您找到网页的底层技术。如果有您喜欢的着陆页，只需前往该页面，您就可以检查使用哪种 JS 或 CSS 框架来构建它。

4、浏览器栈

下载地址：
https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb

BrowserStack 让您可以从任何浏览器和设备、桌面或移动设备实时测试您的网站。

5、Web 开发人员清单

下载地址：
https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp?hl=en

Web Developer Checklist 是 Web 设计人员和开发人员的绝佳工具。此 Chrome 扩展程序分析您的网站是否违反了最佳做法，并帮助您确定问题区域。

6、Amino：CSS 编辑器

下载地址：
https://chrome.google.com/webstore/detail/amino-css-live-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf

Amino 允许您像任何其他编辑器一样编辑页面的 CSS。这与在 DevTools 选项卡中进行编辑不同，因为每次打开页面时都会保存和应用样式表。

7、幽灵

下载地址：
https://chrome.google.com/webstore/detail/ghostery-–-privacy-ad-blo/mlomiejdfkolichcflejclcbmpeaniij?hl=en

此扩展旨在让您的网络浏览尽可能私密。您可以决定网站是否可以访问您的个人信息、提供反跟踪以删除数据点、智能浏览以防止跟踪器干扰网站性能等等。

8、八叉树

下载地址：
https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc

OctoTree 通过类似 IDE 的代码树、存储库和问题的书签等增强 GitHub。此扩展允许您在一个小的侧面板中查看 GitHub 存储库文件结构的概览，从而节省您的时间并帮助您更有效地工作。它还提供拉取请求审查、存储库搜索和书签等功能。

9.灯塔

下载地址：
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en

Lighthouse Chrome 扩展程序在您的页面上运行测试并生成完整的性能配置文件。一种快速审核站点并一目了然地了解需要改进的地方的简便方法。

10、React 开发者工具

下载地址：
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

React 开发人员工具旨在帮助您调试 React 应用程序。如果安装了扩展并且您的网站使用 React，则扩展将突出显示并且开发人员工具将显示组件和分析器选项卡。Components 选项卡显示应用程序树结构，Profiler 选项卡允许您记录性能。

如果对你有帮助，记得点赞支持哦！如果你才开始学习前端！我们这边有一套免费的三十天挑战计划的课程体系，包含了html+css+云端部署的课程体系，可以通过钉钉群里学习，有问题在群里可以提问，同时每节课还安排有作业，配套有阶段项目练习和综合项目实战，目的是帮助大家夯实前端基础，轻松入门到前端行业（可以给我发消息，邀请你进入学习！）

 

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自今日头条！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程