Chrome控制台console.log调试技巧与API详解

Chrome控制台简介与基础使用

浏览器种类繁多，各具特色。就个人使用体验而言，Google Chrome在脚本调试和前端设计方面表现尤为出色，甚至优于其他浏览器。许多开发者可能认为使用alert进行调试已足够，何必使用冗长的console.log？本文将介绍一些入门级的调试技巧，帮助你发现console.log的强大之处。

首先简要介绍Chrome的控制台功能。启动Chrome浏览器后，按下F12键即可快速打开控制台界面。

打开控制台后，你会看到其中包含一些默认信息。若想清空控制台内容，可以点击左上角的按钮；此外，也可以在控制台输入console.clear()命令来实现清空操作，具体效果如下图所示。

假设有一个包含成百上千个元素的数组，你需要查看每个元素的具体值。如果使用alert，将会非常痛苦，因为alert会阻断线程运行，必须点击确定按钮后才会执行下一个alert。

此时，使用console.log来替代alert，你将感受到其带来的便利与魅力。

通过上述示例，你是否已经认识到log的强大功能？接下来，我们将详细介绍控制台提供的其他调试方法。

Console核心输出方法详解

目前控制台提供的方法和属性包括：

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下面我们将逐一介绍这些方法的主要用途。

在日常调试中，我们主要使用以下四种方法进行信息输出。

1、console.log：用于输出普通信息。

2、console.info：用于输出提示性信息。

3、console.error：用于输出错误信息。

4、console.warn：用于输出警示信息。

5、console.debug：用于输出调试信息。

通过图形展示可以更直观地理解这些方法的使用效果。

上述console对象的五种方法均支持printf风格的占位符。不过，占位符种类有限，仅支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种格式。

console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);

%o占位符可用于查看对象内部的具体情况。

var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);

高级调试功能：DOM与性能分析

6、console.dirxml：用于显示网页中某个节点（node）所包含的html或xml代码。

<body>
  <table id="mytable">
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>bbb</td>
      <td>aaa</td>
      <td>ccc</td>
    </tr>
    <tr>
      <td>111</td>
      <td>333</td>
      <td>222</td>
    </tr>
  </table>
</body>
<script type="text/javascript">
  window.onload = function () {
    var mytable = document.getElementById(‘mytable‘);
    console.dirxml(mytable);
  }
</script>

7、console.group：用于输出一组信息的开头。

8、console.groupEnd：用于结束一组信息的输出。

根据需求选择适当的输出方法，若将上述四种方法与group和groupEnd结合使用，即可生成各种形式的输出信息。

这种组合方式是否让你感到神奇？

9、console.assert：对输入的表达式进行断言，仅当表达式结果为false时，才将相应信息输出到控制台。

10、console.count：此方法非常实用，用于统计代码被执行的次数。

11、console.dir：这是我经常使用的方法，比for in循环方便得多。它直接将DOM节点以DOM树结构输出，便于详细查看对象的方法及属性发展。

12、console.time：用于开始计时。

13、console.timeEnd：用于结束计时（通过下方的示例图，你将瞬间感受到其强大之处）。

14、console.profile和console.profileEnd：配合使用以查看CPU使用相关信息。

在Profiles面板中即可查看相关的CPU使用信息。

15、console.timeLine和console.timeLineEnd：配合使用以记录一段时间轴。

16、console.trace：用于堆栈跟踪相关的调试。

上述方法仅为个人理解。如需查看具体API文档，可访问官方地址：https://developer.chrome.com/devtools/docs/console-api。

控制台快捷键与高级技巧

以下是控制台的一些快捷键使用说明。

1、方向键盘的上下键：使用后一目了然。例如，按上键相当于使用上次在控制台输入的符号。

2、$_命令：返回最近一次表达式执行的结果，功能与按向上方向键再回车相同。

上述的$_需要深入理解其奥义才能恰当使用，而$0~$4则代表了最近5个你选择过的DOM节点。

具体含义是：在页面右击选择审查元素，然后在弹出的DOM结点树上随意点选，这些被点过的节点会被记录下来。$0返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点。系统最多保存5个节点，若不足5个，则返回undefined。

3、Chrome控制台原生支持类jQuery的选择器，即你可以使用$配合熟悉的CSS选择器来选择DOM节点。

4、copy命令：通过此命令可以将控制台获取到的内容复制到剪贴板。

（哈哈，刚刚从控制台复制的body里面的html可以任意粘贴到任何地方，比如记事本，是不是觉得功能很强大？）

5、keys和values：前者返回传入对象所有属性名组成的数组，后者返回所有属性值组成的数组。

说到这里，不禁让人想起console.table方法。

6、monitor与unmonitor。

monitor(function)接收一个函数名作为参数，例如function a。每次a被执行时，控制台都会输出一条信息，其中包含函数名称a及执行时传入的参数。

而unmonitor(function)则用于停止对该函数的监听。

通过观察这张图，你应该能明白：在monitor和unmonitor之间的代码执行时，控制台会输出一条信息，包含函数名称a及传入参数。当解除监视（即执行unmonitor）时，控制台将不再输出信息。

$ // 简单理解为 document.querySelector。 $$ // 简单理解为 document.querySelectorAll。 $_ // 是上一个表达式的值 $0-$4 // 是最近5个Elements面板选中的DOM元素，稍后会有讲解。 dir // 其实就是 console.dir keys // 取对象的键名，返回键名组成的数组 values // 取对象的值，返回值组成的数组

console.log高级应用技巧

接下来看一下console.log的一些高级技巧。

1、重写console.log以改变输出文字的样式。

2、利用控制台输出图片。

3、指定输出文字的样式。

最后介绍一个Chrome控制台的基本操作：如何查看页面元素，如下图所示。

你在控制台中简单操作一遍即可掌握，是不是觉得非常简单！