Using the Console[译]

时间 2019-11-20

标签 using console 繁體版

原文原文链接

因为最近的项目须要大量用到浏览器端的js编码和调试，因此仔细阅读了一下Chrome对于开发者工具中js部分的说明。虽然原来也用这个工具，但读后仍然以为受益不浅。因而抽空翻译一下，与你们分享。css

本人英文水平较渣，若有不妥之处，还请不吝赐教。html

JavaScript Console 为开发人员测试网页和应用提供了两种主要的功能：node

提供了一个经过Console API，好比console.log()和 console.profile()，来显示诊断信息的地方。
提供了一个让你可以经过输入命令与html文档和Chrome开发者工具交互的shell。你能在Console中直接对表达式求值，还能使用 Command Line API提供的各类方法，好比用 $() 命令选择元素, 或者用 profile() 命令开始对CPU资源进行监控分析。

这篇文章将向您展现这两类API的概况和一些基本用法. 您也能够浏览 Console API 和 Command Line API 的使用手册。chrome

Basic operationshell

Opening the Consoleexpress

Clearing the console historyapache

Console settingsapi

Using the Console API数组

Writing to the console浏览器

Errors and warnings

Assertions

Filtering console output

Grouping output

String substitution and formatting

Formatting DOM elements as JavaScript objects

Styling console output with CSS

Measuring how long something takes

Marking the Timeline

Setting breakpoints in JavaScript

Using the Command Line API

Evaluating expressions

Selecting elements

Inspecting DOM elements and JavaScript heap objects

Accessing recently selected elements and objects

Monitoring events

Controlling the CPU profiler

基本操做

打开Console

经过Chrome DevTools，咱们有两种方式打开JavaScript Console：独立的Console标签页, 或者在其余标签页（好比Element标签页或Source标签页）中以分离视图的方式显示。

咱们能够经过下面这些方法中的一种打开Console标签页：

经过键盘快捷键打开，Command - Option - J (Mac) 或者Control -Shift -J (Windows/Linux)。
经过菜单打开， View > Developer > JavaScript Console。

若是须要在其余标签页上切换Console的开启状态, 能够在键盘上按Esc键, 或者点击Chrome DevTools窗口左下角的Show/Hide Console 按钮。下面的这幅屏幕截图中Console被以分离视图的形式显示在Element标签页面板中。

清除Console的历史信息

能够经过如下办法中的一个清除Console的历史信息：

在Console窗口的任何位置点击鼠标右键，并在打开的右键菜单中选择Clear Console。
在shell prompt中输入并执行 clear() 命令行API。
经过JavaScript调用 console.clear() Console API。
使用键盘快捷键 ⌘K 或 ⌃L (Mac)， Control - L (Windows and Linux)。

在默认状态下，Console历史信息会在你跳转到其余页面时自动清除。你能够经过在设置对话框的Console区域启用 Preserve log upon navigation来改变这一行为 (参考Console preferences)。

Console 设置

在DevTools 设置对话框的General标签页中有两个关于Console的全局设置项：

Log XMLHTTPRequests——它决定了是否将每一个XMLHTTPRequest请求都显示在Console面板中。
Preserve log upon navigation——它决定了当你跳转到其余页面时是否保留当前页面的console历史信息。

默认状态下，这两个设置项都是关闭状态的。

你还能够经过在Console的任何区域点击鼠标右键所显示的右键菜单中更改这两个设置项。

使用Console API

Console API是一组由全局对象console所提供的方法的集合，这个全局对象是有DevTools定义的。这些API的一个主要功能就是在你的程序运行时往console区域打印信息(好比一个属性值，一个完整的对象或者一个DOM元素) 。你还能对console区域的信息进行可视化的分组以免混乱的信息显示。

向console区域输出信息

console.log() 能够支持传入一个或多个表达式做为参数，它会把传入的参数输出到console区域。好比：

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Node count： " + a.childNodes.length);

除了像上面那样用+将表达式连接起来, 你还能够把这些表达式分别做为一个独立的参数传给此方法，他们会被合并为一行，并用空格分隔开。

console.log("Node count：", a.childNodes.length, "and the current time is：", Date.now());

错误和警告

console.error()方法会在显示红色信息的同时显示一个红色的图标。

function connectToServer() {
console.error("Error： %s (%i)", "Server is not responding",500);
}
connectToServer();

console.warn()方法会在现实信息的同时显示一个黄色的图标。

if(a.childNodes.length < 3 ) {
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}

断言

console.assert() 方法会在他的第一个参数表达式的值为false时显示一条错误信息（就是他的第二个参数）。举个栗子，在下面的示例中，当list元素中的子元素数目大于500时就会向console区域输出一条错误信息。

