Chrome开发者工具插件

简介:

一、皮肤插件


首先是大家期盼已久,翘首以盼的皮肤插件。这款插件叫DevTools Theme: Zero Dark Matrix.在商店中下载之,然后打开这个地址:chrome://flags,找到Enable Developer Tools experments (可以查找experments关键字迅速锁定之)勾选启用复选框。重启浏览器,打开开发者选项,点击小齿轮,可以看到Experments这选项,选择后在弹出面板中勾选 Allow custom UI themes,重启浏览,然后看到:


wKioL1Wsj42BxbT6AAEHhGKBAbo278.jpg

高达上的皮肤就是这样出来滴。据说还有许多方式可以更改,不过露珠目前就用的事这种方式。有兴趣的同学可以去试试看。


二、Performance-Analyser(网页性能分析)


这款插件是用来分析你的网页加载性能的,包括http请求,执行期的时间,以及每种http请求文件的大小,占比。首先下载之,随意打开一个界面,按下插件图标,可以看到分析页面:


wKioL1Wsj5vAhI4_AAF-E0VXccM795.jpg


你可以利用这款插件来分析你的界面资源加载的整体情况,并试着做一些优化和调整。


三、(FeHelper)WEB前端助手


这款插件包括了一系列功能,很丰富。是国人开发的,功能包括:json格式化,html格式化,二维码生成,编码规范检测等等不一而足。当你在浏览器中打开一个后台接口的时候,如果该接口返回的是json字符串,那么它会自动将其格式化。下面是它的一些功能列表,不具体一一示范:


wKiom1WsjcnR6Zt2AACnA1xZHs4063.jpg


四、POSTMAN


该插件是模拟发送请求的,后台和前台开发人员都可以用到。它是一个简化版的fiddler,功能虽然没有它强大,但是界面胜之,操作性也胜之,还有规范的API,更新也一直在继续。所以用之有木有:


wKiom1WsjdfxiItJAADyCMKm3u8198.jpg


五、Visual Event


网页事件监听,能帮你捕获到目前网页上的各个元素的事件监听状况。打开一个界面,按下扩展按钮:


wKiom1WsjeKwYPXzAADl_KBI8JY170.jpg


把鼠标放到有背景色的元素上去,可以看到它们的时间来源和绑定的函数。对于一些简单的事件检测还是蛮有用的。比较复杂的就没什么卵用了。


六、二维码扫描


这个功能对手机开发来说还是不错的。扫一扫就在浏览器中打开了。在FF浏览器中自带的功能,对于Chrome来说怎么可以木有呢?不过这功能太简单,太低档次,太多了(不过很有用)。就不上图了。


七、WhatFont


找到网页的字体。开启功能后把鼠标停留在文本上,会弹出该字体名称。所以你可以所以copy你喜欢的字体啦。


八、Speed Tracer


这个是一个强大版本的性能分析器,比Profiles还强大。可以跟踪事件,查看css样式,找到js中内存泄露,检测js语法。功能之强大,无出其右!Speed Tracer是一款很强大的网页性能分析工具,通过它你可以找到你的网页运行缓慢的原因。针对它们改善网站。不过因为它的功能强大,所以操作比较复杂。篇幅原因露珠不做介绍。感兴趣的同学可以自己去捉摸捉摸。下面是盗图一张:


wKiom1WsjgTA26_RAAJeoNbyr7w566.jpg










本文转自 小强测试帮 51CTO博客,原文链接:http://blog.51cto.com/xqtesting/1738129,如需转载请自行联系原作者
目录
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
69 0
使用vue快速开发一个带弹窗的Chrome插件
|
3月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
77 0
|
6月前
|
Web App开发 存储 前端开发
一键同步,无处不在的书签体验:探索多电脑Chrome书签同步插件
一键同步,无处不在的书签体验:探索多电脑Chrome书签同步插件
124 0
|
6月前
|
Web App开发 存储 缓存
(新)Chrome浏览器自定义背景插件
(新)Chrome浏览器自定义背景插件
107 0
|
7月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
64 1
|
7月前
|
Web App开发 JSON 编解码
【其他】Chrome 灵魂插件!爱了爱了!提高工作效率的神器!
【其他】Chrome 灵魂插件!爱了爱了!提高工作效率的神器!
86 0
【其他】Chrome 灵魂插件!爱了爱了!提高工作效率的神器!
|
4月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
161 0
|
4月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
27 0
|
7天前
|
Web App开发 搜索推荐 前端开发
【热门话题】Chrome 插件研发详解:从入门到实践
本文详细介绍了Chrome插件的开发,从基础概念到实战技巧。首先,解释了插件的结构,包括manifest.json、背景脚本、内容脚本和UI界面。接着,阐述了生命周期、通信机制以及开发步骤,包括创建项目结构、编写manifest.json、开发脚本和UI,以及测试与调试。通过一个显示当前页面URL的插件实例,展示了具体实现过程。最后,讲解了如何在Chrome Web Store发布和分发插件。Chrome插件开发为开发者提供了创造个性化体验的平台,本文旨在引导读者入门并深入实践。
18 2
|
4月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
159 0