console 立即输出 调试_使用console进行调试入门知识

1.1 概述

调试程序，显示网页代码运行时的错误信息

提供了一个命令行接口，用来与网页代码互动

运行JavaScript命令

1.2 三种打开方式(chrome)

按F12或者Control + Shift + i(PC平台)/ Alt + Command + i(Mac平台)

“工具/开发者工具”

“Inspect Element”

1.1 log()，info()，debug()，warn()，error() 打印

console.info()和console.debug()都是console.log方法的别名，用法完全一样

用来与控制台窗口互动

1.1.1 Console.log

用于在console窗口输出信息

参数格式

第一种

接受多个参数

将它们的结果连接起来输出

会自动在每次输出的结尾，添加换行符

第二种

第一个参数是格式字符串(使用了格式占位符)

console.log方法将依次用后面的参数替换占位符，然后再进行输出

不同格式的数据必须使用对应格式的占位符

%s 字符串 %d 整数 %i 整数 %f 浮点数

%o 对象的链接 %c CSS格式字符串

console.log('%cThis text is styled!','color: red; background: yellow; font-size: 24px;')

两种结合

console.log(' %s + %s ', 1, 1, '= 2') // 1 + 1 = 2

console.log({foo: 'bar'}) // Object {foo: "bar"}

console.log(Date) // function Date() { [native code] }

1.1.2 Console.warn警告

输出信息时，在最前面加一个黄色三角，表示警告

1.1.3 Console.error错误

输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈

1.1.4 Console.table打印出对象表格

可以将某些复合类型的数据转为表格显示

var languages = [

{ name: "JavaScript", fileExtension: ".js" },

{ name: "TypeScript", fileExtension: ".ts" },

{ name: "CoffeeScript", fileExtension: ".coffee" }

]; console.table(languages);

复合型数据转为表格显示的条件是，必须拥有主键

对于数组来说，主键就是数字键

对于对象来说，主键就是它的最外层键

1.1.5 Console.count调用次数

用于计数，输出它被调用了多少次

接受一个字符串作为参数，作为标签，对执行次数进行分类

console.count('cc')//cc: 1 console.count('cc')//cc: 2

dir()，dirxml()

1.1.6 Console.dir打印对象阅读格式

用来对一个对象进行检查(inspect)，并以易于阅读和打印的格式显示

console.dir({f1: 'foo', f2: 'bar'})

// Object

// f1: "foo"

// f2: "bar"

// __proto__: Object

该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性

1.1.7 Console.dirxml将DOM节点树状图打印

用于以目录树的形式，显示DOM节点

如果参数不是DOM节点，而是普通的JavaScript对象，console.dirxml等同于console.dir

1.2 Console.assert(boolean,”字符串”)判断逻辑是否正确

接受两个参数，第一个参数是表达式，第二个参数是字符串

只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果

console.assert(typeof 11 === "number","11不是number类型");没有报错

1.3 time(“同样的字符串”)，timeEnd(”同样的字符串”)计时

这两个方法用于计时，可以算出一个操作所花费的准确时间

1.3.1 Time

表示计时开始，在程序最前面使用

1.3.2 timeEnd

程序结束时使用，表示计时结束

它们的参数是计时器的名称

调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”

1.3.3 group()，groupend()，groupCollapsed()折叠

console.group和console.groupend这两个方法用于将显示的信息分组

它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开

console.groupCollapsed方法与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的(collapsed)，而不是展开的

1.4 trace()，clear()调用路径,清除

1.4.1 Console.trace

显示当前执行的代码在堆栈中的调用路径

1.4.2 Console.clear

用于清除当前控制台的所有输出，将光标回置到第一行

2命令行API

在控制台中，除了使用console对象，还可以使用一些控制台自带的命令行方法。

2.1 $_

返回上一个表达式的值

2.2 $0 - $4

控制台保存了最近5个在Elements面板选中的DOM元素，$0代表倒数第一个，$1代表倒数第二个，以此类推直到$4

2.3 $(selector)

返回一个数组，包括特定的CSS选择器匹配的所有DOM元素。该方法实际上是document.querySelectorAll方法的别名

2.4 $$(selector)取DOM

返回一个选中的DOM对象，等同于document.querySelectorAll

2.5 $x(path)

返回一个数组，包含匹配特定XPath表达式的所有DOM元素

2.6 nspect(object)取DOM和JS

打开相关面板，并选中相应的元素：DOM元素在Elements面板中显示，JavaScript对象在Profiles面板中显示

2.7 getEventListeners(object)取对象和所有事件

返回一个对象，该对象的成员为登记了回调函数的各种事件(比如click或keydown)

每个事件对应一个数组，数组的成员为该事件的回调函数

2.8 keys(object)，values(object)取数组键名和值

2.8.1 keys(object)

返回一个数组，包含特定对象的所有键名

2.8.2 values(object)

返回一个数组，包含特定对象的所有键值

2.9 monitorEvents(object[, events])，unmonitorEvents(object[, events])

2.9.1 monitorEvents(object[, events])监听对象和事件

监听特定对象上发生的特定事件

当这种情况发生时，会返回一个Event对象，包含该事件的相关信息

2.9.2 unmonitorEvents

用于停止监听

monitorEvents(window, "resize");

monitorEvents(window, ["resize", "scroll"])

unmonitorEvents(window, 'resize');

####2.10监听同一大类事件(四个大类)

>######1. mouse：

”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”

######2. key：

”keydown”, “keyup”, “keypress”, “textInput”

######3. touch：

”touchstart”, “touchmove”, “touchend”, “touchcancel”

######4. control：

”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

####2.11 profile([name])，profileEnd()CPU性能测试

####2.11.1 Profil

> - 用于启动一个特定名称的CPU性能测试

####2.11.2 profileEnd

> - 用于结束该性能测试

###2.12其他方法

####2.12.1 clear()

> - 清除控制台的历史

####2.12.2 copy(object)

> - 复制特定DOM元素到剪贴板

####2.12.3 dir(object)

> - 显示特定对象的所有属性，是console.dir方法的别名

####2.12.4 dirxml(object)

> - 显示特定对象的XML形式，是console.dirxml方法的别名。

###3 debugger设置断点

> - 用于除错，作用是设置断点

- 如果有正在运行的除错工具

- 程序运行到debugger语句时会自动停下

- 如果没有除错工具

- debugger语句不会产生任何结果，JavaScript引擎自动跳过这一句

- 在Chrome浏览器中，当代码运行到debugger语句时，就会暂停运行，-

自动打开控制台界面

>

for(var i = 0; i < 5; i++){

console.log(i);

if (i === 2) debugger;

}

- 上面代码打印出0，1，2以后，就会暂停，自动打开控制台，等待进一步处理