永利酒店赌场:Chrome浏览器及调试教程

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

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

原文出处:
卖烧烤夫斯基   

就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。根据最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员,我推荐你使用Chrome。作为前端开发的”IDE”,你只需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全,要么是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome(F12开发者功能)使用经验,从一些基础的功能开始到它的一些高级性能分析器(Timeline、Profiles),在最后,将会推荐几款好的插件,希望对您的开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。

一、Elements
永利酒店赌场 1
在Element中主要分两块大的部分
A:HTML结构面板
B:操作dom样式、结构、时间的显示面板
1.在A中,每当你的鼠标移动到任何一个元素上,对应的html视图中会给该元素蓝色的背景。
永利酒店赌场 2
2.如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系
永利酒店赌场 3
3.然后你可以在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新(大大的福利)
永利酒店赌场 4
4.你可以在B界面中切换到Event 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

 

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:下载文件或者请求占的资源大小
Time:请求或下载的时间
Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)
永利酒店赌场 14
2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)
永利酒店赌场 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

来源:

很抱歉,这文章是我好久之前写的
图片是存在有道云的,不知道为什么在移动端无法加载

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程。

==>(微信公众号:IT知更鸟)欢迎关注<^>@<^>

Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工具基础功能和高级性能分析器(Timeline、Profiles)的图文详解教程,下面是基础功能篇。

常用快捷键

永利酒店赌场 20

chrome快捷键

永利酒店赌场 21

Chrome浏览器及调试教程

  在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript脚本,然后去修改代码。最简单的调试方法就是使用alert方法,将可信息通过alert方法的弹窗显示出来。但是,alert方法有几个弊端:

1)alert方法在弹出窗口时会中断程序;

2)在循环中使用alert()方法时,如果不点击alert弹窗的确定按钮,下一个alert就不会出现;

3)alert方法在显示对象时永远只显示[Object],无法看到对象中的具体细节;

  由于alert方法存在上述缺点导致了alert方法只适合一些小程序。如果想要查看JavaScript脚本的执行过程,HTTP请求信息,执行过程中的数据信息则需要学会使用浏览器的开发者工具进行调试。

  从以下几个方面来了解Chrome浏览器:

1.Chrome浏览器简介及下载与安装;2.浏览器加载Html页面的过程;

3.Chrome浏览器开发者工具面板的介绍;4.使用Chrome开发者工具调试JavaScript脚本;5.Chrome浏览器的其他设置;


 

提示:右键点击图片选择在新窗口或新标签页中打开可查看大图。

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元素。
$$() 返回符合当前CSS选择器的一串 好多个 不是一个元素。

(下面的图是我在网上搜集的,自己写肯定没有这个配图说的清楚)

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

1.浏览器简介

浏览器的主要功能:

  浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML
文档,也可以是 PDF、图片或其他的类型。资源的位置由用户使用
URI(统一资源标示符)指定。

  浏览器解释并显示 HTML 文件的方式是在
HTML 和 CSS 规范中指定的。这些规范由网络标准化组织
W3C(万维网联盟)进行维护。

多年以来,各浏览器都没有完全遵从这些规范,同时还在开发自己独有的扩展程序,这给网络开发人员带来了严重的兼容性问题。如今,大多数的浏览器都是或多或少地遵从规范。 

  所以,浏览器就是一个获取网页并将它显示给用户的工具。

浏览器界面介绍:

浏览器的用户界面有很多彼此相同的元素,其中包括:

用来输入 URI 的地址栏

前进和后退按钮

书签设置选项

用于刷新和停止加载当前文档的刷新和停止按钮

用于返回主页的主页按钮

浏览器的高层结构

浏览器引擎 –
在用户界面和呈现引擎之间传送指令。

呈现引擎 –
负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS
内容,并将解析后的内容显示在屏幕上。

网络 – 用于网络调用,比如 HTTP
请求。其接口与平台无关,并为所有平台提供底层实现。

用户界面后端 –
用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。

