#Chrome 开发者工具使用技巧分享（一）

作者: 房肥 | 来源:发表于2018-06-17 22:22 被阅读0次

前言：

网站开发者在开发和学习的过程中，都会遇到以下问题，如：

图片无法加载。

样式不正确。

JavaScript无法执行。

无法调试手机页面。

与后台的对接出错...

那么我们排查和处理这些问题的方法，就是使用浏览器的开发者工具，现在就为大家介绍chrome浏览器内的开发者工具的各种使用技巧。阅读本文章需要大家有一定的前端知识，在完成了本教程的学习之后，大家可以学习到以下几点：

调试各种前端bug的能力。

模拟不同的浏览器。

使用chrome内的Toggle Device Toolbar模拟移动设备。

1. 调试窗口的切换

在浏览器窗口内摁下以下按键：
Mac：command + alt + i
Windows： F12
浏览器视窗内点击鼠标右键，选择 <span style="color: #c7254e"> inspect</span> 项目。

2. 调试窗口的布局方式以及切换

<div style="box-shadow: 0px 0px 59px 1px rgba(8,7,8,0.29);">
<img src="https://dn-coding-net-production-pp.qbox.me/be678e2e-a192-43d7-b0c2-238c5c67fd3e.png"/>
</div>
<center style="color: grey">图 - 2.1</center>
如图2.1箭头所指Dock side项目栏，从左至右顺序依次为：

<font color="#c7254e">Undock into separate window</font>：解锁开发者工具窗口，将其独立为一个新的浏览器窗口。
<font color="#c7254e">Dock to left / bottom / right</font>: 分别调整开发者工具在浏览器视窗中的位置。

3. 切换PC与手机端进行测试

通过点击开发者工具左上角按钮(Toggle device toolbar)切换到移动设备调试工具栏。

切换机型

<div style="box-shadow: 0px 0px 59px 1px rgba(8,7,8,0.29);">
<img src="https://dn-coding-net-production-pp.qbox.me/7d252127-aa56-4e69-926e-d11a6a72c2d2.png"/>
</div>
<center style="color: grey">图 - 3.1</center>
图片中移动设备调试栏功能讲解(从左至右)：

切换所需要调试的机型。第一项<font color="#c7254e"> Responsive </font>可以自定义屏幕的逻辑像素，当选择了固定机型之后，逻辑像素栏将锁定不能改动。也可以通过选择Edit...选项去自定义更多的调试内容，下面将详细分析。

自定义调试屏幕的宽高逻辑像素。
自定义屏幕的缩放比。
选择调试设备的网络和硬件等级。
选择横屏和竖屏模式。

辅助工具

<font color="#c7254e">Show/Hide device frame</font>：显示/隐藏移动设备的硬件外框。

<font color="#c7254e">Show/Hide media queries</font>：显示/隐藏设备的媒体查询尺寸。在适配方位中有需要用到媒体查询的时候，这是相对有用的辅助工具，它可以很直观地告诉开发者在各种移动设备下，媒体查询所需要去判断的关键设备尺寸。
<font color="#c7254e">Show/Hide rules</font>：显示/隐藏设备在逻辑像素下屏幕内的尺寸，该功能在对比网页内元素的高低/尺寸是否与设计稿一致上，起到了很好的辅助作用。
<font color="#c7254e">Add device pixel ratio</font>：配置设备的像素比。在开发中需要去为不同像素比的设备做处理的的时候，该功能可以起到自动切换像素比的作用。
<font color="#c7254e">Add device type</font>：配置设备为移动/PC设备，或者为可触摸/不可触摸设备。
<font color="#c7254e">Capture screenshot / Capture full size screenshot</font>：设备内容截图，两个功能的区别的前者仅去截图视窗内的内容，不包括可视区以外的内容，即在页面中出现了滚动条的时候，仅仅去截取滚动到的视区。后者即会去截取该页面内所有的内容。

4. 页面元素的快速调试技巧

打开开发者工具，切换到Elements栏目内，选择页面中的任意元素之后右击，将会出现如图中的选项栏。

操作元素

<font color="#c7254e">Add attribute</font>：增加自定义的元素标签。

<font color="#c7254e">Edit attribute</font>：选中选择的其中一个标签然后右键呼出该选项栏的时候，点击该项目就可以编辑目标标签的内容。

<font color="#c7254e">Edit as HTML</font>：开开发者工具用文本编辑的模式去编辑元素和其子节点的所有内容。在更宽松的自定义的需求下，该功能可以很好的满足开发者的需求。

<font color="#c7254e">Delete Element</font>：删除一个元素及其子节点。

<font color="#c7254e"> Copy </font>：

