Chrome 控制台实用技巧-京东云开发者社区

许多程序员仅知道 Chrome 的 console.log，其实控制台 API 还包含一些其他实用的方法，这些方法在对时间有要求的情况下非常有用，能够大大提高工作效率。

#### 打开Chrome控制台的方式 （F12）：
1.菜单-> 更多工具-> 开发者工具；
2.按 F12或者 Ctrl + Shift + i（PC 端）/Alt + Command + i(Mac 平台)；
3.在一个页面元素上，打开右键菜单，选择 -> "审查元素"。

#### copy 函数
copy 函数可以将在控制台获取到的内容(DOM对象，基本类型、引用类型等等，JSON，任何变量)复制到剪贴板。
##### copy 函数示例：
![](//img1.jcloudcs.com/developer.jdcloud.com/440f9921-7617-4436-b75c-511ed2f5c71720210223142218.png)

然后就可以到处粘贴了，使用者可以将其粘贴到任意文本编辑器。上例只采用了很简单的对象，如果从后端 API 返回一个非常复杂的对象就非常有用了，而且 copy 后的对象还自带格式化。

##### 如图保存为全局变量：
![](//img1.jcloudcs.com/developer.jdcloud.com/14aabb7b-67c6-4026-a626-9ecde8d70ae720210223142257.png)

##### 生成全局变量后，再执行 copy(temp1)
![](//img1.jcloudcs.com/developer.jdcloud.com/693f52df-d109-4f19-b8b9-fe3a7063489b20210223142324.png)

#### console.dir

如果要查看对象的所有属性和方法，console.dir 方法要比 console.log 更加实用，使用 dir 和 log 在控制台上输出的效果如下：

![](//img1.jcloudcs.com/developer.jdcloud.com/4f371806-81da-452b-8ddc-2c31c9c966ec20210223142355.png)

使用者可以输出 DOM 元素的所有属性和方法：

![](//img1.jcloudcs.com/developer.jdcloud.com/39b132f6-18d3-41df-a3c6-a558216d4b6820210223142419.png)

#### console.time 和 console.timeEnd
使用者可以跟踪一个函数的调用所消耗的时长，这对优化代码很有帮助，如下代码：

![](//img1.jcloudcs.com/developer.jdcloud.com/7c531750-86fd-4e0a-9dc0-3067ddda93a020210223142458.jpg)

time 方法表示计时开始，timeEnd 方法表示计时结束。它们的参数是计时器的名称。调用 timeEnd 方法之后，console 窗口会显示“计时器名称: 所耗费的时间”。

#### console.error 和 console.warn
console.error 和 console.warn 的用法和console.log一样，它们的好处在于会提供栈追踪，合理使用 error 和 warn 有助于更快速的定位问题，效果如图：

![](//img1.jcloudcs.com/developer.jdcloud.com/2b341cce-2147-490f-892d-d5137e3c64d820210223142533.png)

#### console.clear
console.clear 可以清空控制台，效果如图所示：

![](//img1.jcloudcs.com/developer.jdcloud.com/b8951f8c-0e27-464d-82ea-8e0f34cd20d420210223142916.png)

##### $(selector) 和 $$(selector)
Chrome原生支持 类 jQuery 选择器。
•$(selector) 返回满足条件的第一个DOM元素
•$$(selector) 返回满足条件的所有DOM元素

![](//img1.jcloudcs.com/developer.jdcloud.com/1bf77ea3-3d51-41d8-afe3-b6aade10407020210223142948.png)

•实际上 $(selector) 是对 原生 JavaScript 的 document.querySelector() 的封装
•实际上 $$(selector) 是对 原生 JavaScript 的 document.querySelectorAll() 的封装

#### 其它 API
console.table(), console.count(), console.info(), console.assert 等，各自有不同的效果，可以自行尝试。

![](//img1.jcloudcs.com/developer.jdcloud.com/42ab872b-bc61-4634-b1bb-8af7cc4580ed20210223143025.png)

console 的打印方法都支持格式化输出，支持的格式标志有:

![](//img1.jcloudcs.com/developer.jdcloud.com/7ca0a1a2-4eb5-475a-8ec5-f4656dc0014820210223143048.png)

##### 还支持自定义输出样式，增加样式示例如下：

console.log(
   `%c vue-devtools %c Detected Vue v2.5.21 %c`,
   'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
   'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff',
   'background:transparent'
 )
![](//img1.jcloudcs.com/developer.jdcloud.com/4a6fa2c9-4c15-46e6-9856-bd69b371bb3c20210223143144.png)

#### Chrome Lighthouse 功能
![](//img1.jcloudcs.com/developer.jdcloud.com/4e919405-7bd0-4d15-8f50-f8a3b26c215920210223143210.png)

可能很多 Web 开发人员都没有听说过这个工具，而那些听说过的人，还没有尝试过，在这里给大家做一个简单的介绍：

##### 根据 Google Developers Docs 上的描述

Lighthouse 是一种开源的自动化工具，用于提高网页质量。你可以在任何网页上运行它。它能够针对性能、可访问性、渐进式 Web 应用等进行审核。
使用者可以在 Chrome DevTools 中从命令行运行 Lighthouse，也可以作为 Node.js 模块运行。当使用者向 Lighthouse 提供了一个 URL 来进行审核时，它会针对该页面运行一系列审核，然后生成一个关于该页面执行情况的报告。这份报告可以作为如何改进页面的指标。每次审核都会产生一份参考文档，解释了这些审核为什么重要，以及如何解决等内容。

它会审核 Web 应用的 URL 并根据 Web 标准和开发人员最佳实践生成一份报告，告诉使用者 Web 应用的糟糕程度。

**在这里可以找到这个功能：**

![](//img1.jcloudcs.com/developer.jdcloud.com/c9ccd61f-3e9d-4e15-a035-8f57ab473d5d20210223143320.jpg)

**以 baidu.com 为例，点击 Generate report 进行分析，审核报告如下：**

![](//img1.jcloudcs.com/developer.jdcloud.com/3d01333a-fbb9-48a9-9274-92870adb390320210223143347.jpg)

当我们开始使用 Lighthouse 时，实际上学到了很多优化和性能标准。

#### 总结

Chorme 控制台还有很多强大的功能帮助我们提高开发效率和网站的性能。相信每个使用者都能很快成为能够构建具有性能出色、可访问性和用户体验极致的 Web 应用专家。

------------

###### 自猿其说Tech-JDL京东物流技术发展部
###### 作者：用户产品部 王春雨