JavaScript 解释器。用于解析和执行
JavaScript 代码,就是后面讲到的JavaScript引擎。

数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的
HTML 规范 (HTML5)
定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

   目前使用的主流浏览器有五个:Internet
Explorer、Firefox、Safari、Chrome 浏览器和
Opera。本文中以开放源代码浏览器为例,即 Firefox、Chrome 浏览器和
Safari(部分开源)。根据 StatCounter 浏览器统计数据,目前(2011 年 8
月)Firefox、Safari 和 Chrome 浏览器的总市场占有率将近
60%。由此可见,如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。


 

一、Elements

永利酒店赌场 22

在Element中主要分两块大的部分:HTML结构面板(A)和操作dom样式、结构、时间的显示面板(B)。

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

永利酒店赌场 23

2.如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系

永利酒店赌场 24

3.然后在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新。

永利酒店赌场 25

4.在B界面中切换到Event 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

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

获取元素节点

2.浏览器加载Html页面的过程

二、Network

永利酒店赌场 33

1.Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态永利酒店赌场 34

Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)

永利酒店赌场 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

2.1  从输入URL到页面加载完成都发生了什么?

1.处理URL:输入 URL
后的「回车」,这时浏览器会对 URL 进行检查,首先判断协议,如果是 http
就按照 Web 来处理,另外还会对这个 URL
进行安全检查,然后直接调用浏览器内核中的对应方法,比如 WebView 中的
loadUrl 方法。

2.发送HTTP请求:因为网络的底层实现是和内核相关的,所以这一部分需要针对不同平台进行处理,从应用层角度看主要做两件事情:通过
DNS 查询 IP、通过 Socket
发送数据,接下来就分别介绍这两方面的内容。

2.1
DNS查询:
Chrome浏览器在启动的时候首先会去加载你本地的host文件,如果URL中的域名在host文件中设置的有对应的IP地址,就会直接将这个域名指向这个地址。如果host中没有URL中输入的域名(www.baidu.com)对应的IP地址,浏览器就会去访问DNS服务器,向DNS服务器询问这个域名(www.baidu.com)对应的IP地址。

2.2 通过Socket发送数据:有了 IP
地址,就可以通过 Socket API 来发送数据了,这时可以选择 TCP/IP 或 UDP
协议,HTTP 常用的是 TCP/IP
协议。Chrome此时就会使用TCP/IP传输协议,将URL中的信息通过HTTP协议发送到百度的服务器。

3.浏览器接受远程服务器响应的数据:远程服务器(百度的服务器)一般会返回给浏览器一个HTML(字节码数据)。浏览器接受到数据之后就对这些字节码数据以指定的编码格式进行解码。浏览器获取编码格式的途径:

1)用户设置,在浏览器中可以指定页面编码

2)HTTP 协议中

3)HTML页面中<meta> 的 charset
属性值

4.浏览器对HTML页面进行渲染和布局:

1).浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;

2).浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

3).浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

4).浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

5).浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;

6).Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div>
(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

7).终于等到了</html>的到来,浏览器泪流满面……

8).等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;

9).浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

注:win10打开host文件的方法:在运行(win+R)中输入:C:WindowsSystem32driversetc即可

三、Resources

Resources部分较简单,主要向我们展示了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储。

永利酒店赌场 43

Network

永利酒店赌场 44

Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态

Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完成的状态
Type:请求的类型
Initiator:请求源也就是说该链接通过什么发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
Time:请求或下载的时间
Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)

永利酒店赌场 45

2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)

永利酒店赌场 46

永利酒店赌场 47

位置1:filter过滤器,可在输入框中输入关键字搜索对应请求的文件。
位置2:请求文件的列表里进行了分类,个人常用的是查看XHR的分类,查看Ajax请求。
位置3:设置网络的通信方式。默认”No
thirotting”不节流。这里可以设置断网模式,或者模拟3G,4G网络等情况下页面加载的速度。网速可以在”settings”里面设置。

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

