前端开发中一些好用的chrome插件汇总

下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结:

红色是个人认为比较好用的,排名不分先后

1.AppJump管理应用的插件

安装了许多应用之后肯定是需要工具管理的。 AppJump能从工具栏下拉菜单上快速找到并启动应用程序和其他插件。AppJump的一个很酷的功能是能将应用程序和插件组织进入不同组。例如,可以轻松将个人插件同工作插件隔开,以进行更有效的时间管理。

但是管理全部插件会另开页面,这点不太方便。

2.Extensions Manager

同上面的功能一样也是管理各种应用和插件的

个人觉得这个更方便,不需要显示什么应用直接叉掉或者卸载,点击就通过下拉菜单显示所有插件列表,唯一不足APPJump的地方就是不能应用分组,界面没有它好看。这两个选一个用即可,我选择这个。

3.awesomescreenshot网页截图&录屏插件

4.检测网站使用框架的插件

4.1 library sniffer

4.2 pagexray

可以检测网站框架,而且还可以检测SEO

但是需要新开页面检测,本页提示较少而且是小窗显示在页面下方

4.3 wappalyzer

但有些网页无法检测

4.4 whatruns

使用过这么多后,发现这个是检测最全的

5.website analysis by pagelocity

网页分析工具

6.Code COLA可视化CSS编辑器

点击网页的一片区域,可视化修改当前样式,不需要开发人员一点一点的不停修改。不能再好用了!

7.MeasureIt!

页面尺子,随时亮出页面尺寸

8.Palette Creator

选择一个图片,右击选择该功能,可以取出图片所有颜色卡(FE直接可以页面取色)

9.Search by Image

查询图片源

10.Simple Material Design Palette

调色盘

页面调色盘

11.WhatFont

查看网页字体和字体大小(个人感觉并不好用)

12.Code Plunker

html、css、js代码立马测试

13.IE Tab

以IE内核显示页面,测试浏览器兼容性不需要再开很多页面了

14.Mobile/Responsive Web Design Tester

模拟各种不同手机分辨率下的页面,横屏竖屏都可以,方便兼容性和移动端测试

15.Resolution Test

页面在不同分辨率下的测试,同上面一些插件的用法

16.WebDeveloper

是另一个全面的开发者工具。它的开发者同时也开发很多受欢迎的Firefox插件。有了此插件,用户可以查看和编辑CSS、显示图片文件的大小和清除会话cookie。

17.DomainFlag

显示网站服务器等信息,生成页面二维码等

18.XML Tree

检查XML语法

19.PHP Console

检查PHP语法

20.COOKIE快速模拟

快速模拟cookie

21.JavaScript Errors Notifier

检查js错误

22.JSON-handle

JSON内容编辑和浏览和查错

23.前端开发助手

还能页面取色

24.Tampermonkey

浏览器扩展和最为流行的用户脚本管理器

25.Vue.js devtools

原文地址:https://www.cnblogs.com/Vayne-N/p/9026873.html

时间: 2024-07-30 15:22:53

前端开发中一些好用的chrome插件汇总的相关文章

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

【转载】一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

web前端开发中常用的尺寸和位置

我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG. 在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素.还有鼠标的位置.所以尺寸和位置主要分为三类: 屏幕尺寸和位置 元素尺寸和位置 特殊的元素,文档的尺寸和位置 鼠标的位置(

前端开发中通过js设置cookie的一组方法

我们在前端开发中,通常都需要获取并记录用户的某些操作设置,这样可以使用户下一次访问网站时不用进行重复的调整设置同一个功能. 此次文章中的方法是在前端开发工作中自己随手写的一组通过js设置与获取cookie的方法,能够应用在多说情况下,没做细挖与深究. js方法的完整代码如下: var cookie = { set:function(key,val,time){//设置cookie方法 var date=new Date(); //获取当前时间 var expiresDays=time; //将d

总结前端开发中的一些特殊规范

前端日子工作太忙没时间发随笔,现在来总结一些前端开发中的特殊规范(常规的规范就不赘述了),希望能让各位收益,也欢迎提出异议. 一. 文件系统 一个有条理的文件系统可以为后期的维护提供便利,起码寻找某个页面的某张图片时不用对着url地址顺藤摸瓜找半天,如果能做到不看url也能准确猜中某页面文件的所在地,那这个文件系统便是合格的. 先来看一个不合格的文件存放方式: 如上图,该目录下共有2个css文件夹.2个js文件夹以及3个存放图片的文件夹(“dyp2p”文件夹里也是放置图片的),同时还有许多人经常

前端开发中的Error以及异常捕获

本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提高代码健壮性是一项很重要的工作.本文将从Error开始,讲到如何捕获页面中的异常.文章较长,细节较多,请耐心观看. 前端开发中的Error JavaScript中的Error JavaScript中,Error是一个构造函数,通过它创建一个错误对象.当运行时错误产生时,Error的实例对象会被抛出.

五年干货分享!前端开发中最常用的JS代码片段

很多网友私信我,说学到js就开始卡壳了,甚至初略的看了一下js,就跳过开始学习框架之类的.这里要提醒你,js是前端的重中之重,如果你忽视了,后果不堪设想! 学好,并熟练的运用这门编程语言真的很难吗?本篇文章为大家总结了一些前端开发中最常用的JS代码片段,希望能对大家的学习以及工作上都能有所帮助,有所收获. HTML5 DOM 选择器 javascript 代码 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.i

关于前端开发中的“收口”思想

什么是收口 所谓条条大路通罗马,但如果让我来设计通向罗马的各种大路,我至少会做两件事情: ① 让罗马只有一个入口 ② 让罗马只有一个出口 这样做的好处是,无论你路从哪来,我可以统一在入口处给你打上各种标志,我也可以在你离开罗马时给你留点纪念.当然罗马自然不只一个出口入口,但是每个出口入口一定有一套相同的规定,否则就会出问题. 具体到当今的工作场景,高速公路又是一个收口的好例子,进入高速公路时候得经过收费站做点标志,离开时候也会做点操作,如果没有这种收口,不论是缴费工作,流量统计或者其他都是无法统