Chrome开发者工具不完全指南,谷歌(Google)Chrome浏览器开发者工具教程

Chrome开发者工具不完全指南(一、基础效率篇)

2015/06/23 · HTML5 · 2
评论 ·
Chrome

原文出处:
卖烧烤夫斯基   

即便你不是一名前端开发工程师,相信您也不会对Chrome浏览器感到陌生。依据新型的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的孤岛。不难、飞快使它变成了新时代大千世界的新宠。如若你是一名web开发人员,我引进您采纳Chrome。作为前端开发的”IDE”,你只须要搭配一个编辑器就能不辱任务几乎所有的支出义务了。关于它的使用和成效分析要么都是大而不全,要么是细细的糜烦。本系会相比详细地分享卤煮的有的Chrome(F12开发者功效)使用经验,从部分基础的职能开头到它的片段高级品质分析器(提姆eline、Profiles),在最终,将会推荐两款好的插件,希望对您的开发工作有稍许的听从。如若你对部分面板模块功用已经很领悟可以一直跳过去阅读你感兴趣的有的。

一、Elements
皇家赌场手机版 1
在Element中第一分两块大的部分
A:HTML结构面板
B:操作dom样式、结构、时间的突显面板
1.在A中,每当你的鼠标移动到其余一个元素上,对应的html视图中会给该因素粉色的背景。
皇家赌场手机版 2
2.比方你单击选中一个因素,在A部分的底层,会显得该因素在html结构中的地点关系
皇家赌场手机版 3
3.然后您可以在B部分的styles选项中编辑该因素的体裁,并且探望html结构的实时更新(大大的福利)
皇家赌场手机版 4
4.你可以在B界面中切换来伊夫nt Listeners选项,观察该因素绑定的轩然大波。
皇家赌场手机版 5

click 是事件名称

.div1 事件是索引名称(也就是经过什么绑定的)

attachment 事件起点

handler里面包蕴事件的毁坏主体内容

useCapture表示该事件是还是不是向上冒泡
5.选中一个要素,右击鼠标,你会看到有一个弹出窗口冒出,里面有几多选项
皇家赌场手机版 6
Add attribut : 为该因素添加属性
Edit attribute:修改该因素的特性
Force element state:
为元素激活某种景况(首要用在能够大约的因素比如a、input、button等)
Edit as
HTML:编辑该因素(你可以重写它的全体content)甚至修改它的竹签名称
中档简单的掠过…….
Break
on:为该因素添加dom操作事件监听。包括七个挑选(树结构改变、属性改变、节点移除)。那么些选项的意义是辅助大家监控和定点操作元素的代码。请参考下图事例:
皇家赌场手机版 7
6.在A界面的弹出选项窗口中精选node removal,在B界面切换来DOM
Breakpoints 选项,能够见到有登记新闻。然后大家点击click
me按钮触发删除div3的轩然大波,可以看到浏览器自动为大家永恒删除该因素的代码部分,并且停止实施js代码:

皇家赌场手机版 8

 

7.在B界面中切换来Properties选项,能够看到选中元素的种种音信(英文单词里面的牵线相比较简单,就不一一介绍了)。

皇家赌场手机版 9

Chrome开发者工具不完全指南,谷歌(Google)Chrome浏览器开发者工具教程。 

8.点击A界面的随意地点,按火速键ctrl+F可以看出尾部有输入框,在输入框中输入你想要查找的其余内容,若是匹配到了,都回在A面板中高亮彰显
皇家赌场手机版 10
9.或者你可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到拔取的因素。
皇家赌场手机版 11

 

 

