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来完成同样的需求