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