二、Network
皇家赌场手机版 12
1.Network是一个督察当前网页所有的http请求的面版,它主体部分显得的是各类http请求,每个字段表示着该请求的不比性质和气象
皇家赌场手机版 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完毕的动静
Type:请求的品种
Initiator:请求源也就是说该链接通过哪些发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
提姆e:请求或下载的时刻
提姆eline:该链接在殡葬进度中的时间状态轴(大家得以把鼠标移动到这一个红红绿绿的时间轴上,对应的会有它的详细消息:开首下载时间,等待加载时间,自身下载耗时)
皇家赌场手机版 14
2.单击面板中的任意一条http音讯,会在底部弹出一个新的面板,其中记录了该条http请求的详尽参数header(表头音讯、再次来到音讯、请求基本情形—请参考http1.1探讨内容对号落座)、Preview(重回的格式化转移后文本新闻)、response(转移以前的原有消息)、Cookies(该请求带的cookies)、提姆ing(请求时间变化)
皇家赌场手机版 15
3.在主面板的顶部,有部分按钮从左到右它们的机能分别是:是或不是启用继续http监控(默许高亮选中过)、清空主面板中的http信息、是或不是启用过滤新闻选项(启用后方可对http音信举办筛选)、列出各种质量、只列出name和time属性、preserve
log(如今不精通什么用)、Dishable cahe(禁用缓存,所有的304重返会和fromm
cahe都回变成健康的呼吁忽视cache conctrol 设定);

皇家赌场手机版 16
4.最后在主面板的底部有记录了完整网络请求状态的一部分主导音讯
皇家赌场手机版 17

三、Resources

Resources部分较简单,他重视向我们来得了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等本土存储音讯,在此地,我们可以无限制地修改、增加、删除本地存储。

皇家赌场手机版 18 关于webSql,我领悟的并不多,在付出中很少用到。假若你想领会那上头的音信,我引进您去读书那篇博客

1 赞 28 收藏 2
评论

皇家赌场手机版 19

来源:

很对不起,那小说是我长期事先写的
图片是存在有道云的,不晓得干什么在移动端不可能加载

谷歌(Google)浏览器方今是Web开发者们所利用的最盛行的网页浏览器。伴随每七个星期六回的文告周期和不断扩充的精锐的支付功效,Chrome变成了一个必须的工具。半数以上也许了解有关chorme的许多特性,例如利用console和debugger在线编辑CSS。在那篇小说中,我们将享用部分很酷的技巧,让您可见更好的句斟字酌工作流程。

Chrome(F12开发者工具)是老大实用的支出襄助工具,对于前端开发者简直就是神器,但苦恼开发者工具是英文界面,且从未中文,那让许多仇人都不知道怎么用。下载呢小编为大家带来Chrome开发者工具基础意义和高等质量分析器(提姆eline、Profiles)的图文详解教程,上边是基础作用篇。

常用疾速键

皇家赌场手机版 20

chrome快捷键

皇家赌场手机版 21

升迁:右键点击图片选拔在新窗口或新标签页中开拓可查看大图。

chrome连忙键 左右切换tag页

left: ctrl + pgup
right: ctrl + pgdn
new tab: ctrl + t

1.文书迅速切换
火速键Ctrl + P 就可以疾速搜索你的工程文件。

2.源代码内部查找
假定你想要查找源代码的情节,你可以拔取Ctrl + Shift + F (Cmd + Opt +
F)并输入字符串关键词。

3.到某一行
当您在Chrome DevTools中开拓一个源文件,你可以指定到自由一行,用高速键
Ctrl + G (Windows 和 Linux), 或者 Cmd + L (Mac)并输入你想跳到哪一行。
你也足以示用Ctrl + O,并输入“:”+第几行。

4.在控制巴尔的摩选中元素
在DevTools中您可以手动选项DOM元素。
$() 再次来到符合当下CSS拔取器的率先个元素,例如 $(‘div’)
会重回页面中首先个div元素。
Chrome开发者工具不完全指南,谷歌(Google)Chrome浏览器开发者工具教程。$$() 重返符合当下CSS选取器的一串 好五个 不是一个元素。

(上面的图是本人在网上征集的,自己写一定没有这么些配图说的知道)

经过console面板修改页面元素及要素内容:

一、Elements

皇家赌场手机版 22

在Element中驷不及舌分两块大的一部分:HTML结构面板(A)和操作dom样式、结构、时间的展现面板(B)。

1.在A中,每当你的鼠标移动到任何一个要素上,对应的html视图中会给该因素灰色的背景。

皇家赌场手机版 23

