大家好,我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星

工欲善其事,必先利其器。Chrome 可能是前端开发中使用最多的浏览器。在日常开发中,下列几款 Chrome 扩展也许能让你的开发工作事半功倍

Vue.js devtools ⚙️

vue 官方专为 vue 应用开发的调试工具。

通过使用它,你可以快速查看组件的状态和属性,分析性能瓶颈,并进行性能优化。同时,它还提供了方便的 Vuex 状态管理和组件时间旅行功能。无论你是 Vue.js 初学者还是有经验的开发人员,Vue.js Devtools 都是一个值得掌握的工具。

React Developer Tools ⚙️

React Developer Tools 专为 React 应用程序开发者设计。它提供了一系列功能,帮助开发者更轻松地调试和优化 React 组件。

通过深入掌握 React Developer Tools,你可以更好地理解组件层次结构、跟踪组件状态和性能,调试 React Hooks,以及进行组件时间旅行等操作。无论你是初学者还是有经验的开发者,掌握 React Developer Tools 都将极大地提升你的 React 开发能力和效率。

Vimium

将 Vim 式的快捷键带入浏览器世界。

Vimium 为用户提供了类似 Vim 编辑器的键盘导航和操作方式,大大提升了浏览器操作的效率和速度。通过安装和使用 Vimium,你可以像在 Vim 中一样快速浏览网页、打开链接、搜索内容,甚至进行高级操作和自定义设置。不管你是 Vim 用户还是想要提高浏览器操作效率的用户,Vimium 都值得一试。

Resource Override

Resource Override 提供了实时修改,重定向和调试网页静态资源的能力。

前端开发者经常需要将线上资源重定向到本地,以此实现本地开发调试,这正是 Resource Override 的用武之地。

通过使用 Resource Override,我们可以定制和优化网页资源加载,满足个性化需求,或进行调试和优化。不论是开发者还是调试专家,Resource Override 都是一个不可或缺的工具,能够显著提升开发和调试效率。

GoFullPage - Full Page Screen Capture

简单快速生成网页全页截图的高效工具。

下面是我截的 github 首页长图:

我们经常需要生成网页的全页截图,以便进行展示、分享、文档编写或错误排查。GoFullPage 就是这样一款强大而高效的网页截图工具,能够快速生成高质量的网页全页截图。它提供了多种截图模式、定制化设置和高性能算法,帮助开发者、设计师和测试人员更轻松地进行网页截图工作。无论是展示、分享、文档编写还是错误排查,GoFullPage 都能为你提供便捷而优质的截图体验。

觉得不错可以 点个小星星 支持一下哦

推荐给前端开发的 5 款 Chrome 扩展 🚀的更多相关文章

  1. Web 开发人员必备的12款 Chrome 扩展程序

    之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...

  2. 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  3. 在半小时内从无到有开发并调试一款Chrome扩展(Chrome插件/谷歌浏览器插件)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_120 就在不久之前,我们目前这个毕业班的班长那日同学和我说,他正在公司开发Chrome扩展,看起来很高大上的技术,实际开发却非常简 ...

  4. 前端开发中的一些chrome插件推荐

    这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网 ...

  5. 【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)

    项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...

  6. 前端开发必备 40款优秀CSS代码编写工具推荐

    摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...

  7. [转]前端开发必备 40款优秀CSS代码编写工具推荐

    编写工具地址如下 英文地址:http://webtoolsdepot.com/40-css-tools-to-improve-your-productivity/ 中文地址:http://www.cs ...

  8. 十款 Chrome 扩展工具,提高前端编码效率

    1. 掘金 Chrome 插件 对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧.那么,开发者能够在哪里获取需要的技术内容呢?过去,你可能需要在 GitHub ...

  9. Chrome浏览器扩展开发系列之八:Chrome扩展的数据存储

    Google Chrome浏览器扩展可以使用如下任何一种存储机制: HTML5的localStorage API实现的本地存储(此处略) Google的chrome.storage.* API实现的浏 ...

  10. 开发人员必备的 Chrome 扩展

    Firebug:不用多介绍了吧 https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSni ...

随机推荐

  1. ATtiny88初体验(五):ADC

    ATtiny88初体验(五):ADC ADC模块介绍 ATtiny88单片机包含一个10bit分辨率的ADC模块,拥有8个通道,最大采样率15kSPS,转换时间14us.ATtiny88的ADC参考电 ...

  2. jQuery Ajax执行顺序问题

    代码如下: $(document).ready(function () { var res; $.ajax({ type: 'post', url: 'GridDemo.aspx/PlaceOrder ...

  3. sqoop1.4.7完全支持Hadoop3.x, Hive3.x Hbase2.x

    已经修改好 保存至云盘 自己下载 花了时间的,记得关注我... 链接:https://pan.xunlei.com/s/VNe6P6Tm1A9Q-RG5GByN08rdA1# 提取码:5nke 复制这 ...

  4. IOS 16 无法打开开发版或者企业版本APP解决方案 - 需要开启开发者模式

    在IOS 16系统上,打开开发版本APP,或者企业版本APP时,会看到如下的提示信息: 需要开启开发者模式, xxx 需要在开发者模式下运行. 启用开发者模式前, 此App不可用 这个时由于IOS 1 ...

  5. 有人说SaToken吃相难看,你怎么看。

    前言 今天摸鱼逛知乎,偶然看到了一个回答,8月份的,是关于SaToken的,一时好奇就点了进去. 好家伙,因为一个star的问题,提问的人抱怨了许多,我有些意外,就仔细看了下面的评论,想知道一部分人的 ...

  6. Convolutional neural network (CNN)–extreme learning machine (ELM)

    1. 介绍 论文:(2020)Neural networks for facial age estimation: a survey on recent advances. 地址: http://li ...

  7. 使用Eclipse生成CHM帮助文档(图解)

    使用Eclipse生成CHM帮助文档(图解) 博客分类: System Operate javadoc生成chm文档java生成api帮助文档api帮助文档生成工具 Eclipse JavaDoc和j ...

  8. 计算机三级网络技术备考复习资料zhuan

    计算机三级网络技术备考复习资料     第一章  计算机基础 分析:考试形式:选择题和填空题,6个的选择题和2个填空题共10分,都是基本概念 1.计算机的四特点:有信息处理的特性,有广泛适应的特性,有 ...

  9. 从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

    接上一节:从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改? 上一节其实我们也简单说了自定义页面模板,这一节更加详细一点说明,开始之前我们要知道在vitePress中, ...

  10. http协议与apache

    http协议与apache 1.httpd协议 两台主机通信需要socket文件  yum insatll -y nc  ​  [root@localhost ~]#nc -l 8000  #主机1 ...