Chrome开发工具 使用控制台

个数据提供属性并且创建一个头。行数据将会从每一个索引属性值中获取。控制台中一个使用 2 个数组的示例的显示。示例代码：console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);console.table([[1,2,3], [2,3,4]]);输出的示例代码的结果：table() 中的第二个参数是可选项。你可以定义任何你想显示的属性字符串数组。一个使用了对象集合的控制台输出表。示例代码：function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age;}var family = {};family.mother = new Person("Susan", "Doyle", 32);family.father = new Person("John", "Doyle", 33);family.daughter = new Person("Lily", "Doyle", 5);family.son = new Person("Mike", "Doyle", 8);console.table(family, ["firstName", "lastName", "age"]);示例代码的输出:字符串的替换和格式化任何日志方法的第一个参数可能都会包含一个或者多个格式说明符。一个说明符由一个 % 符号和后面跟着的字符组成，这个字符用来定义用于格式化的值。这个参数跟随的字符串就是占位符中所要显示的。下面的例子使用了字符串和数字格式来插入要输出的字符串。你将会看到在控制台中 Sam 有 100 个点。console.log("%s has %d points", "Sam", 100);完整的格式化说明符如下：%s格式化成 string%i 或者 %d格式化成 integer%f格式化成一个浮点类型%o格式化成一个可扩展的 DOM 元素。就跟在元素面板中看到的一样%o格式化成一个可扩展的 JavaScript%c通过第二个参数来申请一个 CSS 风格的输出字符串这个例子使用了数字占位符来格式化 document.childNodes.length 的值。它也同样使用了浮点类型的占位符来格式化 Date.now();代码如下：console.log("%s has %d points", "Sam", 100);示例替代的输出示例代码的输出预览将 DOM 元素格式化成 JavaScript 对象当你想要在控制台中记录一个 DOM 元素，就显示成了 XML 格式。在元素面板中也会是同样的显示。要显示 JavaScript 格式的信息，你可以使用 dir() 方法或者是在 log() 中使用占位符来替换成你的 JavaScript。两种不同显示的区别：log() 视图dir() 视图使用 CSS 样式来更改控制台输出形式CSS 格式说明符可以修改在控制台中输出的样式。以你要修饰的文字配上占位符开始，然后在第二个参数中写上你要展示的风格。更改日志样式示例代码：console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");示例代码的输出结果。计算时间开销通过 time() 方法可以启动一个计时器。你必须输入一个字符串来识别时间的标记。当你要结束计算的时候，使用 timeEnd() 方法，并且传递一个相同的字符串给构造器。控制台会在 timeEnd() 方法结束的时候，记录下标签以及时间的花销。关于 JavaScript 执行时间的示例代码以及输出：示例代码：console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); };console.timeEnd("Array initialize");在控制台上的输出结果：当 time() 方法正在执行期间，将会生成一个 时间轴 记录并为其做出注解。这对于追踪应用的使用以及其来源非常有用。time() 执行时间轴上的注解是如何显示的。制作时间轴时间轴面板提供了关于引擎时间开销的完整概述。你可以在控制台中调用 timeStamp() 添加一个标记到时间轴中。这是将你的应用的事件和其他事件相关联的一个简单的办法。注意：只有在时间轴记录正在运行的时候 timeStamp() 方法才能使用。timeStamp() 在下面的地方给时间轴做注解：在时间轴的总结和详细视图中的黄色垂线处在事件列表中添加了一个记录示例代码如下：function AddResult(name, result) { console.timeStamp("Adding result"); var text = name + ': ' + result; var results = document.getElementById("results"); results.innerHTML += (text + "<br>");}时间轴中的时间戳在 JavaScript 中设置断点调试器 声明将会开启一个调试会话。这就相当于在这一行中的脚本上设置一个断点。使用 brightness() 开启调试会话。示例代码：brightness : function() { debugger; var r = Math.floor(this.red*255); var g = Math.floor(this.green*255); var b = Math.floor(this.blue*255); return (r * 77 + g * 150 + b * 29) >> 8;}示例代码的输出：记录语句的执行count() 方法将会记录提供的字符串以及该字符串在一段时间内的出现次数。这个字符串可能含有动态的内容。当已经传给 count() 一个完全相同的字符串时，计数就会增加。使用动态内容的 count() 例子：示例代码：function login(user) { console.count("Login called for user " + user);}users = [ // by last name since we have too many Pauls. 'Irish', 'Bakaus', 'Kinlan'];users.forEach(function(element, index, array) { login(element);});login(users[0]);示例代码使出的内容：使用命令行 API命令行比一个简单的日志输出目录要强大的多。它在当前网页中，同样是一个全终端的提示。命令行 API有以下的一些特征：方便选择 DOM 元素的函数用来控制 CPU 检测的函数一些控制台 API 的匿名方法显示器事件给一个物体注册视图事件的监听计算表达式当你按下 Enter 的时候，控制台将会计算任何你提供的 JavaScript 表达式。有两种完成方式，一种是全自动，一种是使用tab。只要你输入一个表达式，就会提供名称提示。如果有多个匹配的选项，使用 ↑ 和 ↓ 来在它们之间循环。按下 → 将会选择当前的选项。如果只有一个选项，按下 Tab 键也会选中当前的选项。一些示例表达式在控制台的显示选择元素有一些选择元素的快捷键。相比普通的使用方式，这些快捷键为你节省了大量时间。$()返回第一个匹配 CSS 选择器的元素。这也是 document.quertSelector() 的快捷方式$$()返回包含所有匹配 CSS 选择器的一个数组。这是 document.querySelectorAll() 的一个别名。$x()返回一个匹配特定 XPath 的数组目标选择的例子：$('code') // Returns the first code element in the document.$$('figure') // Returns an array of all figur