2.万一您单击选中一个元素,在A部分的平底,会突显该因素在html结构中的地方关系

皇家赌场手机版 24

3.然后在B部分的styles选项中编辑该因素的体制,并且探望html结构的实时更新。

皇家赌场手机版 25

4.在B界面中切换来伊芙nt Listeners选项,阅览该因素绑定的事件。

皇家赌场手机版 26

click 是事件名称

.div1 事变是索引名称(也就是透过哪些绑定的)

attachment 事件源于

handler里面包括事件的毁坏主体内容

useCapture代表该事件是或不是向上冒泡

5.选中一个元素,右击鼠标,你会面到有一个弹出窗口冒出,里面有几多选项。

皇家赌场手机版 27

Break
on:为该因素添加dom操作事件监听。包括两个选拔(树结构改变、属性改变、节点移除)。那些选项的效率是支持大家监控和平昔操作元素的代码。请参考下图事例:

皇家赌场手机版 28

6.在A界面的弹出选项窗口中挑选node removal,在B界面切换来DOM Breakpoints
选项,能够看到有注册信息。然后我们点击click
me按钮触发删除div3的轩然大波,可以观察浏览器自动为我们一定删除该因素的代码部分,并且为止实施js代码:

皇家赌场手机版 29

7.在B界面中切换来Properties选项,可以看到选中元素的各样信息(英文单词里面的介绍相比不难,就不一一介绍了)。

皇家赌场手机版 30

8.点击A界面的肆意地方,按疾速键ctrl+F可以观看尾部有输入框,在输入框中输入你想要查找的任何内容,假若匹配到了,都回在A面板中高亮显示

皇家赌场手机版 31

9.仍旧您可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到拔取的因素。

皇家赌场手机版 32

开发者工具面板各样板块介绍

得到元素节点

二、Network

皇家赌场手机版 33

1.Network是一个监理当前网页所有的http请求的面版,它主体部分显得的是每个http请求,每个字段表示着该请求的例外属性和景况皇家赌场手机版 34

提姆eline:该链接在殡葬进度中的时间状态轴(大家得以把鼠标移动到那一个红红绿绿的时间轴上,对应的会有它的详细音信:伊始下载时间,等待加载时间,自身下载耗时)

皇家赌场手机版 35

2.单击面板中的任意一条http新闻,会在底部弹出一个新的面板,其中记录了该条http请求的详实参数header(表头音讯、重临音信、请求基本气象---请参考http1.1合计内容对号落座)、Preview(重临的格式化转移后文本信息)、response(转移此前的原来新闻)、Cookies(该请求带的cookies)、Timing(请求时间变更)

皇家赌场手机版 36

3.在主面板的顶部,有部分按钮从左到右它们的功能分别是:是或不是启用继续http监控(默认高亮选中过)、清空主面板中的http音信、是还是不是启用过滤信息选项(启用后可以对http音信进行筛选)、列出七种质量、只列出name和time属性、preserve
log(近年来不理解啥用)、Dishable cahe(禁用缓存,所有的304再次来到会和fromm
cahe都回变成健康的呼吁忽视cache conctrol 设定);

皇家赌场手机版 37

4.最终在主面板的尾部有记录了完整网络请求状态的一部分为主新闻

皇家赌场手机版 38

Elements

常用方法:
1.鼠标移动到元素上会在原网页上显得黑色印记;
2.在开发者工具上边显示元素在HTML里的岗位关系;
3.在styles选项中编辑该因素的体制,并且看来html结构的实时更新;
4.左上角的箭头,鼠标点击后,移动到网页,下边会活动跳转到相应的元素上;

当选一个因素,右击鼠标,你会看出有一个弹出窗口冒出,里面有若干挑选

皇家赌场手机版 39

Add attribut: 为该因素添加属性
Edit attribute:修改该因素的性质
Force element state:
为因素激活某种景况(紧要用在可以大致的元素比如a、input、button等)
Edit as
HTML:编辑该因素(你可以重写它的万事content)甚至修改它的价签名称
Break on:为该因素添加dom操作事件监听。

