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以后,就会暂停,自动打开控制台,等待进一步处理