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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章