Console的使用——Google Chrome代码调试

Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法，本文通过基本操作、控制台API、命令行API来介绍控制台的使用。

基本操作

1、开启控制台

可以通过下列三种方式开启控制台：

a) 按下Chrome界面右上方的

按钮，选择菜单：更多工具->开发者工具，进入开发者工具界面，点击该界面右上方的

控制台显示按钮。

b) 按下快捷键CTRL-SHIFT-I，打开开发者工具，点击该界面右上方的

控制台显示按钮。

c) 按下快捷键CTRL-SHIFT-J，直接打开调试界面及控制台。

2、清空控制台

可以通过下列两种方式清空控制台：

a) 在控制台内，选择右键快捷菜单：Clear console

b) 在控制台内输入命令：clear()

c) 在javascript代码中使用方法：console.clear()

d) 在控制台内，选择左上角的

按钮。

3、保留日志记录

默认情况下，在页面刷新或跳转到其他页面时，控制台的日志记录全部会清空。此时，若需要进行保留，则需要将控制台的Preserve log选项选中。

4、记录所有XHR请求

若需要对所有XHR请求记录日志，则可以通过右键快捷菜单Log XMLHTTPRequests来实现。

控制台API

1、控制台日志输出

console.log()

log方法可以将括号内的一个或多个表达式以字符串形式输出至控制台。各表达式之间用逗号隔开，逗号的实际效果与加号一样。

代码举例：

结果如下：

2、错误和警告

console.error()——输出错误信息

console.warn()——输出警告信息

error()方法将以红色字体向控制台输出指定的内容，而warn()方法以黑色字体显示输出内容。两者均不会阻断程序代码的运行。两者均支持格式化字符串，与C语言的printf类似，具体支持的格式化类型见后面表格。

代码举例：

结果如下：

3、断言

console.assert(boolean, string)

当第一个参数boolean计算结果为false时，将第二个参数string输出至控制台

4、输出信息分组显示

console.group(groupString)和console.groupEnd()

上述一组方法可将执行group和groupEnd方法期间输出至控制台的信息归属于groupString分组显示。分组可以嵌套。

代码举例：

结果如下：

5、以javascript对象形式格式化DOM元素

默认情况下，console.log()将以XML形式展示DOM元素。

代码举例：

结果如下：

如果希望看到元素拥有哪些属性以及它们的值，那么就需要用到console.dir()方法了，其效果与使用带有%O格式符的console.log()方法一致。

代码举例：

结果如下：

6、以CSS定义风格输出内容

Chrome还可以以指定的CSS格式输出显示指定内容。

代码举例：

结果如下：

7、测量代码执行时间

console.time(nameString)和console.timeEnd(nameString)

控制台输出自执行console.time(nameString)方法开始，直至遇到对应的console.timeEnd(nameString)方法的累积执行时间，单位为ms。使用该组方法可以检测函数的执行时间。

代码举例：

结果如下：

8、设置调试断点
debugger

该代码的效果相当于在所在位置设置了一个调试断点，当程序执行到debugger时，会中断执行等待调试。

注：只有在打开程序员工具时，才有该效果。

9、设置时间轴标签

console.timeStamp(markName)

当执行到timeStamp()方法时，会产生一个时间轴标志。该语句仅在启用时间轴面板录制时有效。关于时间轴面板详见后续文章。

代码举例：

结果如下：(见蓝色选中行时间轴：Timestamp:Adding Timeline)

命令行API

1、计算表达式

说是计算表达式，其实能执行一切javascript脚本，包括函数、JS代码变量的读取和赋值等。注意：这里所做的一切对当前页面立即生效。

2、选择DOM元素

$(condition)和$$(condition)

$()返回符合条件的第一个元素，同 document.querySelector()效果一致。$$()以数组形式返回符合条件的所有元素，同document.querySelectorAll()效果一致。

x(xpath)

返回符合XPath路径的DOM元素。

3、检测DOM元素和javascript堆对象

inspect()

以XML形式展示传入的DOM元素，显示内容与console.log()一致，与$()语句输出一致。若将($_)作为参数传入inspect方法，表示显示最近一次计算的对象。

4、快速选中最近选择的元素

$0、$1、$2、$3、$4分别表示输出最近一个元素、输出倒数第二个元素、以此类推。

5、对象事件监控

monitorEvents(obj, event)

指定监控的对象的所有事件、所有对象的指定事件、指定对象的指定事件。该方法只能指定一个监控对象，但能指定多个事件。有多个事件时，需要以数组的形式传递，如下：

monitorEvents(obj, [event1,event2,……]

由于网页事件是可以冒泡的，所以，监控父对象时，子元素的相同事件一并会被监控到。

代码举例：

结果如下：

6、CPU监控

profile(fileName)、profileEnd(fileName)

在Console里执行profile()方法启动一次CPU跟踪记录，profileEnd()结束本次跟踪。若省略fileName参数，则系统自动给予一个名字。当执行profileEnd()方法时，会将当前调试页面切换到profiles面板，并显示本次跟踪的详细信息。其效果与直接在profiles面板中选择Collect javascript CPU profile一致。

代码举例：

结果如下：

多个profile()、profileEnd()可以相互间嵌套或者交叉。如：

Console的使用——Google Chrome代码调试相关推荐

Chrome - JavaScript调试技巧总结（浏览器调试JS）
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
在Chrome 中调试Javascript
在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript,在本篇内容中,我们讲一下如何在谷歌 Chrome中调试Javascript. C ...
Google Chrome 初试手记
Google 没有失约,今天如约推出了浏览器Google Chrome 测试版 ,下载试试. 1.安装非常简单.不过不是直接的安装,是下载一个文件安装文件后在线安装,嗯,没上网的朋友就无法尝鲜了.同时 ...
Google Chrome调试js代码
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
如何在Google Chrome浏览器中启动JavaScript调试器？
使用Google Chrome浏览器时,我想调试一些JavaScript代码. 我怎样才能做到这一点? #1楼在Chrome浏览器中按F12功能键以启动JavaScript调试器,然后单击" ...
chrome浏览器调试JS代码
是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这 ...
微软高级经理:Google Chrome内有部分微软的代码
一位微软公司的高级产品经理在其blog上谈到了Google推出的浏览器Chrome. 这位产品经理不但业务水平不错,而且非常关心技术,对Chrome有着浓厚的兴趣,特别是对Chrome能如何安全地运行 ...
RAISR-master：google图像新压缩技术RAISR的测试代码调试记录（Python实现，没接触过python的小白，内含pip install解决方案）
RAISR-master:google图像新压缩技术RAISR的测试代码调试记录(Python实现,没接触过python的小白,内含pip install解决方案) 参考文章: (1)RAISR-ma ...
JS And Vue代码调试——IDEA+JS+vue-devtools-dev+JetBrains IDE Support（Chrome插件）
JS代码调试--IDEA+JavaScript Debug+JetBrains IDE Support(Chrome插件) 问题描述解决方案解决步骤问题描述调试JavaScript代码,前端框 ...

Console的使用——Google Chrome代码调试

Console的使用——Google Chrome代码调试相关推荐

最新文章

热门文章