在element里可以调节css查看html的DOM,那么些都是平时最常用的功用
接下来chrome最可喜的css颜色选用,当你点击一个css的color属性后,就会出现下图,你就可以接纳自己喜爱的水彩了,而且此时你活动鼠标到页面上自由地点会油然则生一个放大镜一样的取景器,点击就会在elelment面板上出示你点击地点的水彩相关新闻。。。。。
点击color属性可以在rgbahslhexadecimal中间来回切换颜色的格式

皇家赌场手机版 40

似乎那样。。。。

皇家赌场手机版 41

DevTools有一个得以衣冠优孟CSS状态的功效,例如元素的hover和focus,可以很简单的变动元素样式。在CSS编辑器中得以行使这么些职能

皇家赌场手机版 42

右键采纳Edit as HTML或者Edit Text

三、Resources

Resources部分较不难,首要向大家来得了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等当地存储音信,在此间,大家可以无限制地修改、扩张、删除本地存储。

皇家赌场手机版 43

Network

皇家赌场手机版 44

Network是一个监察当前网页所有的http请求的面版,它主体部分显得的是每个http请求,每个字段表示着该请求的不比属性和情景

Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完结的状态
Type:请求的档次
Initiator:请求源也就是说该链接通过什么样发送(常见的是Parser、Script)
皇家赌场手机版 ,Size:下载文件或者请求占的资源大小
提姆e:请求或下载的年华
提姆eline:该链接在殡葬进程中的时间状态轴(大家可以把鼠标移动到这几个红红绿绿的时间轴上,对应的会有它的详细新闻:开始下载时间,等待加载时间,自身下载耗时)

皇家赌场手机版 45

2.单击面板中的任意一条http信息,会在底层弹出一个新的面板,其中记录了该条http请求的详实参数header(表头音信、再次来到音讯、请求基本境况—请参见http1.1磋商内容对号落座)、Preview(重临的格式化转移后文本音讯)、response(转移之前的本来面目音讯)、Cookies(该请求带的cookies)、提姆ing(请求时间转移)

皇家赌场手机版 46

皇家赌场手机版 47

职位1:filter过滤器,可在输入框中输入关键字搜索对应请求的公文。
职位2:请求文件的列表里开展了归类,个人常用的是查看XHR的归类,查看Ajax请求。
岗位3:设置互联网的通讯情势。默许”No
thirotting”不节流。那里可以设置断网方式,或者模拟3G,4G互联网等情状下页面加载的快慢。网速可以在”settings”里面安装。

修改后的情节会实时反映在页面和Elements面板上

Sources

皇家赌场手机版 48

sources面板是调节中最常用的地点。
职分1:查看页面中加载的资源文件
职位2:若是浏览器装了插件,插件所要求的JS文件会在那边突显
职责3:使用ctrl+p/ctrl+o 打开某个文件
义务4:断点的操作
义务5:查看异步请求时所设置的定时器
岗位6:点击左侧的加号,可以追加监听的变量。然则鼠标放到JS文件中的变量时也会显得相应的值。
岗位7:设置各个分化的断点。
当勾选XHR Breakpoints里的any XHR时,页面中触发Ajax请求时都会中断。
当勾选”伊夫nt listener breakpoint” 下的 Mouse(鼠标)下的 Click
(单击)事件时,触发某个按钮的点击事件就会暂停。
职责8:一般线上的代码都是包裹后的代码,不便宜调试。点击{}后格式化该公文。

此地我再就说一下怎么使用sources那个面板进行局地js的调试:

图中的4号区域有6个按键(有的版本那多少个按键地方在source下边)
当您调试时按下率先个暂停(快速键f8),js停止运作,然后点击第二个想箭头一样的按钮(火速键f10),javascript执行下一句,同理另一个箭头按钮表示发展执行,重临上一句js的情况。
安装断点:(当4号区域第多少个按钮按下时)点击sources中间的代码行数,就会在这边安装一个断点,紫色时表示激活断点,再一次点击打消,那样刷新页面一向实施到您设置的断点处。

接下来我就非得提一个比较讨人喜欢的效果了。。。。。代码美化。。。。。