2.2  JavaScript引擎

Sources

永利酒店赌场 48

sources面板是调试中最常用的地方。
位置1:查看页面中加载的资源文件
位置2:如果浏览器装了插件,插件所需要的JS文件会在这里显示
位置3:使用ctrl+p/ctrl+o 打开某个文件
位置4:断点的操作
位置5:查看异步请求时所设置的定时器
位置6:点击右边的加号,可以增加监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。
位置7:设置各种不同的断点。
当勾选XHR Breakpoints里的any XHR时,页面中触发Ajax请求时都会中断。
当勾选”Event listener breakpoint” 下的 Mouse(鼠标)下的 Click
(单击)事件时,触发某个按钮的点击事件就会中断。
位置8:一般线上的代码都是打包后的代码,不利于调试。点击{}后格式化该文件。

这里我再就说一下怎么使用sources这个面板进行一些js的调试:

图中的4号区域有6个按键(有的版本这几个按键位置在source下面)
当你调试时按下第一个暂停(快捷键f8),js停止运行,然后点击第三个想箭头一样的按钮(快捷键f10),javascript执行下一句,同理另一个箭头按钮表示向上执行,返回上一句js的状态。
设置断点:(当4号区域第五个按钮按下时)点击sources中间的代码行数,就会在这里设置一个断点,蓝色时表示激活断点,再次点击取消,这样刷新页面直接执行到你设置的断点处。

然后我就必须提一个比较可爱的功能了。。。。。代码美化。。。。。

以前看源码跟个鬼一样 所有js
css全堆在一起,是个正常人都看不懂,但chrome在sources源代码的部分下面有一个按键
“{}” 点击后你就会发现世界美好了,,,,,

想快速的找到你点击某个特定的按钮或者链接的运行代码,只需要在你点击按钮前启用“Event
listener breakpoint” Mouse:mouseover还有mouseout

永利酒店赌场 49

我在div上写了一个mouseover的js当js检测到有运行到mouseover时就会显示出mouseover执行的function()
你就可以看看事件是怎么执行的了
但使用这个功能可能会进入到第三方的代码库像jQuery,这时候你就需要花费一些调试的时间来到达真正的事件处理函数。最好的方法是标记“Blackbox
Script”避免进入到第三方的脚本。调试时就再不会进入第三方的脚本库了,代码会一直运行到没有标记blackboxed的文件为止。你可以blackbox脚本通过右击调用栈里的第三方库的文件,并从上下文菜单中选择“Blackbox
Script”即可:
然而一般我不用jquery

永利酒店赌场 50

永利酒店赌场 51

2.2.1 JavaScript引擎是什么?

“JavaScript引擎”通常被称作一种
虚拟机。“虚拟机”是指软件驱动的给定的计算机系统的模拟器。有很多类型的虚拟机,它们根据自己在多大程度上精确地模拟或代替真实的物理机器来分类。

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

2.2.2 JavaScript引擎是干什么的?

JavaScript的基本工作就是将开发者写的JavaScript代码转换成能被浏览器理解甚至能在应用程序上运用的最优化的快捷代码。比方说,当你写了 var
a = 1 +
1;
 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。

console.assert

永利酒店赌场 53

当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。

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

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

2.2.3 主要的JavaScript引擎有哪些?

WebKit的JavaScriptCore 和 Google 的 V8
引擎。

console.count

除了条件输出的场景,还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任这样的任务。

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

永利酒店赌场 54

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

2.2.4 JavaScriptCore和V8引擎解析源代码的过程

JavaScriptCore 执行 一系列步骤
来解释和优化脚本:

1)首先它进行词法分析,就是将源代码分解成一系列具有明确含义的符号或字符串。

2) 然后用语法分析器分析这些符号,将其构建成语法树。

3)接着四个
JIT(Just-In-Time)进程开始参与进来,分析和执行解析器所生成的字节码。

