Chrome浏览器使用Console调试(一)
个人翻译能力有限,凑活着看吧,原链接
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来完成同样的需求
