1.console对象可以输出各种信息到控制台。浏览器实现，可以使用下面三种方法的打开它。

  • 按 F12 或者Control + Shift + i
  • 浏览器菜单选择“工具/开发者工具”。
  • 在一个页面元素上，打开右键菜单，选择其中的“检查元素(Inspect Element)”。

2.打开开发者工具以后，顶端有多个面板。

  • Elements：查看网页的 HTML 源码和 CSS 代码。
  • Resources：查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage)。
  • Network：查看网页的 HTTP 通信情况。
  • Sources：查看网页加载的脚本源码。
  • Timeline：查看各种网页行为随时间变化的情况。
  • Performance：查看网页的性能情况，比如 CPU 和内存消耗。
  • Console：用来运行 JavaScript 命令。

3.console 对象的静态方法。

  • console.log()用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。console.log方法会自动在每次输出的结尾，添加换行符。
  • console.info()是console.log()的别名，用法完全一样。只不过console.info()会在输出信息的前面，加上一个蓝色图标。
  • console.debug()与console.log()类似，会在控制台输出调试信息。但是，默认情况下，console.debug()输出的信息不会显示。
  • console.warn()输出信息时，在最前面加一个黄色三角，表示警告。
  • console.error()输出信息时，在最前面加一个红色的叉，表示出错。
  • console.table()可以将某些复合类型的数据，转为表格显示。
  • console.count()用于计数，输出它被调用的次数。
  • console.dir()用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
  • console.dirxml()方法主要用于以目录树的形式，显示 DOM 节点。
  • console.assert()主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。
  • console.time()表示计时开始，用于计时，可以算出一个操作所花费的准确时间。
  • console.timeEnd()表示计时结束，用于计时，可以算出一个操作所花费的准确时间。
  • console.group()和console.groupEnd()这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
  • console.groupCollapsed()与console.group()很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
  • console.trace()显示当前执行的代码在堆栈中的调用路径。
  • console.clear()用于清除当前控制台的所有输出，将光标回置到第一行。

4.控制台命令行。

  • $_属性返回上一个表达式的值。
  • $0 - $4,控制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个(最近一个)。
  • $(selector)返回第一个匹配的元素，等同于document.querySelector()。
  • $$(selector)返回选中的 DOM 对象，等同于document.querySelectorAll。
  • $x(path)方法返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。
  • inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节。
  • keys(object)方法返回一个数组，包含object的所有键名。
  • values(object)方法返回一个数组，包含object的所有键值。
  • monitorEvents(object[, events])方法监听特定对象上发生的特定事件。

5.debugger语句主要用于除错，作用是设置断点。如果有正在运行的除错工具，程序运行到debugger语句时会自动停下。如果没有除错工具，debugger语句不会产生任何结果，JavaScript 引擎自动跳过这一句。