chrome控制台的使用

发表于 | 分类于 | | 阅读次数:
字数统计: | 阅读时长 ≈

掌握谷歌的控制台可以使程序的调试事半功倍

ELEMENT

编辑小技巧

  • Ctrl+shift+I /f12打开调试工具
  • Ctrl+shift+j 打开调试工具 并把光标直接定位到控制台
  • Ctrl+shift+c 打开调试工具 pic

定位文件

  • “Sources”面板中
  • 选择打开新的文件： ctrl+p ;
  • 选择指定文件中的某一行某一列：ctrl+o使用“:行数:列数”的功能
  • 选择指定文件中某一个函数：ctrl+shift+p 可输入选择想找的函数

展开列

  • 选择”Elements”面板
  • 选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键，可以展开所有子节点

改变开发者工具的位置
试一试快捷键：Ctrl + Shift + D。设置开发者工具有三个选项：

  • 不在窗口中显示开发者工具
  • 在窗口右侧显示开发者工具
  • 在窗口底部显示开发者工具

自定义颜色调色板

  • 你可以点击颜色代码前面的小图标，调整颜色

多个光标

  • 移动光标按住CMD + 点击可以添加多个光标，你也可以使用Ctrl + U撤销你选择的最后一个光标。

复制图片的Data URI

  • 选择”Network”面板
  • 在“Resources”面板选择你的图片
  • 在图片上右击，选择“Copy Image as Data URI”选项

触发伪类

  • 在左边的面板元素上右击鼠标，并选择“：active ：hover ：focus ：visited”
  • 另外在右边的面板中选择切换伪类状态的图标

使用$0获取当前元素

  • 选择“Elements”面板
  • 在”Element”面板中选择DOM元素
  • 点击”Console”并输入$0可以获取当前元素

