无形中提高你工作效率的Chrome插件“实用”
作者：考拉
发送连接：
https://mp.weixin.qq.com/s/Kj6UIdEEr8M7S3rNHXEACg
开发相关扩展插件
1.WEB前端助手（FeHelper）
FeHelper简直就是前端开发者的神器。是国人开发的一个前端工具小插件。该插件功能齐全，基本涵盖了前端从业者经常使用的基本功能。它也非常容易使用。下面我们就来体验一下强大的功能：
FE支持按需安装，即只要需要就可以安装以上功能。以下是我在工作中使用的两个：
json格式
页面颜色选择
我们在开发的时候需要选择一些内容的颜色。很多朋友打开chrome调试器，然后使用颜色选择器来选择颜色。使用FeHelper的颜色选择器更方便
JS正则表达式验证
它不仅可以生成常用的正则表达式，还可以验证表达式是否匹配，在正则调试过程中可以起到很好的辅助作用。
一些前端开发常用的功能都有，方便实用；还有其他有用的功能，大家可以慢慢发现，这里就不一一赘述了。
2.vue-开发工具
vue-devtools是一个基于Chrome浏览器的插件，用于调试Vue应用程序。它被称为“Vue调试魔法”。Vue是数据驱动的。使用这个插件，可以看到Vue中各个组件的数据和数据。道具、计算机等各种属性和方法为我们的项目开发和调试提供了很多便利。
3.React开发者工具
如果你使用React进行开发，那么必不可少的就是Facebook出品的ReactDeveloperTools，当你还使用ReactDeveloperTools进行调试时，你可以查看应用程序的React组件层次结构，而不是更晦涩的浏览器DOM表示。
4.邮递员
Postman插件可以复用浏览器cookie，使测试更加方便。无论你是做后端开发还是客户端开发，Postman都是测试HTTP接口的必备工具，并支持集成测试；它还可以批量分组和运行测试请求。
5.十月
在GitHub侧边栏上显示代码树。非常适合查看项目源码。无需将代码库克隆到编辑器中，就像在编辑器中一样，可以直接搜索并跳转到文件。
6.Lighthouse前端性能优化测试工具
在前端开发中，自己开发的应用程序或者网页的性能一直是前端开发者非常关心的话题。我们需要专业的网站测试工具来让我们知道我们的网页哪些方面还需要进一步优化。我使用了一个工具：灯塔。感觉很好。我把它记录下来并分享给其他可能有需要的人。伙伴。
Lighthouse插件会在网页上记录每个测试项的结果，并提供优化建议报告。是一款非常实用的可视化网站优化工具。
7.清除缓存
单击按钮即可清除缓存和浏览数据。使用此扩展可以快速清理缓存，没有任何确认对话框、弹出窗口或其他烦恼。点击图标可以查看缓存、cookies等。删除，开发必备！ClearCache可以根据要清除的数据进行定制，包括应用程序缓存、cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和WebSQL等。
8.维米姆
Vimium继承了Vim中的常用按键位置，因此当您使用Chrome时，无论是浏览网页、切换标签页还是任何其他操作，只需通过键盘即可完成。想象一下，您不再需要移动鼠标来打开链接，手指不必离开键盘，一切都是那么顺利。
9.保存所有资源
当我们在网页上看到炫酷的动画效果时，一个自然的想法就是F12然后下载资源。然而，在Chrome开发者工具中，Source是为了找到当前页面使用的资源，我们希望直接一键下载所有的网页资源，并且目录结构可以保持。
一键下载网页资源（SaveAllResources）可以完美满足我们的需求
10.瓦帕利泽
这显示您正在访问的网页是使用哪种技术堆栈构建的。准确率相当不错，可以轻松分析其他网站。
日常的高频使用（非开发）
1.谷歌上网助手GHelper
很多时候，用户想要浏览一些国外的网站查资料，但是国内的网络环境很难通过，所以我们有各种上网助手、上网助手等。给大家介绍一下。今天给大家带来的是谷歌上网助手的另一个版本——开发版（Ghelper）。免费使用，拥有12万海量用户，简单、清晰、好用！
2.相似网
对于网站开发者来说，除了网站本身的代码设计和开发之外，网站的各种用户访问数据和流量分析也是非常重要的工作。SimilarWeb是一款Chrome插件，可以帮助您统计网站流量来源和排名、查询网站参与度等网站信息。
3.广告终结者
AdvertisingTerminator是您唯一需要的基本广告过滤器扩展。广告终结者可以去除几乎所有在线广告样式，包括购物广告、浮动广告、视频广告、恶意弹窗、网络跟踪等。
4.无限新标签页
我最后想给大家的是Infinity，一个强大的新标签扩展！界面精美，每日壁纸品质高！有同步的笔记、待办事项等。同时，我喜欢它的网页图标。它提供了许多常用网站的图标。当您自定义书签时，它看起来很棒。唯一的缺点就是启动起来感觉有点慢。
5.新媒体管理器-账号管理、图文编辑
顾名思义，新媒体管理器的主要功能是管理您的新媒体帐户。目前支持以下平台：
它允许您同时管理多个平台上的帐户，或在一个平台上管理多个帐户。添加账号后，您可以通过新媒体管理器导入对应的账号。例如微信公众平台，可以添加多个账号并同时登录，每天只需扫描二维码登录一次，即可直接进入后台。
新媒体管理器的另一个非常有用的功能是收集素材。当您看到喜欢的素材时，点击收藏即可将其保存到您收藏的素材库中，并随时使用。
6.ExtensionManager扩展管理器
我已经为你提供了很多插件。为了方便管理和使用，我最后推荐一个ExtensionManager。您可以使用它来分组和管理已安装的插件。您还可以快速打开和关闭插件。您可以配置排序规则。根据您使用这些插件的频率对它们进行排序。
获取并安装
文章中提到的所有插件我都下载好了，关注公众号【程序员成长指南】并回答：plugins，就可以收到所有下载的安装包。
正常安装
首先在标签页输入【chrome://extensions/】导入chrome扩展
解压您从本站下载的插件并将其拖至扩展页面。
安装包时出现CRX-HEADER-INVALID无效问题的解决方法，请参考：安装Chrome插件时出现“CRX-HEADER-INVALID”的解决方法。安装后即可使用。
推荐Chrome实用相关文章
10个值得收藏的Chrome浏览器扩展
Chrome运行时性能瓶颈分析
30个快捷键、16个扩展和11个前端调试，提高Chrome使用效率
Chrome开发者工具的11个酷炫技巧[实践]
在ChromeDevTools中，如果你只知道console.log，它将被关闭。
ChromeDevtools高级调试指南（新）
【新消息】Chrome81正式发布！消除混合内容的最后一步
使用ChromeDevTools进行前端性能优化，进行页面性能分析
逐步了解7个隐藏的ChromeDevTools功能以提高您的工作效率
作者：考拉
发送连接：
https://mp.weixin.qq.com/s/Kj6UIdEEr8M7S3rNHXEACg
相关文章
