? ? ?个人翻译能力有限,凑活着看吧,原链接
? ? ??https://developers.google.com/web/tools/javascript/console/
? ? ? 这次先翻译了前两节(浏览控制台/诊断和打日志到控制台),后三节会陆续翻译
? ? ? 使用控制台
? ? ? ? ? ? 当一个页面在浏览器中的时候，控制台允许使用标准的JavaScript语句和控制台专用命令帮助调试页面。控制台可以查看诊断信息，显示丰富的结构化的数据，控制和过滤输出，检测和修改页面元素，测量执行时间等。
?
? ? ? 大纲
? ? ? ? ? ?1. 浏览控制台
? ? ? ? ? ?2. 诊断和打日志到控制台
? ? ? ? ? ?3. 比较相似的数据对象
? ? ? ? ? ?4. 测量和统计执行
? ? ? ? ? ?5. 异常和错误处理
? ? ? ? ? ?6. 控制台API 参考
?
? ? ? 1.浏览控制台
? ? ? ? ? ? Chrome DevTools中强大的Javascript 控制台能够以很多方式被定制化和控制，学习如何使用它能够使你成为一个更好的开发者。
? ? ? ?方式如下：
? ? ? ? ? ? ?1.快捷键：
? ? ? ? ? ? ? ? ? ? ? ?Windows and Linux: Ctrl + Shift +J
? ? ? ? ? ? ? ? ? ? ? ?Mac:Cmd + Option +J
? ? ? ? ? ? ?2.选择Chrome的菜单图标 > 更多工具>开发者工具，英文：Chrome Menu icon > More Tools > ? ? ? ? ?JavaScript Console.
? ? ? ? ? ? ?3.chrome devTools 已经打开后，点击“Console”选项卡即可
?
?
? ? ? ?在另一个面板里打开控制台，可以使用以下方式：
? ? ? ? ? ? ? 1.在Chrome DevTools里按下 Esc按键
? ? ? ? ? ? ? 2.点击 ‘Show Drawer icon’图标，
?
?
?
? ? ? ?控制台保留了任何一个页面的每条信息的记录，直到页面被关闭，或者导航到其他页面，或者重新刷新页面。如果同样的信息连贯地重复出现，控制台会堆叠它们以保持信息尽可能的简洁。信息被堆叠后，堆叠的次数会被显示在这条信息的左边。
? ? ? 如果你喜欢每一条日志都是独一无二的，可以在Settings菜单中勾选 Show timestamps,让每一条信息都有一个唯一的时间戳。
?
? ? 清除历史
?
? ? 你可以通过以下方式清除控制台历史：
? ? ? ? ? ? 1.在控制台区域右键或者Ctrl-click 任何区域，然后选择 ‘Clear Console‘
? ? ? ? ? ? 2.在控制台的命令行中输入 clear() 然后回车
? ? ? ? ? ? 3.在你自己的javascript代码中执行console.clear()方法
? ? ? ? ? ? 4.在Mac中使用快捷键Cmd+K,在Windows和Linux下使用Ctrl+L
?
? ? 保留历史
?
?
? ? 在页面刷新和页面切换期间，勾选 ‘Preserve log’选项（在控制台上方）会保留控制台历史信息。除非你清除console或者关闭tab，否则信息将一直保留。
?
? ? 保存历史
?
? ? 在控制台区域右键，选择 ‘Save As’会保存输出到控制台的信息到一个日志文件中，然后可以使用任何文本编辑器打开它。
?
?
? ? 默认地，从frames或者扩展工具的日志和错误是不输出到控制台上的。你可以用控制台上方的下拉选择框，选择其他的frame输出日志。比如，一个iframe元素，能够创建其自己的frame上下文，从这个菜单中选出。
?
?
?
? ? ? ?通过选择过滤选项过滤它的日志等级。在控制台面板的左上角激活过滤功能，就可以看到在下面的过滤条件了，如下：
? ?选项 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 显示
? ?All ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?显示所有控制台输出
? ?Errors ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?显示console.error()的输出
? ?Warnings ? ? ? ? ? ? ? ? ? ? ? ? ? 显示console.warn()的输出
? ?Info ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?显示console.info()的输出
? ?Logs ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?显示console.log()的输出
? ?Debug ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 显示console.timeEnd()和console.debug()的输出
?
你可以定制化控制台,在 ‘Settings‘菜单中
Settings ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Description
Hide network ? ? ? ? ? ? ? ? ? ? 默认地，控制台报告网络问题。打开这个开关让控制台隐藏这些错误。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?比如，404，500系列的错误就不被记录了。
messages
?
Log ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?明确控制台记录每一个XMLHttpRequest
XMLHttpRequests
?
Preserve log upon ? ? ? ? ? ? ? ? 保留控制台历史，在刷新页面或者浏览页面期间
navigation
?
Show timestamps ? ? ? ? ? ? ? ? ? 每条console信息都有一个时间戳，对调试很有用
2. 诊断和记录日志到控制台
?
? ? ? 控制台日志是一个很有效的方式监测页面和应用的情况。让我们开始使用console.log()和探索其他高级的使用方式。
?
? ? ? 写到控制台
?
? ? ? ?对于任何基本的日志记录到控制台使用console.log()方法，使用一个或者多个表达式作为参数，把它们的值写到控制台上，用空格符将多个参数连接成一行
?
? ? ? 在Javascript代码中执行：
? ? ? ??
console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());
?
? ? 输出：
?
?
?
? ? ?组织控制台输出
?
? ? ?组信息
? ? ?你可以用group命令组织相关的信息输出。使用console.group()方法，使用一个单独的字符串参数作为group的名字。在你的javascript代码中调用后，控制台开始用组来控制输出。结束组控制的时候，仅仅使用console.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 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.groupEnd();
?输出:
?
?
?
错误和警告
?
错误和警告和普通的log表现是一样的。唯一不同是error()和warn()以不同的样式做出提醒。
?
console.error()
?
console.error()方法会显示一个红色的icon在红色信息旁边
function connectToServer() {
console.error("Error: %s (%i)", "Server is not responding",500);
}
connectToServer();
?输出:
?
?
?
console.warn()
?
console.warn()方法会显示一个黄色的icon在信息旁边
?
if(a.childNodes.length < 3 ) {
console.warn(‘Warning! Too few nodes (%d)‘, a.childNodes.length);
}
?
?输出:
??
?
断言
?
console.assert()方法 显示一个错误字符串（它的第二个参数），如果第一个参数执行为false的话
?
一个简单的断言和如何显示
?
以下代码产生一个错误信息在控制台，仅仅如果child的节点数量大于500
?
console.assert(list.childNodes.length < 500, "Node count is > 500");
?输出:
?
?
?
字符串代替和格式化
?
传递给任何log方法的第一个参数包含一个或者多个格式化标识符。一个格式化标识符是由%符号跟着一个字符表示的，意味着会被传递的值格式化掉。之后的参数是按顺序匹配那些占位符的。
?
以下的例子是使用字符串和数字格式化后，输出字符串的。在控制台里，你会看到 “Sam has 100 points”
console.log("%s has %d points", "Sam", 100);
以下是全部的格式化标识符：
?
标识符 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?输出
%s ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?格式化字符串
%i 或者 %d ? ? ? ? ? ? ? ? ? ? ? ?格式化整数
%f ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?格式化浮点数
%o ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 格式化一个可扩展的DOM元素，在Elements面板可以看到 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
%O ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 格式化一个可扩展的JavaScript对象
%c ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?接受一个作为第二参数的css样式规则，用来特别地输出该字符串
?
?
看例子：
console.log("Node count: %d, and the time is %f.",
document.childNodes.length, Date.now());
?
?输出:
?
?
使用css样式装饰控制台输出
?
console.log("%cThis will be formatted with large, blue text",
"color: blue; font-size: x-large");
?
?输出:
??
?
格式化DOM元素为JavaScript 对象
?
默认地，DOM元素在console中是HTML的，但有时你想将DOM元素作为JavaScript对象，并检测它的属性。
你可以使用%o来格式化，或者使用console.dir来完成同样的需求
?
?
原文：http://zhangzhaoaaa.iteye.com/blog/2247890