console.assert(list.childNodes.length < 500, "Node count is > 500");

过滤console输出信息

你能够经过选择Console窗口下方的过滤选项来快速地经过输出信息的严重等级来过滤输出的信息。以下图所示：

过滤选项：

All——显示全部的输出信息。
Errors——只显示经过console.error()方法输出的信息。
Warnings——只显示经过console.warn()方法输出的信息。
Logs——只显示经过 console.log()，console.info()和console.debug()方法输出的信息。
Debug——只显示经过console.timeEnd()方法输出的信息。

对输出信息分组

你能够经过console.group()和groupEnd()命令对相关的console输出信息进行分组显示。

var user = "jsmith", authenticated = false;
console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

你还能够嵌套分组。好比在下面的例子，在登入过程当中建立了一个认证信息分组。若是用户认证经过，就会在认证信息分组中再建立一个信息分组。

var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated", user);
// Start nested group
console.group("Authorizing user '%s'", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
// End nested group
console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

若是要建立一个在初始时处于折叠状态的信息分组，就用console.groupCollapsed()方法，而不是console.group()方法,以下所示：

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
...
}

格式字符串和字符串格式化

你传给任何console信息输出方法(好比log()或error())的第一个参数均可以包含一个或多个格式字符串。一个格式字符串由一个%符号和紧跟其后的一个字母构成，这个字母表明了将要应用到值上面的一种特定格式(好比%s表明字符串)。格式字符串还标识出了在哪里替换成后面的参数值。

下面的例子演示了用%s (字符串)和%d (整数)格式字符串将值插入到输出的字符串中。

console.log("%s has %d points", "Sam", "100");

这个表达式将会在console区域输出"Sam has 100 points"。

下面的表格列出了全部受支持的格式字符串和他们说表明的含义：

Format specifier	Description
%s	将值格式化为字符串。
%d or %i	将值格式化为整数。
%f	将值格式化为浮点数。
%o	将值格式化为可展开的DOM元素(就像在Elements面板中同样)。
%O	将值格式化为可展开的JavaScript对象。
%c	将第二个参数说知道的css规则应用到输出信息。

下面这个例子中 %d格式字符串会被document.childNodes.length的值替换，并显示为一个整数;而%f格式字符串则被Date.now()的值替换，并显示为一个浮点数。

console.log("Node count： %d, and the time is %f.", document.childNodes.length, Date.now());

将DOM元素格式化为JavaScript对象

默认状态下，当你将一个DOM元素输出到console区域时，它会像在Elements面板中同样显示为XML格式：

console.log(document.body.firstElementChild)

你还能够用console.dir()方法将DOM元素输出为JavaScript样式：

console.dir(document.body.firstElementChild);

你还能够用console.log()方法配合%O 格式字符串以达到一样的效果：

console.log("%O", document.body.firstElementChild);

对console输出信息应用CSS样式

你能够用%c格式字符串将自定义CSS 规则应用到任何你用console.log()或相似的方法输出到Console的信息上。

console.log("%cThis will be formatted with large, blue text", "color： blue; font-size： x-large");

测量花费的时间

你能够用console.time()和console.timeEnd()方法测量一个函数或操做完成所需的时间。你能够在开始计时的地方调用console.time()方法，而后调用console.timeEnd()方法中止计时。这两次调用之间所花费的时间将被显示在console区域。

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");

注意：你必须在调用console.time()和timeEnd()时传入一样的字符串以获得你想要的结果。

建立Timeline

Timeline面板为你提供了一个关于页面或应用在加载和使用时哪些地方花费了时间的概览。console.timeStamp()方法会在它被执行的时候在Timeline上作一个标记。这样，你能够很容易地找到你的应用中的事件和浏览器事件，好比layout和paints，之间的联系。

注意：console.timeStamp()方法只在Timeline处于记录过程当中时才会起做用。

在下面的例子中当程序执行到AddResult()函数内部时，就会在Timeline上作一个标记。

function AddResult(name, result) {
console.timeStamp("Adding result");
var text = name + '： ' + result;
var results = document.getElementById("results");
results.innerHTML += (text + "<br>");
}

以下面的屏幕截图所示，timeStamp()命令会在Timeline的这些位置留下标记：

在Timeline的summary和detail视图中的垂直黄线。
在事件记录列表中的一条记录。

在JavaScript中设置断点

你能够在JavaScript代码中调用debugger命令来开始一次debug。好比在下面的例子中，当brightness()方法被调用时就会开始一次JavaScript调试：

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;
}

Brian Arnold开发了一种很是有趣的条件调试技术，参见Breakpoint Actions in JavaScript.。

使用Command Line API