简单来说,JavaScript
引擎会加载你的源代码,把它分解成字符串(又叫做分词),再
把这些字符串转换 成编译器可以理解的字节码,然后执行这些字节码。

Google 的 V8 引擎 是用 C++
编写的,它也能够编译并执行 JavaScript
源代码、处理内存分配和垃圾回收。它被设计成由两个编译器组成,可以把源码直接编译成机器码:

1)
Full-codegen:输出未优化代码的快速编译器

2) Crankshaft:
输出执行效率高、优化过的代码的慢速编译器

如果 Crankshaft 确定需要优化的代码是由
Full-codegen 生成的未优化代码,它就会取代
Full-codegen,这个过程叫做“crankshafting”。

一旦编译过程中产生了机器代码,引擎就会向浏览器暴露所有的数据类型、操作符、对象、在
ECMA 标准中指定的函数、或任何运行时需要使用的东西,NativeScript
就是如此。


 

console.dir

将DOM结点以JavaScript对象的形式输出到控制台
而console.log是直接将该DOM结点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。

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

永利酒店赌场 55

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

3.Chrome浏览器的开发者工具面板介绍

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面板

3.1 Chrome浏览器开发者工具的打开方式:

Timeline

Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度,动画的流畅度等。

永利酒店赌场 60

位置1:点击这个按钮开始Record,按钮变成红色,再次点击停止记录。
位置2:选择记录生成的图表模式
位置3:需要记录的类型
位置4:fps指每秒的帧数,这个可以衡量页面的渲染速度。如果超过60fps,则页面可能需要优化下了。如果超过30fps,则页面的卡顿现象会比较严重。
位置5:记录期间页面加载的比重。看哪个范围的值特别大,占用时间最长,然后有针对性的优化。

永利酒店赌场 61

1)功能键F12或者Ctrl+Shift+j或者Ctrl+Shift+j打开;

2)打开浏览器右上角用户设置下拉菜单,选择更多工具,再选择开发者工具即可打开开发者工具。

Settings

勾选下面这个选项后就会在控制台中打印出所有的Ajax请求地址。

永利酒店赌场 62

JS 文件打开和文件内的快速跳转

3.2 开发者工具的工具栏中常用面板介绍

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell。

Sources: Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。

Timeline:记录并分析在网站的生命周期内所发生的各类事件,以此可以提高网页的运行时间的性能。

Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS
CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。

Application:记录网站加载的所有资源信息,包括存储数据(Local
Storage、Session Storage、IndexedDB、Web
SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。

Security:判断当前网页是否安全。

Audits:对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

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

Audits 加载速度优化参照的是雅虎前端工程师的十四条黄金建议

在Sources面板使用CMD + O快捷键打开搜索框

3.2.1 元素(Element)面板

有趣功能

搜索框下会提示当前页面的涉及的 JS 文件,输入文件名即可打开

Element面板打开方式:

1) 打开开发者工具后选择开发者工具面板中的Element页签;

2) 打开浏览器之后,鼠标右键检查
(火狐浏览器是” 审查元素”)

远程调试

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,则表示跳转到文件的第五行第九个字符

Element面板的常用功能:

1) 实时编辑DOM节点

在Element面板的DOM树视图中.呈现出了当前页面中的所有的DOM节点.鼠标双击任何DOM节点都可以修改其中的属性值,修改完成之后按回车键浏览器会立即显示出修改后的效果.

注意:这种及时的修改只是临时的修改,只能做调试用,实际应用中往往是调试结束后再将正确的属性值在本地代码中修改.

2) 实时编辑CSS样式

在Element面板中也可以对当前页面的DOM元素的样式进行实时的修改,修改后元素的样式立即生效.

实时修改某一DOM元素的样式的操作步骤:

首先选中这个DOM元素.如果没有打开开发者工具,可以在要修改的DOM元素上右键–>审查元素,然后选择控制面板右侧的Style即可看到当前DOM元素的所有CSS样式,双击其中的CSS属性值就可以修改,修改后马上生效.如果已经打开了开发者工具,可以通过先点击开发者工具面板最左侧的放大镜,然后再去点击页面上要修改的DOM元素选中这个要调试的DOM元素.此时控制面板右侧的Style中就呈现出了当前选中的DOM元素的CSS属性双击属性值即可修改.