从前看源码跟个鬼一样 所有js
css全堆在一道,是个好人都看不懂,但chrome在sources源代码的片段上边有一个按键
“{}” 点击后您就会发现世界美好了,,,,,

想疾速的找到您点击某个特定的按钮或者链接的周转代码,只必要在你点击按钮前启用“伊芙nt
listener breakpoint” Mouse:mouseover还有mouseout

皇家赌场手机版 49

本身在div上写了一个mouseover的js当js检测到有运行到mouseover时就会来得出mouseover执行的function()
你就足以看看事件是怎么执行的了
但利用这些成效可能会进去到第三方的代码库像jQuery,那时候你就须求花费一些调节的时光赶到达确实的事件处理函数。最好的章程是符号“Blackbox
Script”防止进入到第三方的台本。调试时就再不会跻身第三方的脚本库了,代码会平昔运转到没有标记blackboxed的文书截至。你可以blackbox脚本通过右击调用栈里的第三方库的公文,并从上下文菜单中选拔“Blackbox
Script”即可:
可是一般自己并非jquery

皇家赌场手机版 50

皇家赌场手机版 51

console

Rainbow Text(一个小成效)

console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), 
color-stop(0.15, #f2f), 
color-stop(0.3, #22f), 
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2), 
color-stop(0.9, #ff2),
color-stop(1, #f22) );
color:transparent;-webkit-background-clip: text;font-size:5em;');

console.time & console.timeEnd 计算耗时

![console.time](http://upload-images.jianshu.io/upload_images/1889471-7372ce7da5b0b345.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

对代码执行的耗时景况开展测试时,处理手工在代码中成立前后七个日子戳进行相比较,在dev
tools中,大家能够运用console.time与 console.timeEnd完毕。

console.time("测试用时");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("测试用时");

皇家赌场手机版 52

关闭Console界面

console.log:普通音讯
console.log(‘%c你好’,’color:red;’,’小明’,’你明白被二姑打了么’);
console.info:提醒类音信
console.error:错误音讯
console.warn:警示音信

var data = [{'品名': ‘室友', '数量': 4}, {'品名': '电脑', '数量': 9}];
console.table(data);显示图表

其余,console.log()
接收不定参数,参数间用逗号分隔,最后会输出会将它们以空白字符连接。

inspect()/copy()/values()和Ctrl + L

console.assert

皇家赌场手机版 53

当您想代码满足某些条件时才输出音信到控制台,那么你大可不必写if或者长富表明式来完成目的,cosole.assert便是那般场景下一种很好的工具,它会先对传播的表明式举办预见,唯有表明式为假时才输出相应音讯到控制台。

var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

在console面板使用inspect(elem)跳转到elements面板的指定元素节点

console.count

而外标准输出的风貌,还有广泛的场地是计数。
当您想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任那样的天职。

function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

皇家赌场手机版 54

在console面板使用copy(values)将数据复制到剪贴板

console.dir

将DOM结点以JavaScript对象的样式出口到控制台
而console.log是直接将该DOM结点以DOM树的构造举行输出,与在要素审查时见到的布局是一模一样的。分化的显示格局,同样的古雅,各个体位任君接纳反正就是有利于与关爱。

console.dir(document.body);
console.log(document.body);

皇家赌场手机版 55

在console面板使用values(object)获取对象的富有属性值,重返数组

console.time & console.timeEnd

出口一些调试新闻是控制台最常用的功用,当然,它的效能远不止于此。当做一些属性测试时,同样可以在此处很便宜地进行。
诸如须求考量一段代码执行的耗时情形时,可以用console.time与
console.timeEnd来做此事。

那边借用官方文档的例子:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");

皇家赌场手机版 56

除此以外值得一赞的是,Chrome
控制斯特拉斯堡原生协助类jQuery的拔取器,也就是说你可以用$加上熟练的css采用器来挑选DOM节点,多么滴熟习。

$(‘body’)

皇家赌场手机版 57

copy

透过此命令可以将在控制台获取到的情节复制到剪贴板。

copy(document.body)

然后您就可以随地粘了:

皇家赌场手机版 58

此间的控制台命令只好在控制马普托环境中施行,因为他不敢苟同附于任何全局变量比如window,所以实际在JS代码里是造访不了这几个copy方法的,所以从代码层面来调用复制作用也就无从谈起。

皇家赌场手机版 59

动用Ctrl + L清空当前的console面板

Timeline

提姆eline面板是翻开动态流的。在那边可以测试页面的特性难题。比如页面的渲染速度,动画的流畅度等。

皇家赌场手机版 60

职分1:点击那几个按钮早先Record,按钮变成粉色,再次点击为止记录。
地点2:接纳记录生成的图片格局
地点3:须要记录的类型
职责4:fps指每秒的帧数,那么些可以衡量页面的渲染速度。假若跨越60fps,则页面可能须求优化下了。要是跨越30fps,则页面的卡顿现象会相比严重。
任务5:记录时期页面加载的比重。看哪个范围的值越发大,占用时间最长,然后有针对的优化。

皇家赌场手机版 61

Settings

勾选上边这几个选项后就会在控制奥兰多打印出富有的Ajax请求地址。

皇家赌场手机版 62

JS 文件打开和文书内的迅猛跳转

Profile(质量优化)

属性分析(Profiler)就是分析程序各种部分的运转时刻,找出瓶颈所在,使用的主意是console.profile()。

   1: <script type="text/javascript">
   2:       function All(){
   3:             alert(11);
   4:          for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7:         funcB(10000);
   8:       }
   9:
  10:       function funcA(count){
  11:         for(var i=0;i<count;i++){}
  12:       }
  13:
  14:       function funcB(count){
  15:         for(var i=0;i<count;i++){}
  16:       }
  17:
  18:       console.profile('性能分析器');
  19:       All();
  20:       console.profileEnd();
  21:     </script>

皇家赌场手机版 63

奥迪(Audi)ts 加载速度优化参照的是雅虎前端工程师的十四条黄金指出

在Sources面板使用CMD + O急迅键打开搜索框

有意思功用

搜寻框下会提醒当前页面的涉嫌的 JS 文件,输入文件名即可打开

长距离调试

Android与PC双向同步

支撑在手机浏览器/native
app中调剂,帮衬端口转载,协助虚拟主机名映射(virtual host mapping)

未雨绸缪条件:

1. Chrome32+
2. Android USB连接
3. 浏览器调试需要Android4.0+,以及Android Chrome(PC的Chrome要比Android版本高才行)
4. app调试需要Android4.4+,以及WebView.setWebContentsDebuggingEnabled(true);

步骤:

1. 开启USB调试,手机打开Chrome进入需要调试的页面
2. PC打开Chrome进入chrome://inspect,勾选Discover USB devices
3. 在设备列表中点击inspect开始远程调试
4. 计时console.time/timeEnd(str); // 成对出现,配合使用

皇家赌场手机版 64

借使输入:5:9,则表示跳转到文件的第五行第九个字符

设施传感仿真

配备方式的另一个很酷的成效是模拟移动装备的传感器,例如触摸屏幕和加快计。你仍是可以恶搞你的地理地方。那一个职能位于元素标签的尾部,点击“show
drawer”按钮,就可看见Emulation标签 –> Sensors.

皇家赌场手机版 65

有道云真的给我记念很不佳
参照这一个呢

皇家赌场手机版 66

timeline
工具详解

皇家赌场手机版 67

待读

不少的技艺 英文
https://umaar.com/dev-tips/

在Sources面板使用应用Alt + -和Alt +
=可以在上一个鼠标地方和下一个鼠标地点之间跳转

皇家赌场手机版 68

在Elements面板使用CMD +
F打开搜索框,除了常规字符串还足以接纳选拔器来挑选 HTML 元素

皇家赌场手机版 69

在预览图片上右键选用copy image as Data URI,可以将图纸转换为 base64 编码

皇家赌场手机版 70

动用CMD + Click可以在文件中创制多个编辑点,使用CMD +
U可以取消最终一处编辑点

皇家赌场手机版 71

按住Alt键然后接纳文件内容,可以创设一个矩形选区

皇家赌场手机版 72

在Network面板的 filter
输入框输入Is:running指令可以查阅正在拓展中的互连网请求

皇家赌场手机版 73

在Elements面板左边的伊芙nt
Listeners选项卡中,在绑定的事件上右键可以跳转到相应的 JS 代码上

皇家赌场手机版 74

偶尔大家要求在以匿有名的模特式打开链接,现在 Chrome
可以在你匿名打开的时候依然维持同一的开发者工具状态,比如相同的工具栏地方、大小、面板布局、设置音讯等等

皇家赌场手机版 75

在Console面板中动用get伊芙ntListeners(node)函数可以拿走当前节点绑定的风波,重返一个数组

皇家赌场手机版 76

在Elements面板中,右键点击内联的 JS 或者 CSS
路径,选拔open可以在Sources面板中开辟相应的文书

皇家赌场手机版 77

数值调整连忙键

Up / Down,扩充或裁减 1 单位

Shift + Up / Down,增加或减弱 10 单位

Alt + Up / Down,扩展或收缩 0.1 单位

鼠标滚轮

皇家赌场手机版 78

使用CMD + [ or ]可以循环切换开发者工具的逐条面板

皇家赌场手机版 79

为 JS 代码设置标准断点,该断点只在标准化满意时接触

皇家赌场手机版 80

在 JS 文件中当选一段代码,通过Ctrl + Shift +
E可以在Console面板中运作那段代码

皇家赌场手机版 81

将开发者工具从浏览器独立出来之后,使用CMD + Alt +
i将开创另一个开发者工具,该工具得以用于修改第四个开发者工具的样式

皇家赌场手机版 82

采纳console.trace()可以追踪代码执行进度中的栈新闻

皇家赌场手机版 83

在提姆eline面板中会有部分帧使用紫色优良展现,这是因为那一个帧值得引起开发者注意,它们的渲染时间寻常超过了
18ms。点击那些革命的帧,即可查六柱预测应的警戒新闻。日常认为每秒渲染 60
帧的页面是流畅的,那就须求每一帧的渲染无法超过 16ms。

皇家赌场手机版 84

在 Canary 版的开发者工具中,提供了一个隐蔽的布局编辑器

皇家赌场手机版 85

在Sources面板中利用CMD + Opt + F / Ctrl + Shift +
F可以搜寻所有文件的新闻

皇家赌场手机版 86

动用Tab键可以在 CSS
样式规则中举行遍历选定,选定的对象包蕴:选拔器、属性和属性值。假设想跳回上一个目的,使用Shift

  • Tab

皇家赌场手机版 87

拔取Up / Down连忙键能够修改 DOM 元素属性中的数值。

皇家赌场手机版 88

调剂 DOM 元素样式

皇家赌场手机版 89

在Console面板中提供了一体系的筛选器,用于过滤特定音信,比如Handled过滤器可以用来捕获
Promises 的 reject 状态

皇家赌场手机版 90

行使console.time(‘sign string’)和console.timeEnd(‘sign
string’)获取中间的间隔时间

皇家赌场手机版 91

选取console.table(arr)输出数组数据

皇家赌场手机版 92

在 Canary 版本中,如若鼠标长日子为止在某个选用器上,左边的 Elements
面板会高亮突显匹配的 DOM 元素区域

皇家赌场手机版 93

手动阻塞 URL 的加载,用于测试资源得到战败的页面效果

皇家赌场手机版 94

在 Canary 版本中的 提姆eline 面板新增了一个 Constly Functions
模块,用于记录七个地点的特性表现:Painting / Rendering / Scripting /
Network activity

皇家赌场手机版 95

透过拖拽重排开发者工具上的面板顺序

皇家赌场手机版 96

Elements面板跟随鼠标悬停目标突显分化的 DOM 元素

皇家赌场手机版 97

采用 animation 检查器可以检查运行中的 CSS 动画属性

皇家赌场手机版 98

可视化资源依赖关系:粉红色资源为开端化资源,青色资源由黄色资源引入

原文:

相关文章

Leave a Comment.