Chrome开发者工具插件

一、皮肤插件

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

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

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

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

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

三、(FeHelper)WEB前端助手

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

四、POSTMAN

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

五、Visual Event

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

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

六、二维码扫描

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

七、WhatFont

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

八、Speed Tracer

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

转载于:https://blog.51cto.com/xqtesting/1738129

Chrome开发者工具插件相关推荐

在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
程序员的你是否熟练掌握Chrome开发者工具？
写在前面再过几天就是1024程序员节日了,这里提前祝各位程序员同胞们节日快乐哈^_^ 回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发 ...
HTML开发者工具抓取所有图片,利用Chrome开发者工具功能进行网页整页截图的方法...
说起要截取整个网站页面,很多朋友第一时间想到的都是用哪款chrome扩展,确实,我们网站之前也有介绍过一些截图插件比如: 但其实现在不少浏览器都自带截屏功能了.尤其是像chrome如此强大的浏览器,比 ...
Chrome开发者工具关于网络请求的一个隐藏技能
这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...
chrome开发者工具功能拾遗：Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板面板上包含了Elements面板.Console面板.Sources面板. ...
请参阅：Chrome开发者工具中的悬停状态
我希望看到:hover我在Chrome中徘徊的锚点的:hover样式. 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态. 我似乎无法在Chrome中找到类似内容. 我错过了什么吗? ...
Chrome开发者工具中Elements(元素）断点的用途
2019独角兽企业重金招聘Python工程师标准>>> SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行J ...
用Chrome开发者工具调试一切
自Google发布Chrome浏览器以来,其附带的Chrome开发者工具就深受开发者们的喜爱,现在人们不仅仅用它来调试Web前端页面,还将它扩展用来调试移动应用和服务端应用.在错误报告平台Bugsna ...
使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...

Chrome开发者工具插件

Chrome开发者工具插件相关推荐

最新文章

热门文章