注意:这种及时的修改只是临时的修改,只能做调试用,实际应用中往往是调试结束后再将正确的属性值在本地代码中修改.

3)打开盒子模型,调试边框参数

点击右侧的Computed页签可以看到当前选中的元素的盒子模型参数,所有的值都是可以修改的.点击不同的位置(top,bottom,left,right)就可以修改元素的padding,border,margin属性值.也可以通过修改盒子模型中间的数据改变元素的width和height.修改的时候浏览器中的当前元素会响应地变化,同时在左侧Element面板中会自动添加上响应的Stylt属性值.当页面上显示的样式符合要求之后,即可停止修改,然后将Element中生成的属性值复制到代码中,样式即可永久修改.

设备传感仿真

设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show
drawer”按钮,就可看见Emulation标签 –> Sensors.

永利酒店赌场 65

有道云真的给我印象很不好
参考这个吧

永利酒店赌场 66

timeline
工具详解

永利酒店赌场 67

3.2.2 控制台(Console) 面板

1)查看脚本运行过程中的异常信息;

由于JavaScript属于弱语言类型,语法要求不严谨.并且JavaScript是解释型语言,在代码中输入中文的标点等错误也不会有提示,只有运行结束后才会抛出异常信息到控制台.

如果想查看具体的异常信息,直接点击右边的异常信息控制台将会把我们带到程序中错误出现的具体位置:

2)打印日志信息;

上边说到了简单的调试可以使用alert方法将想要看到的信息显示在弹窗中。但是alert存在弊端:阻断程序运行,不能显示对象的细节信息,弹出多个信息时必须点击确定才能看到下一个弹窗的信息。这些问题使用console提供的打印日志的方法可以完美解决。

Console常用的打印日志的方法有:

A) console.log(“info”)显示一般的基本日志信息,当要显示的基本日志信息太多时,可以使用console.grop()方法将日志分组;

B) Console.warn(“info”)显示带有黄色小图标的警告信息;

C) Console.error(“info”)显示带有红色小图标的错误信息;

  Console打印日志的使用场景:

A)在代码中使用console.log()打印日志信息:

B)直接在控制台上使用console.log()打印信息:

C)清除控制台中信息的方法:

直接在控制台上输出console.clear()方法人后回车即可清除控制台上的信息。还有一种方法是直接点击控制台左上方的清除日志的按钮清除日志信息。

3)运行JavaScript脚本

控制台还有一个神奇的功能就是可以运行你输入的JavaScript脚本,这一点非常实用。

实用场景一:快速验证JavaScript中的方法。

将一个小数按照输出,要求:只保留两位小数。通过查JavaScript的API得知Number对象有一个toFixed方法可以指定小数位的长度,但是又没有例子,最快的尝试方法就是在控制台上验证:

console.log(new
Number(“3.1415926”).toFixed(2));

实用场景二:控制台中输入JavaScript方法时有提示。

  通过document获取指定id的节点的方法是document.getElementById(“id”)但是因为MyEclipse,Eclipse中在写JavaScript时可能没提示,自己写太痛苦而且还容易写错。这时,就可以在控制台上通过方法提示来补全这个方法。

如上图:我们不需要完整输入方法名,根据提示使用键盘的上,下键选择需要的方法然后回车即可。

D)Console面板中的全局搜索(快捷键Ctrl+Shift+F)

打开全局搜索,输入关键字,能够搜索到包含这个关键字的所有的文件。

应用场景:刚到一个公司,对公司的业务不熟。登录页面有几千行代码,我只想找到登录的那个方法。这时,输入登录方法名就能搜索到登录登录方法所在的页面。点击进去就能够定位到这个方法了。

待读

