第 2 章 Chrome 控制台

第 2 章 Chrome 控制台

许多程序员仅知道 Chrome 的 console.log,其实控制台 API 还包含一些其他实用方法,这些方法在对时间有要求的情况下特别有用。

2.1 copy 函数

代码清单 2-1 展示了如何将已有对象的 JSON 表达式复制到缓冲区。

代码清单 2-1 copy 函数示例

现在,该 JSON 表达式已经在你的复制粘贴缓冲区中了,你可以将其粘贴到任意文本编辑器中。本例中只采用了 x 这个简单的自定义对象。请想象一下从数据库 API 返回一个非常复杂的对象的情形。

注意:如果仅返回 JSON,就意味着方法并不会将其复制到缓冲区中(JSON 字符串格式并不支持方法,仅支持属性)。

2.2 console.dir

如果要查看所有对象的属性和方法,可以使用 console.dir 方法,直接将它们打印到控制台上,如代码清单 2-2 所示。

代码清单 2-2 console.dir 方法示例

神奇的是,你甚至可以输出 DOM 元素,如代码清单 2-3 所示。

代码清单 2-3 输出 DOM 元素

2.3 console.error

console.error 的用法如代码清单 2-4 所示。

代码清单 2-4 console.error 方法示例

console.error 的好处在于它会提供栈追踪,如代码清单 2-5 所示。

代码清单 2-5 栈追踪

2.4 console.timeconsole.timeEnd

你可以跟踪函数调用所消耗的时间,这对优化代码很有帮助,如代码清单 2-6 所示。

代码清单 2-6 跟踪函数调用所消耗的时间

控制台输出如图 2-1 所示。

图 2-1 控制台输出示例

2.5 console.clear

console.clear 的效果如图 2-2 所示。

图 2-2 清空控制台

2.6 打印对象

在 JavaScript 中,所有的对象都拥有 toString 方法。当将一个对象传递给 console.log 时,它可以将其作为对象或字符串进行打印,如代码清单 2-7 所示。

目录

  • 版权声明
  • 前言
  • 第 1 章 讲述形式
  • 第 2 章 Chrome 控制台
  • 第 3 章 欢迎使用 JavaScript
  • 第 4 章 语句
  • 第 5 章 基本类型
  • 第 6 章 强制类型转换
  • 第 7 章 作用域
  • 第 8 章 运算符
  • 第 9 章 ...rest 和 ...spread
  • 第 10 章 闭包
  • 第 11 章 循环
  • 第 12 章 数组和字符串
  • 第 13 章 函数
  • 第 14 章 高阶函数
  • 第 15 章 箭头函数
  • 第 16 章 动态创建 HTML 元素
  • 第 17 章 原型
  • 第 18 章 面向对象编程
  • 第 19 章 事件
  • 第 20 章 网络请求
  • 第 21 章 事件循环
  • 第 22 章 调用栈
  • 作者简介