大家好,我是 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. 【NestJS系列】核心概念:Middleware中间件

    前言 用过express与koa的同学,对中间件这个概念应该非常熟悉了,中间件可以拿到Request.Response对象和next函数. 一般来讲中间件有以下作用: 执行任何代码 对请求与响应拦截并 ...

  2. mall :rabbit项目源码解析

    目录 一.mall开源项目 1.1 来源 1.2 项目转移 1.3 项目克隆 二.RabbitMQ 消息中间件 2.1 rabbit简介 2.2 分布式后端项目的使用流程 2.3 分布式后端项目的使用 ...

  3. selenium-wire兼容selenium和requests

    背景 在工作中UI自动化中可能会需要用到API来做一些数据准备或清理的事情,那UI操作是略低效的,但API操作相对高效. 而实战课就有这样一个案例,不过那个案例是UI操作和API分开的. 极少会遇到这 ...

  4. Oracle主键自增列

    SQL Server创建主键自增列我们可以使用"ID INT IDENTITY(1,1) NOT NULL PRIMARY KEY"一步到位创建,而Oracle创建主键自增列和SQ ...

  5. 看完这篇HTTP,跟面试官扯皮就没问题了(转)

    认识 HTTP 首先你听的最多的应该就是 HTTP 是一种 超文本传输协议(Hypertext Transfer Protocol),这你一定能说出来,但是这样还不够,假如你是大厂面试官,这不可能是他 ...

  6. 洛谷题解 | P1051 谁拿了最多奖学金

    ​目录 题目描述 输入格式 输出格式 输入输出样例 提示 题目思路 AC代码 题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1. 院士奖学金,每人 ...

  7. Tinyalsa PCM API 实现深度剖析

    高级 Linux 音频架构 (ALSA) 用于为 Linux 操作系统提供音频和 MIDI 功能.它可以高效地支持所有类型的音频接口,从消费者声卡到专业的多通道音频接口.它支持全模块化的音频驱动.它是 ...

  8. 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(9) -- 实现系统动态菜单的配置和权限分配

    在WPF应用端开发,它的界面类似于Winform端,因此我们也需要对系统的菜单进行动态配置,这样才能把系统的功能弹性发挥到极致,通过动态菜单的配置方式,我们可以很容易的为系统新增所需的功能,通过权限分 ...

  9. CSS之3D翻转效果

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  10. 最新 2023.2 版本 IDEA 永久破解教程,IDEA 破解补丁永久激活(亲测有效)

    最近 jetbrains 官方发布了 2023.2 版本的 IDEA,之前的激活方法并不支持这个新的版本. 下面是最新的激活教程,激活步骤和之前是类似的,只是换用了不同的补丁文件. 本教程支持 Jet ...