很多的技巧 英文
https://umaar.com/dev-tips/

在Sources面板使用使用Alt + -和Alt +
=可以在上一个鼠标位置和下一个鼠标位置之间跳转

3.2.3 资源(Source) 面板

Source资源面板中显示加载当前页面需要的所有资源。

在Source面板中可以找到当前浏览器加载的页面,然后对其中的JavaScript脚本进行断点调试。Chrome开发者工具使用中会具体说明。

永利酒店赌场 68

3.2.4 网络(NetWork) 面板

NetWork面板可以记录页面上的网络请求的详细信息,从发起网页请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态,资源信息,大小,所用时间,Request和Response等),可以根据这个进行网络性能优化。

  1. Controls 控制Network的外观和功能。
  2. Filters 控制Requests
    Table具体显示哪些内容。
  3. Overview 显示获取到资源的时间轴信息。
  4. Requests
    Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  5. Summary 显示总的请求数、数据传输量、加载时间信息。

NetWork面板的Requests
Table 包含着HTTP请求和响应的具体信息,是比较常用的一块

  • Name 资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing。
  • Status HTTP状态码。
  • Type 请求的资源MIME类型。
  • Initiator 标记请求是由哪个对象或进程发起的(请求源)。
  • Parser:
    请求由Chrome的HTML解析器时发起的。
  • Redirect:请求是由HTTP页面重定向发起的。
  • Script:请求是由Script脚本发起的。
  • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
  • Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from
    cache)
  • Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
  • Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能:

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request
URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response
Headers
、Request Headers以及Query String
Parameters或者Form Data等信息。

预览响应数据

③ 查看资源HTTP的Response信息

Response标签里面可根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

如果选择的资源在Request和Response过程中存在Cookies信息,则Cookies标签会自动显示出来,在里面可以查看所有的Cookies信息。


 

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

4.Chrome开发者工具之断点调试

永利酒店赌场 69

4.1 JavaScript脚本断点调试

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

第一步:打开开发者工具,按F12或者在浏览器页面上右键选择检查。

永利酒店赌场 70

第二步:在Source面板中找到需要调试的文件。 

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

第三步:设置断点。

永利酒店赌场 71

第四步:触发调试部分程序的运行,开始调试。

调试过程中常用的按钮及快捷键:

跳到下一个断点:点击Sources面板右侧的“三角按钮” 

快捷键:F8

        Ctrl+

跳到下一步(逐步跨方法):点击Sources面板右侧的第二个按钮

快捷键:F10

     Ctrl+’

跳进断点处的方法中:点击Sources面板右侧第三个按钮

快捷键:F11

        Ctrl+;

跳出正在执行的方法:点击Sources面板右侧第四个按钮

快捷键:Shift+F11

      Ctrl+Shift+;

禁用断点:点击Sources面板右侧的第五个按钮

暂停在捕获到的异常处:点击Sources面板右侧的第六个按钮,然后勾选Pause On Caught Exception

暂停在未捕获的异常处:点击Sources右侧的第六个按钮,不勾选Pause On Caught
Exception.

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

查看断点处,获取的数据的值:

将鼠标光标停留在变量上面即可,也可以将变量赋值到Console的控制台上打印出来。

清除断点:

在Source面板最右侧面板中,找到Breakpoints打开,可以看到你打的断点。在断点列表出右键选择Remove all
breakpoints可以一次性删除所有断点。

永利酒店赌场 72

4.2 XHR断点调试

右侧调试区有一个 XHR Breakpoints,点击+
并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求,输入内容就相当于 URL
的过滤器。如果什么都不填,那么就监听所有 XHR 请求。一旦 XHR
调用触发时就会在 request.send() 的地方中断。

在Network面板的 filter
输入框输入Is:running指令可以查看正在进行中的网络请求

4.3 事件监听断点

事件监听是对我们选定的是事件类型进行监听,当这个事件触发的时候,程序就会在这个事件处停止。有助于我们快速找到某一个元素上绑定的事件。

