大家好,我是 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. Kafka-基础

    1. 简介 Kafka(Apache Kafka) 是一种分布式流数据平台,最初由LinkedIn开发,并于后来捐赠给Apache软件基金会,成为了一个Apache顶级项目.它被设计用于处理大规模.实 ...

  2. 修复linux系统更新后Conky无法启动的问题

    kali系统更新后的版本为 ~$uname -a Linux 4rk 5.9.0-kali5-amd64 #1 SMP Debian 5.9.15-1kali1 (2020-12-18) x86_64 ...

  3. [htmlayout] csss! 改变值/文本

    <input type="text" value="123" /> <div class="test">内容内容&l ...

  4. 谈谈JSF业务线程池的大小配置

    1.简介 JSF业务线程池使用JDK的线程池技术,缺省情况下采用Cached模式(核心线程数20,最大线程数200).此外,还提供了Fixed固定线程大小的模式,两种模式均可设置请求队列大小. 本文旨 ...

  5. OGG-Postgres实时同步到Kafka

    (一)数据同步信息 名称 源端 名称 目标端 数据库类型 Postgresql 12.4 组件类型 Kafka IP地址 20.2.127.23 Broker地址 20.2.125.52:9092, ...

  6. KRPano JS 场景编辑器源码

    KRPano JS编辑器,可以运行在Node环境中. 源码地址:https://github.com/xxweimei/krpano-editor-js 或者下载zip包:http://pan.bai ...

  7. LeetCode 周赛上分之旅 #46 经典二分答案与质因数分解

    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...

  8. 爬虫系列——requests

    文章目录 一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,reques ...

  9. Python开发之Django框架

    一. Django框架 01.网络软件开发架构演变过程 02.HTTP协议讲解 03.web应用与框架介绍及手撸web框架 04.Django入门项目创建与必会三板斧 05.Django静态文件配置与 ...

  10. android开发阶段性技能

    一.初级 1. 拥有娴熟的Java基础,理解设计模式,比如OOP语言的工厂模式要懂得. 2. 掌握Android UI控件.Android Java层API相关使用. 迈向中级,最好再次更新下Java ...