<font color="#c7254e">Cut / Copy / Paste element</font>：剪切/复制/粘贴元素。该功能在调试移动元素到另外一个元素内，或增加更多节点的时候，起到很好的作用。
<font color="#c7254e">Copy outerHTML</font>：复制一个完整的元素节点。
<font color="#c7254e">Copy selector</font>：复制元素的选择器。在需要用DOM的方式去选取元素的时候，该功能提供了可供选择的DOM选择方式，但仅是支持全局范围下的，不支持上下文选择路径。
<font color="#c7254e">Copy XPath</font>：针对之上Copy selector，该功能提供了支持上下文提示的元素路径选取路径。

<font color="#c7254e">Hide element</font>：chrome浏览器会将元素style内的display设置为none。

<font color="#c7254e">Force state</font>：设置元素的伪类状态active/hover/focus/visited/focus:within。有了该功能，开发者再也不用去手动触发元素的伪类效果，可以直接设置该功能项去触发伪类效果。

<font color="#c7254e">Break on</font>：监听元素改变。

<font color="#c7254e">subtree modifications</font>：监听子元素的节点变化。
<font color="#c7254e">attribute modifications</font>：监听元素标签的改变。
<font color="#c7254e">node removal</font>：监听元素移除时候的变化。

如图我们去监听了元素的attribute modifications之后，我们去改变元素的attribute之后，控制台会进入到该元素被改变时候的断点，并告诉开发者，这个变化发生的原因是在代码的哪一行，是哪一种类型的改变。通过该功能，开发者可以调试用js去改变页面元素的动画，且可以通过不断的迭代断点去一步步调整js控制元素的细节。

<font color="#c7254e">Expand recursively</font>：展开该节点下的所有子元素。在元素嵌套层级非常多的时候，该功能可以迅速查看到深沉子元素，而不需要一层层去查找。

<font color="#c7254e">Collapse children</font>：收起子元素的展开。

<font color="#c7254e">Scroll into view</font>：直接滚动到该元素在页面内的区域。在页面内容较多的情况下，可以通过该功能顺序选取元素并滚动到该元素的区域，从而节省调试时间。

样式细节

通过点开该栏目下的Styles显示台，我们可以查看到该元素目前的样式细节：

filter栏内可以通过关键字直接查找到某class的内容或者是都有用了哪几个color属性。

element.style可以直接给该元素编写行内样式。

点击右上角的.cls可以直接为元素添加一个自定义的class。

在我们所看到的样式表中，#SBmmZd a于#SBmmZd a.active之下是由于在样式权重上，前者要小于后者，所以在整个排列中，我们也可以看到多个样式之间的权重大小顺序。且排列的默认顺序为style->class->inherited。

在每一栏的样式栏目的右上角都有(index: x)的字样，点击进去可以查看到该样式位于哪个文件的哪一行，即查看到该样式的源码内容，开发可以进去到源码中改写并将立即生效新代码。

底部的样式中，出现了user agent stylesheet设置的样式，该样式是由浏览器默认的初始化元素样式，因浏览器的不同可能会有不同的表现，因此也就要求开发者在设置样式的时候需要去统一不同浏览器间的默认初始样式。

在鼠标移动到某样式栏下的时候，右下角将出现该菜单栏，其中你可以增加可支持调试颜色和其他参数的：box-shadow/text-shadow/color/background-color。有了该功能，就更加灵活地调试色彩，大大方便了开发者在没有设计稿的情况下，需要自行设计网站风格的需要。

最终样式与盒模型

在Computed栏目内，开发者可以查看到元素最后渲染的样式属性，并且可以鼠标移入到上方的盒模型图解中，获取到该元素的盒模型结构和数据。在该栏的属性表的上方点击show all选项可以查看到该元素隐藏的默认样式。

元素的事件监听

在Event Listener栏目内，开发者可以查看到元素所绑定的事件列表。点击事件右侧的源码入口，可以找到绑定该事件的代码。

该栏目的顶部有两个可供勾选的选项：

Ancestors：勾选之后将显示除了该节点之外，其祖先实体的所以监听的事件。为了快速定点目标元素所监听的事件，开发者可以默认不去勾选此项。

Framework listener：勾选该项之后会去解析第三方框架/类库的封装代码，告诉开发者实际上该元素绑定事件的代码。举个例子，在我们使用的jquery中，假如我们没有去勾选该项，那么定位到的事件绑定代码就是jquery内的源码，不方便我们去定位业务代码，所以该项在平时使用的时候按需求来启动。

同时，点击事件旁边的Remove可以即时移除该节点所绑定的事件。

元素的断点

于图4.6内的DOM Breakpoints内，我们可以查看到目前页面内我们所去为元素所打了的断点，具体参考前第四节操作元素内Break on选项内容。在本栏目内，开发者可以去编辑是否启用具体元素的断点。