应用场景:我们刚接手一个项目时,对业务不熟。想找到提交登录事件对应的方法,但是发现页面上登录按钮绑定事件写的不是很明确,而且处理登录业务的JavaScript脚本文件有几百行,想找到这个按钮很不容易。此时,我们就可以选定鼠标的点击事件进行监听,当我们点击登录按钮的时候控制台Sources面板会自动将我们带到登录方法处。

事件监听断点使用步骤(以查找天猫首页登录方法为例):

永利酒店赌场 73

1.首先打开京东登录页面找到登录按钮;

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

2.在登录按钮上右键属性==》检查 打开开发者工具,然后打开Sources面板

永利酒店赌场 74

3.打开Sources面板右侧的Event Listener Breakpoints 找到Mouse及鼠标事件下边的click然后勾选上。

有时候我们需要在以匿名模式打开链接,现在 Chrome
可以在你匿名打开的时候仍然保持同样的开发者工具状态,比如相同的工具栏位置、大小、面板布局、设置信息等等

4. 点击登录按钮,触发鼠标的点击事件,发现程序中断在JavaScript文件中,点击面板下方的 “{}” 将代码格式化一下,此时就找到了登录按钮触发的点击事件了。

此时就可以一步一步的像下跟,知道跟到天猫的登录方法了。


 

永利酒店赌场 75

5 其他设置

在Console面板中使用getEventListeners(node)函数可以获取当前节点绑定的事件,返回一个数组

5.1 设置开发者工具的位置:

Chrome刚安装好时,打开开发者工具,开发者工具默认在浏览器的左半边。

可以通过开发者工具面板右上角的设置开发者工具在浏览器中出现的位置。

视图1:开发者工具以一个独立的窗口存在;视图2:在浏览器下方显示;视图3:在浏览器右半边显示。

永利酒店赌场 76

5.2 清除浏览器缓存的方法:

浏览器缓存(Browser
Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。但是,对开发人员来说,我们修改了JavaScript脚本之后需要立即看到修改的效果,所以需要清除缓存,清除缓存常用的方法有:

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

1.Ctrl + F5

F5通常只是刷新本地缓存;Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载,也就是彻底刷新页面了。

永利酒店赌场 77

2.开发者工具打开之后,快速清除缓存的方法:

开发者工具打开之后,浏览器刷新图标上右键会出现清空缓存并硬性重新加载。这一方法能够在开发者工具打开时快速清理缓存。

数值调整快捷键

3.Ctrl + Shift + Del 快捷键清除缓存。

选中地址栏中的URL

按快捷键:Ctrl + Shit + Del  会弹出一个清除浏览数据的弹窗,选择要清理的数据项之后,点击清除浏览数据即可。

Up / Down,增加或减少 1 单位

5.3 禁用页面的JavaScript脚本;

应用场景:在开发互联网电商项目时,需要一些商品图片,于是就去京东找到一个商品打开商品图片之后,想复制或者将这个图片另存为,此时,发现右键后什么都没有。

原因是,京东在图片上通过JavaScript脚本禁用了鼠标右键点击事件。此时,我们可以通过禁用当前页面的JavaScript事件,通过鼠标右键保存图片。

禁用网页JavaScript事件的方法:

1)开发者工具==》Settings

2)勾选Debugger下的Disable
JavaScript 复选框。


 

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

在Timeline面板中会有一些帧使用红色突出显示,这是因为这些帧值得引起开发者注意,它们的渲染时间通常超过了
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 版本中的 Timeline 面板新增了一个 Constly Functions
模块,用于记录四个方面的性能表现:Painting / Rendering / Scripting /
Network activity

永利酒店赌场 95

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

永利酒店赌场 96

Elements面板跟随鼠标悬停目标显示不同的 DOM 元素

永利酒店赌场 97

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

永利酒店赌场 98

可视化资源依赖关系:绿色资源为初始化资源,红色资源由绿色资源引入

原文:

网站地图xml地图