chrome除了使用F10和F11,还有什么可以使用到?(二)

@XYooo 2017-10-09 10:43:31发表于 iuap-design/blog

上篇文章chrome除了使用F10和F11,还有什么可以使用到?(一)主要讲的是snippets和javascript断点。本篇文章将一些动画、配置自定义网络性能以及dom断点

(一)压缩代码格式化

有时候打包出来的代码是压缩过的代码,为了减小应用的体积。css/js的代码被 minify 掉,你可以点击代码窗口左下角的那个 { } 标签,chrome会帮你给格式化掉。 如下图所示:

这里写图片描述

(二)选择DOM的状态

有些dom是有状态的,比如a标签的active,hover, focus,visited这些状态。

CSS给不同的状态添加不同的样式,我们可以点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。或者鼠标右键选择。如下图所示:

这里写图片描述

(三)动画

1.概述:

现在的网页上都会有一些动画效果。在Chrome的开发者工具中,通过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。
因为涉及到很多内容,于是先看下图:

这里写图片描述

Animation Inspector(动画检查器)分为四个主要部分(或窗格)。请看下图中对应编号的说明:

  • Controls(控件) - 从此处可以清除所有当前捕获的动画组或更改当前选定动画组的速度

  • Overview(概述) - 在此处选择一个动画组以在 Details(详细)窗格中检查和修改它。

动画组是一组看起来彼此相关的动画。运动设计师和开发人员必须组合和计时单个动画,以使它们看起来是一个连贯的视觉效果。Animation Inspector(动画检查器)根据开始时间(不包括延迟等)预测哪些动画相关,并将它们并排分组。换句话说,在同一脚本块中触发的一组动画会被分到一组,但如果它们是异步的,那么它们将被分别分组。

  • Timeline(时间轴) - 暂停并从此处开始播放动画,或跳到动画中的特定点。
  • Details(详细) - 检查并修改当前选定的动画组。

2.检查动画

一旦你捕获到动画后,这里有几种方法可以重播动画:

①将鼠标悬停在 Overview(概述) 窗格中的缩略图上,可预览该动画。

②从 Overview(概述) 窗格中选择动画组(以便它在Details(详细)窗格中显示)并按下replay(重播)按钮(replay button)。动画将在可视窗口中重新播放。

③点击animation speed(动画速度)按钮(动画速度按钮)可更改当前选定动画组的播放速度。

您可以使用在Details(详细)和Timeline(时间轴)窗格中红色直立的时间轴控制条来更改动画执行的当前位置。

单击并拖动红色直立的时间轴控制条来预览可视窗口中的动画。

这里写图片描述

(四)直接编辑网页

在你的 console 里 输入下面的命令:

document.designMode = "on"

于是你就可以直接修改网页上的内容了。(超级方便的)

P.S. 一个如何清空console的示例。你可以输入 clear() 或是 按 Ctrl+L(Windows下),CMD + K (Mac下)

(五)评估网络性能-模拟网络连接

1.Network Conditioning(网络调节) 允许您在各种网络环境中测试您的网站,包括Edge,3G,甚至离线。 它限制最大下载和上传流量(数据传输速率)。在链接round-trip时间上强制延迟。

2.Network Conditioning(网络调节)通过Network(网络)面板打开。从下拉列表中选择一个连接,可以应用网络节流。

这里写图片描述

当网络节流开启后,Network(网络)面板名字旁会出现一个警告图标。这是为了当您在其他面板中时给你一个提醒:当前网络节流已经启用。

这里写图片描述

3.自定义网络节流。DevTools提供了非常实用的默认条件。如果你要覆盖原来的条件,您可能需要添加自定义条件。

要添加条件,在Network(网络)面板中点击打开网络节流的下拉列表。在custom(自定义)选项组下找到并选择Add...(添加)选项。 这将打开DevTools Settings(设置)对话框中的Throttling(节流)选项卡。

这里写图片描述

下面是一些网络规格,可供参考

这里写图片描述

(六)复制HTTP请求