Console除了用做经过应用程序显示信息的地方，它仍是一个让你能够直接对表达式求值或执行由Command Line API提供的命令的地方。该API提供了如下功能：

方便的DOM元素选取功能
对CPU性能监控分析的方法
部分Console API方法的别名
监视事件
查看对象上注册的事件监听

表达式求值

当你按下Return或Enter键时，Console会尝试对任何你输入的JavaScript表达式求值。Console还提供了自动完成提示和tab自动完成输入。好比你输入一个表达式，他的属性名称就会自动显示在提示中。若是有多个属性都拥有相同的前缀，此时按tab键就会循环遍历它们。按下向右箭头按键，就会输入当前的建议项。当只有一个建议项时，按tab键也会输入该建议项。

若是要输入一个多行的表达式（好比一个方法的定义内容），能够按Shift+Enter换行。

选择元素

Command Line API提供了一些方法以访问应用中的DOM元素。好比，$() 方法会像 document.querySelector()同样返回与指定CSS选择器相匹配的第一个元素。下面的代码会返回ID为 "loginBtn"的元素。

$('#loginBtn');

$$() 命令则像document.querySelectorAll()同样返回全部与指定CSS规则匹配的元素。以下面的代码会显示全部CSS class为"loginBtn"的<button>元素：

$$('button.loginBtn');

最后，x()方法会返回全部与传入的XPath路径参数相匹配的元素。下面的代码会返回<body>标签下的全部<script> 元素：

$x('/html/body/script');

检查DOM元素和JavaScript对象

inspect()将一个指向DOM元素的引用 (或指向JavaScript对象的引用)做为参数，并将其显示在相应的面板中——在 Elements面板显示DOM元素，或在Profile面板显示JavaScript对象。

好比，在下面的截图中，$()方法会获得一个对<li>元素的引用。而后在最后的表达式中用($_)传给inspect()方法，以在Elements面板中显示该元素。

访问当前选中的元素和对象

一般，你会在测试的时候用放大镜或直接在Element面板中选择DOM元素，同时你也就能够进一步检视这些元素。或者，在你用Profiles面板分析一个内存使用状况快照时，你也能够选择一个JavaScript对象作进一步查看。

Console会记录下你最近选择的5个元素（或者堆对象），并给他们命名为$0, $1, $2, $3和$4.。最近选择的对象为 $0，其次为$1，以此类推。

下面的截图显示了在选择了3个元素后这些属性的值：

注意： 你也能够在任何元素上用鼠标右键点击并选择Reveal in Elements Panel。

监视事件

monitorEvents()能够监视一个对象的一个或多个事件。当被监视的对象上有事件被触发时，相应的事件对象就会被显示在Console中。你能够指定要监视的对象和它上的事件。好比，下面的代码会监视window对象上的"resize"事件：

monitorEvents(window, "resize");

若是须要监视一组事件，你能够将事件名称数组做为第二个参数传给该方法。下面的代码同时监视了body的"mousedown"事件和"mouseup"事件。

monitorEvents(document.body, ["mousedown", "mouseup"]);

你还能够传一个合法的"事件类型"给这个方法，DevTools会把它对应到一组事件名称。好比，"touch"事件类型会让DevTools监视指定对象上的"touchstart"，"touchend"，"touchmove"，和"touchcancel"事件。

monitorEvents($('#scrollBar'), "touch");

你能够在Console API Reference中查看monitorEvents()章节，以得到合法的事件类型列表。

你能够调用 unmonitorEvents()方法中止监视事件，只需将须要中止监视的对象做为参数传入该方法。

unmonitorEvents(window);

控制CPU分析器

你能够在命令行用profile()和 profileEnd()方法建立JavaScript CPU性能分析。你还能够给你建立的分析指定一个名字。

下面的例子中用默认名称建立了一个新的性能分析：

这个新的性能分析会在Profile面板中的"Profile 1"项目下显示：

若是你为新的性能分析指定了一个标签，它会被用做这个性能分析的标题。若是你对多个性能分析用了相同的名称，它们会被做为独立的性能分析并分组显示在同一个名称下：

Profiles面板中显示的结果：

CPU性能分析也能够被嵌套使用：

profile("A");
profile("B");
profileEnd("B")
profileEnd("A")

性能分析的开始和结束方法并不必定须要被嵌套调用。好比，下面的用法将获得和前面相同的效果：

profile("A");
profile("B");
profileEnd("A");
profileEnd("B");

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License.

Last updated 六月 21, 2013.

原文见：https://developers.google.com/chrome-developer-tools/docs/console?hl=zh-CN

如需转载，请注明转自：http://www.cnblogs.com/silenttiger/p/3154598.html

欢迎关注个人微信公众号：老虎的小窝