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