在元素中显示

  • 在控制台，选择一个DOM节点：(eg:document.getElementById(“#box”))
  • 在“Console”面板中右击，选择”Reveal in Elements Panel”

查看事件监听器

  • 选择“Elements”面板”
  • 在“Event Listeners”菜单中选择一个事件
  • 右击并选择“Show Function Definition”，你可以查看到对应的源码

CONSOLE

Using the Console

crtl+shif+J 打开控制+直接把光标定位到console面板

计算一段程序执行时间，可以在timeline上看见
pic
计算某条语句的执行次数
pic
把参数以表格形式输出
pic

Interact from Command Line

SOURCE

运行预定义的代码片段

  • 在左侧边栏中选择: Sources > Snippets
  • 右击选择Select New
  • 输入文件名和在右侧的面板中输入代码片段
  • 代码片段文件名上右击选择Run

Workspaces

  • 选择“Sources”面板
  • 在Sources面板中右击并选择“Add Folder to Workspaces”最后选择你工程项目的存储位置即可
  • 右键点击本地映射文件，并选择Map to Network Resources就会加载相应的“网络”文件了
  • 修改你的文件代码和查看
    pic

添加断点及Blackbox script

用于查看和调试当前页面所加载的脚本的源文件。
断点不只可以添加删除，还可以在断点处进行编辑。此外XHR Breakpoints允许当一个预期Ajax请求创建时断开
pic

blackbox允许屏蔽指定的js 屏蔽文件后会怎么样

  • 库代码（被屏蔽的文件）里抛出异常时不会暂停（当设置为Pause on exceptions时）
  • 调试时Stepping into/out/over都会忽略库代码
  • 事件断点也会忽略库代码
  • 库代码里设置的任何断点也不会起作用
  • 最终的结果就是只会调试应用代码而忽略第三方代码（配置了Blackbox的代码）。 http://www.alloyteam.com/2015/01/chrome-devtools-blackbox/>
    比较大的用途就是 一步一步调代码时候（step into/out/over），避免代码进入一些库中（jquery等） 这个配合事件监听以很方便找到某一事件的触发函数 （要快速找到当你点击一个按钮或一个链接被点击时候执行的代码等）

Network

network下的每一项

pic

  • Name and Path：分别是资源的名称和URL路径
  • Method：用于请求的HTTP方法。例如:GET或POST。
  • Status and Text：http状态码和文本信息
  • Domain：请求资源的域名
  • Type：所请求的资源的MIME类型。Documents，Stylesheets，Images，Scripts，XHR，Fonts
    ，Other
  • Initiator：Initiator 可以快速定位请求是怎么发起的 有四种可能： - Parser：请求是由页面的HTML解析时发送的； - Redirect：请求是由页面重定向发送的； - Script：请求是由script脚本处理发送的； - Other：请求是由其他过程发送的，比如页面里的link链接点击导航到页面或者在地址栏输入URL地址。
  • Cookies：cookie的细节在resource面板
  • Set-Cookies：cookie在http请求中设置
  • Size and Content：size是所有的请求头（一般几百字节）加上请求体的大小；content是所有解码内容的大小，如果从浏览器缓存中加载资源而不是通过网络,这一领域将包含文本(从缓存)。
  • Time and Latency：Time是总的时间，从一开始请求到接受最后一个字节的时间；Latency：响应第一个字节的时间
  • Timeline：下面会有详解

    network下的Header

    pic
    点击View parsed/View source可以看被解析格式或者源文件格式
    点击View decoded/View URL encoded 可以看解码和编码格式的

    network-preview

    pic
    pic

network-response

pic

network-Timeline

pic

  • Stalled/Blocking：浏览器发请求前本地的操作时间，比如去缓存中查看页面缓存等
  • Proxy：与代理服务器连接的时间
  • DNS Lookup： DNS查询的时间
  • Connecting：建立TCP连接的时间 相当于客户端从发请求开始到TCP握手结束这一阶段。
  • Sending：发送请求时间 一般很小
  • Waiting：发送请求完毕到接收请求开始的时间。这个时间段就是服务器处理和返回数据网络延时时间。
  • Content Download / Downloading:接受数据的时间

蓝线表示： DOMReady事件。事件触发的条件是：浏览器已经把整个 HTML 文档的 DOM结构解析完毕。一般前端开发者监听这个事件是为了可靠地在文档中查找元素。这个事件触发之前有可能只下载了半截 HTML，想要的元素还没出现。
红线表示： load 事件，触发条件是：整个页面的 JS CSS 图片都下载完毕。用户看到的进度条/小菊花已经不再显示为“忙”的状态。是用户眼中的加载完毕。

cookie每个参数值详解

WebSocket frames

pic
pic
data：
Continuation Frame
Binary Frame
Connection Close Frame
Ping Frame
Pong Frame
length：负载消息的长度 单位字节
time：当消息被创建的时候的时间戳
说明：在每一帧消息到达后刷新帧表格，点击左边的resource刷新。
只有最后100 WebSocket消息帧表保存的。

如何过滤和排序结果

pic
每一列都有一个小箭头，点击切换排序
Timeline题目左键-可以更换条目
timeline：这是以每个网络请求的开始时间来排序。这是默认的排序,(和starttime一样)。
stattime：按每个网络请求的开始时间排序(排序由时间表选项一样)。
response time:按每个请求的响应时间来排序。
endtime：按每个请求完成时排序。
Duration：按每个请求的总时间排序。选择这个过滤器来确定哪些资源需要最长的时间来加载。
Latency：从请求开始到响应开始这一段时间排序。选择这个过滤器来确定哪些资源需要最长的时间加载出第一个字节。

Network Filmstrip

pic
“Film Strip”显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。

  • 选择“Network”面板
  • 点击“录制”图标
  • 重新加载页面

TIMELINE

Timeline面板中记录和分析了你的应用在运行时所有的活动情况，它是你排查应用性能瓶颈的最佳工具！

Timeline预览面板

Timeline面板有三个主要的窗口：顶部的预览窗口，中间的记录窗口，底部的工具条，如下图：
pic
在你开启记录（就好像打开了录像机的录制功能）后，在这期间你的应用中发生的所有事件都会被记录下来形成一条日志记录，按照记录的类型一般会标注上不同的颜色：
pic
举个例子，下面的截图中显示了一个html页面的事件日志记录，可以看到，第一条记录表示的是浏览器为了获取html页面而发送了http请求的发送请求事件，接下来是一个接受响应事件，和接受对应响应体（html页面内容的字节）的事件，最后是一个加载完毕事件记录。
pic
除了Records视图外，你还可以在三个模式中切换关注点：

  • Events：显示所有的事件记录
  • Frames：显示页面渲染的帧数
  • Memory：显示页面的内存使用情况

下面着重介绍一下三种模式

Timeline三种模式

Events 模式
Events模式提供了一个概览图，包含了在记录期间你的页面被捕获到的所有事件，你可以很容易的看到你的应用到底哪里耗时最久，等等~~

每个带颜色的横条表示特定类型的事件，横条的长度代表的是该事件从开始到结束的耗时~~
pic
Frames 模式
帧模式从渲染性能的角度提供了数据支撑，一个“frame”表示浏览器为了渲染单个内容块而必须要做的工作（包括：执行js，处理事件，修改DOM，更改样式和布局，绘制页面）！

我们的目标是保证我们的页面要有高于每秒60帧的跑分，这和目前大多数显示器的刷新率相吻合（60Hz）!
pic
这么算的话，我们的应用的每一帧耗时应该低于16.6ms（1000ms/60）
pic
上图中，在Frame视图中有两条贯穿该视图的横线，分别标识出60FPS和30FPS的基准，按照我们刚才提到的那个公式，我们可以理解为分别标识了16.6ms和33.3ms两个时间点~~

图中帧柱的高度表示了该帧的总耗时，帧柱中的颜色分别对应该帧中包含的不停类型的事件！
注意上图中的鼠标位置，该工具条显示了当前选中的帧柱的耗时，可以看到鼠标指上去后会显示出该帧柱的详细数据！

你可能注意到了在帧柱上存在灰色区域和空白区域~~它们分别代表：
灰色区块：那些没有被DevTools感知到的活动
空白区块：显示刷新周期（display refresh cycles）中的空闲时间段
如下图所示：
pic
当你在Frame视图中选择了一个区域，在Timeline面板的最底部（右下方）会统计出你选中的时间范围内的帧柱的统计数据，如下图：
pic
当鼠标指上去后会弹出详细信息，包含下面字段：

  • Selected range：选中的时间段内包含的帧柱数
  • Minimum Time：该时间段里帧柱中的最小耗时
  • Average Time：该时间段里帧柱的平均耗时
  • Maximum Time：该时间段里帧柱中的最大耗时
  • Standard Deviation：计算平均耗时的有效偏差值
  • Time by category：耗时的分布情况

Memory 模式
Memory视图显示了我们的应用的内存使用情况图表，包括页面的文档数，DOM节点数，和没有被垃圾回收掉的仍然在内存中的事件监听器数，如下图：
pic
模拟流程
打开一个你想分析的页面；
打开DevTools的Timeline面板，点击”Record”按钮，或者使用热键：Ctrl + E(Win), Cmd + E(Mac)；
然后在页面上操作你想要了解的功能；
停止记录，分析收集到的记录数据。
收集记录的小技巧

  • 尽可能的缩短记录的时间：确保记录的时间段很短，有利于锁定关注点，避免太多不必要的数据干扰；
  • 避免不必要的操作：同上道理，在记录期间，尽可能只触发你想分析的操作；
  • 关闭浏览器缓存：如果你想分析网络操作细节，你最好关闭浏览器缓存；
  • 关闭浏览器扩展工具：这样可以避免记录到这些第三方插件产生的行为记录，你可以开启浏览器的“隐身模式”

锁定强制同步布局瓶颈
所谓布局（Layout），指的是浏览器计算页面中所有元素的位置和尺寸的过程！通常我们的Chrome会延迟布局计算，这样可以攒够一批变更（css变化或dom结构变化）后一次性执行！但是我们的脚本可以强制浏览器立刻进行布局操作，频繁的进行强制同步布局很可能会造成性能瓶颈！

Timeline面板会用“黄色惊叹号三角标”标注出那些发生的强制浏览器布局，当你查看对应记录详情时，也会在弹出的窗口中看到问题代码的调用堆栈信息，如下：
pic

如果一个记录包含子记录触发了强制布局，那父记录会被一个“浅黄色惊叹号三角标”标识，如下图：
pic

这种子记录是如何产生的呢？原因有二：
1.在执行某个事件的过程中同步产生了其他事件；
2.当打开了底部工具条中的“Glue asynchronous events to causes”开关后，异步事件记录会作为触发该异步事件的记录的子记录。

下面分别举两个例子：
当Chrome尝试去解析一段HTML时，如果发现该HTML引用了一些外部资源，那么Chrome必须先加载这些文件才能完成解析，这就是上面说的第一点，如下图：
pic

在前端浏览器中存在很多异步回调的场景，比方说ajax。由于触发异步和异步回调事件之间可能间隔很长时间，这对于我们分析数据造成了一定程度的不便，所以我们可以打开“Glue asynchronous events to causes”开关，如下图：
pic

心细的童鞋注意到了在上图中展示的第一条记录条中，被标识了不同颜色区块~它们分别对应下面的含义：

  • 左边深色：表示父记录和它的同步子记录的耗时（长度）；
  • 中间稍浅：表示父记录和它的异步子记录的耗时；
  • 右边泛白：表示从第一个异步事件开始到最后一个异步事件结束的耗时。
    如下图：
    pic

当鼠标指向某个记录时，弹出的窗口中显示了该记录详细的数据：

  • Duration：匹配该记录及其子记录的总耗时；
  • Self Time：只包含自己得耗时（不包含子记录）；
  • CPU time：CPU耗时。
    如下图：
    pic

    Timeline中的各种事件

    Loading事件
    pic
    Scripting事件
    pic
    pic
    Render事件
    pic
    Painting事件
    pic
    timeline详解-值的一看;

PROFILES

RESOURCE

Audits

用于页面优化，对网络效率和性能的审查 并且会给出一些建议

pic

DEVICE MODE

REMOTE DEBUGGING

SETTING

sunbaixin wechat
欢迎您扫一扫上面的微信公众号，订阅我的博客！