chrome控制台使用(Using the Console)
控制台提供了两个主要的方法给开发者测试网页和应用程序:
通过使用控制台提供的Console API方法来诊断日志信息,比如说:console.log(),console.profile().
即时响应的命令窗口可以和document以及chrome开发工具相互联调.在控制台可以直接测试表达式,并且可以使用Command Line API提供的方法,比如$()可以查找元素,或者使用profile()来打开CPU分析器.
本文提供关于这两个API的概述和一些基本使用,你也可以直接去Console API和Command Line API查看详细信息.
基础操作
打开控制台
在调试工具里面有两种有效的方式打开控制台:主标签栏里面的console标签,或者当你在其他标签里面时作为分离的视图展示出来(比如在Elements或者Sources).
要打开控制台,做下面任意一种操作:
- 按住 Command - Option - J (Mac) 或者 Control -Shift -J(Windows/Linux).
- 选择 View > Developer > JavaScript Console.
- 按下 F12 > console
当你在其他标签栏内时可以按下Esc键打开或关闭控制台的分离视图,或者也可以点击在chrome调试工具窗口左下角的Show/Hide Console按钮.看图说话
清除控制台历史记录
要清除控制台历史记录,可以选择一下方式中的一种:
- 右击或者Ctrl-click控制台内任何区域出现文本菜单选择Clear Console.
- 在控制台输入clear()回车(Command Line API).
- 输入console.clear()回车(Console API).
- 按下键盘上 ⌘K 或者 ⌃L (Mac) Control - L (Windows and Linux).
当你跳转到其他网页时控制台默认会清空历史记录,通过控制台区域的设置对话框设置Preserve log upon navigation可以改变这个行为 (详见 Console preferences).
控制台设置
控制台有两个全局的设置可以修改在通用的设置对话框内:
- Log XMLHTTPRequests—每一个完成的XMLHTTPRequest 请求显示在空台上.
- Preserve log upon navigation—页面刷新或跳转时不清除历史记录. 默认两个设置是不生效的.
也可以右击控制台内任意区域在弹出的文本菜单内设置.
Console API的使用
Console API就是调试工具定义的全局对象console提供的方法集合.其中一个主要目的就是当你的应用运行时将日志信息(比如一个变量值,或者一个对象再或者DOM元素)输出到控制台.为了避免视觉混乱也可以有组织的输出到控制台.
控制台的书写
console.log() 方法可以传递一个或多个表达式作为参数,并且会输出他们的当前值到控制台.例如:
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()](https://developer.chrome.com/devtools/docs/console-api.md#consoleerrorobject-object)方法会以一个红叉的图标和红色字体展示文本信息.
function connectToServer() {
console.error("Error: %s (%i)", "Server is not responding",500);
}
connectToServer();
[console.warn()](https://developer.chrome.com/devtools/docs/console-api.md#consolewarnobject-object)方法会带有黄色图标展示文本信息.
if(a.childNodes.length < 3 ) {
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
}
断言
[console.assert()](https://developer.chrome.com/devtools/docs/console-api.md#consoleassertexpression-object)方法会在第一个参数值为false时抛出一个异常(第二个参数).比如下面的例子,当list元素的子节点个数大于500的时候会抛出一个错误信息到控制台.
console.assert(list.childNodes.length < 500, "Node count is > 500");
控制台信息的过滤
通过严格的层级控制可以快速过滤控制台输出信息--错误,警告,或者标准日志信息--选择其中一个过滤选项.可以通过点击漏斗(如下所示)去选择一个你想要使用的条件.
过滤选项:
- All—展示所有控制台输出信息.
- Errors—仅展示从
console.error()的输出信息 - Warnings—仅展示从
console.warn()的输出信息 - Logs—仅展示从
console.log(),console.info()和console.debug()的输出信息. - Debug—仅展示从
console.timeEnd()和其他控制台输出.
组织化输出
在控制台使用[console.group()](https://developer.chrome.com/devtools/docs/console-api.md#consolegroupobject-object)和groupEnd()命令可以在控制台显示输出一个嵌套块.``
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
groupconsole.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
groupconsole.groupEnd();
console.log("A group-less log trace.");
要创建一个默认收起的组,可以使用console.groupCollapsed().看下面的例子:
console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
...
}
字符串替换和格式化
任何一个传递给控制台的日志方法(例如log(),error())的第一个参数都可能包含一个或多个占位符.占位符由一个%和一个声明应该用于插入值类型的字母(比如%s 字符串).占位符会识别在哪替换后面提供的参数值.
下面的例子就是使用%s(字符串)和%d(整数)占位符来插入值到控制台输出中.
console.log("%s has %d points", "Sam", "100");
输出结果是"Sam has 100 points"
下面的表格就是一些占位符的信息:
| 占位符 | 描述 |
|---|---|
%s |
字符串. |
%d or %i |
整数. |
%f |
浮点数. |
%o |
dom元素的链接. |
%O |
js对象的链接. |
%c |
css格式字符串. |
下面的例子是用占位符%d将document的子节点数量式化为整数,用占位符%f将时间格式化为时间戳.
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());
dom元素&JS对象
默认情况下,当你输出一个DOM元素到控制台显示为XML格式,如元素面板:
console.log(document.body.firstElementChild);
当然也可以使用console.dir()来显示对象的全部属性
console.dir(document.body.firstElementChild);
等价的也可以通过console.log()使用占位符 %O来实现上面的结果.
console.log("%O", document.body.firstElementChild);
控制台&css
在console.log()里面使用占位符%c可以实现在控制台的输出样式.
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
时间检测
[console.time()](https://developer.chrome.com/devtools/docs/console-api.md#consoletimelabel)和console.timeEnd()
方法可以帮助我们检测一个方法需要用多长时间完成.console.time()放在要开始检测的任务前面来开启时间检测,在任务的末尾添加console.timeEnd()来停止,时间差将会输出到控制台.``
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()里面必须要使用相同的字符串,否则可能会得不到你想要的结果.
断点调试
可以开启debug模式在你的js代码中写入[debugger](https://developer.chrome.com/devtools/docs/console-api.md#debugger)命令.下面的例子演示了当brightness()方法执行时呼出debug模式:
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;}