元素的属性(JavaScript)

于图4.6内的Properties内，我们可以查看到目前元素在JavaScript内所具备的属性，其中包括了长、宽、高等等原生的属性，以及其事件属性。

5. 日志

在日常的开发中，我们需要去获取到JavaScript执行时的关键信息，那么我们可以通过开发中工具内的Console功能栏去获取。

打开开发中工具，切换至Console栏内，我们可以看到以下界面（控制台内代码为演示需要，非起始状态）
首先我们注意到，在本栏的最上角有Top选项，该选项可以选择当前框架环境。举个例子，在该页面还有其他iframe的时候，由于当前默认是在页面的顶级环境(Top)中，内部的iframe是获取不到我们在其他框架环境做的操作的，所以这个时候我们就需要去切换框架环境，那么下面的描述都将进行在顶级框架内。

在控制台内，我们可以通过输入代码，做出以下调试：

定义全局变量

const varName = 1; // 在该全局环境中命名变量varName
undefined  // 由于每一次在控制台运行代码，都将默认作为一个匿名函数去运行，所以在这里才会出现一个undefined，表示该函数返回的是undefined。
varName
=> 1 // 输出varName的值
console.log(varName);
=> 1

获取节点

const ele = document.getElementById("spch-dlg"); // 获取节点并赋值给变量ele
undefined
ele // 输出该节点，并获取到节点信息
<dialog class="spch-dlg" id="spch-dlg">…</dialog><div class="spch s2fp-h" style="display:none" id="spch">…</div></dialog>

浏览器语法检测

Promise // 检测是否支持Promise
ƒ Promise() { [native code] }

查看全局属性

window // 查看window下的变量
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

对比对象

在控制台内使用console.table()去做对象的比较。

table()函数的参数较为灵活，通常的使用方式是：
arg1：[Array: objects] 需要对比的对象。
arg1：[Array: string] 需要对比的属性名。
如以上所示，假如我在对比两个属性较多的对象的时候，控制台的版面大小会让信息的显示十分的逼仄，这个时候可以通过第二个参数去定义我们所需要去对比的属性的名字，那么控制台就会只显示对应属性的对比信息。
该函数只做了对比对象子属性的对比，也就是不会去深层对比。
该函数也可以在脚本文件内使用。

显示节点信息

当我们在控制台去获取节点的时候，使用一般的输出方式会只显示一个简单的节点信息，而加入使用了console.dir()函数，就能够去查看到详细的节点属性信息：

记录脚本执行时间

使用console.time()和console.timeEnd()函数，可以让开发者知道某段脚本从开始执行到结束所用去的时间，在下面的例子里生产了一百万个对象，并记录了所需的时间。

更改样式

利用 CSS 格式说明符，开发者可以自定义控制台中的显示。使用说明符启动字符串，并设置为希望的样式，作为第二个参数。

尝试使用下面的代码，并将得到图5.5的输出：

onsole.log("%cBig red text", "color: red; font-size: x-large");

Tip: 在当前页面刷新之后，之前控制台所做的所有操作都会被抹除。

筛选日志

在日志数量较多的时候，开发者可以启用日志的筛选功能，加快获取目的信息的速度：

于图5.6中，点击日志栏左上角Show console sidebar即可呼出左侧的日志信息类型筛选功能。

<font color="#c7254e"> Errors </font>：仅显示console.error()的输出。

<font color="#c7254e"> Warnings </font>：仅显示console.warn()的输出。

<font color="#c7254e"> Info </font>：仅显示console.info()的输出。

<font color="#c7254e"> Logs </font>：仅显示console.log()的输出。

<font color="#c7254e"> Debug </font>：仅显示 console.timeEnd() 和 console.debug() 的输出。

设置

于图5.6中，点击日志栏右上角Console setting即可呼出顶部的设置栏。

<font color="#c7254e">Hide network</font>：默认情况下，控制台将报告网络问题。启用此设置将指示控制台不显示这些错误的日志。例如，将不会记录 404 和 500 系列错误。

<font color="#c7254e">Log XMLHttpRequests</font>：确定控制台是否记录每一个 XMLHttpRequest。

<font color="#c7254e">Preserve log</font>：在页面刷新或导航时保留控制台历史记录。

<font color="#c7254e">Show timestamps</font>：在调用时向显示的每条控制台消息追加一个时间戳。对于发生特定事件时的调试非常实用。并且这会停用消息堆叠。

<font color="#c7254e">Selected context only</font>：只显示当前作用域的日志，参照前文框架环境。

<font color="#c7254e">Autocomplete from history</font>：自动识别用户在控制台内的操作，并做提示补全。