你可以在 network选项卡里,点击 XHR 过滤相关的Ajax请求,然后在相关的请求上点鼠标右键,在菜单中选择: Copy => Copy as cURL,然后就可以到你的命令行下去 执行 curl 的命令了。这个可以很容易做一些自动化的测试。 (并没有使用过)

(七)带有手机壳的调试

在device显示中,先选择一个手机,然后在右上角选 Show Device Frame,然后你就看到手机的样子了,然后再到那个菜中中选 Capture snapshot,就可以抓下一个有手机样子的截图了。

(八)给DOM设置断点

除了给Javascript的源代码上设置断点调试(上篇文章),你还可以:

设置DOM断点可以用来调试复杂的JavaScript应用程序。例如,如果你的JavaScript改变了DOM元素的样式,设置一个DOM断点当元素的属性被修改时触发。
选中一个DOM,然后在右键菜单中选 Break on … 在以下DOM更改都会触发断点:子树的变化,属性改变,节点删除。

这里写图片描述

1. Subtree Modifications 子树修改

当子元素被添加,删除或移动时,会触发Subtree Modifications(子树修改)断点。例如,如果在main-content元素上设置一个Subtree Modifications(子树修改)断点,以下代码会触发该断点:

var element = document.getElementById('main-content');
//modify the element's subtree.

var mySpan = document.createElement('span');

element.appendChild( mySpan );

2.Attribute Modifications 属性修改

当一个元素(类,id,name)的属性动态改变时,会触发Attribute Modifications(属性修改)断点:

var element = document.getElementById('main-content');
// class attribute of element has been modified.

element.className = 'active';

3.Node Removal 节点移除

当一个节点从DOM中删除时,会触发Node Removal(节点移除)断点:

document.getElementById('main-content').remove();

与DOM断点的交互

Elements(元素)和Sources(源文件)面板中包含了用于管理DOM断点的窗格。

每个断点都列出了一个元素标识符和断点类型。如图所示:

这里写图片描述

通过以下任何一种方式与每个列出的断点交互:

①将鼠标悬停在元素标识符上以显示元素在页面上的相应位置(类似于悬停在Elements(元素)面板中的节点上)。
②单击元素以在Elements(元素)面板中选择它。
③切换复选框以启用或禁用断点。
当你触发一个DOM断点,断点在DOM Breakpoints(DOM断点)窗格中突出显示。Call Stack(堆栈)窗格显示调试器暂停的原因:

这里写图片描述

(九)查看元素事件监听器

在Event Listeners(事件侦听器)窗格中查看与DOM节点相关联的JavaScript事件。

这里写图片描述

Event Listeners(事件侦听器)窗格中顶级的项显示注册的事件类型。

点击事件类型旁边的箭头(例如click),可以看到已注册的事件处理程序的列表。每个处理程序由类似CSS选择器的元素标识符标识,例如document或button#call-to-action。如果同一个元素注册了多个处理程序,元素会被重复列出。

点击展开箭头以查看事件处理程序的属性。每个侦听器列出以下属性

这里写图片描述

1.查看祖先的事件监听器

当勾选Ancestors(祖先)复选框时,除了当前选中节点的事件侦听器,还会显示当前选中节点的祖先元素的事件侦听器。

当取消勾选该复选框时,仅显示当前选定节点的事件侦听器。如下图所示:

这里写图片描述

这里写图片描述

这里写图片描述

2.查看框架监听器

一些JavaScript框架和库将原生DOM事件封装到自定义事件API中。在过去,这使得很难用DevTools检查事件侦听器,因为函数定义只是引用框架或库代码。Framework listeners(框架侦听器)功能解决了这个问题。

当勾选Framework listeners(框架侦听器)复选框时,DevTools自动解析框架或库封装事件的代码,然后告诉你,代码中实际绑定事件的位置
这里写图片描述

当取消勾选Framework listeners(框架侦听器)复选框时,事件侦听器代码可能会解析框架或库代码中的某处。

这里写图片描述

(十)给XHR和Event Lisener设置断点

在 Sources 面页中,你可以看到右边的那堆break points中,除了上面我们说的给DOM设置断点,你还可以给XHR和Event Listener设置断点(暂时没有使用过),如图所示:

这里写图片描述