`

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

 

 

  • 大小: 20.3 KB
  • 大小: 73.4 KB
  • 大小: 58.1 KB
  • 大小: 28.8 KB
  • 大小: 62.2 KB
  • 大小: 25.5 KB
  • 大小: 140.3 KB
  • 大小: 74 KB
  • 大小: 92.6 KB
  • 大小: 125.1 KB
  • 大小: 80.3 KB
  • 大小: 125.8 KB
  • 大小: 67.8 KB
  • 大小: 69.7 KB
  • 大小: 74 KB
  • 大小: 101.7 KB
  • 大小: 63.5 KB
1
1
分享到:
评论

相关推荐

    Chrome浏览器调试教程

    ### Chrome浏览器调试教程 #### 一、Chrome浏览器简介及下载与安装 - **浏览器功能**:浏览器的主要职责是向服务器发起请求并在用户界面上展示所请求的资源,这些资源可以是HTML文档、PDF文件、图像等。W3C...

    谷歌浏览器console调试

    Chrome浏览器作为目前流行的浏览器之一,其提供的调试工具非常强大,使得开发者能够方便地查看页面元素、资源加载、网络请求等信息,从而有效地调试前端代码。 首先,Chrome的开发者工具(DevTools)是前端开发者不...

    chrome浏览器如何断点调试异步加载的JS

    在JavaScript开发过程中,Chrome浏览器的开发者工具(DevTools)提供了强大的断点调试功能,使得我们能够轻松定位并解决代码中的问题。然而,当涉及到异步加载的JavaScript文件时,如通过`$.getScript`这样的方法...

    chrome浏览器插件例子

    本例子中的"Chrome浏览器插件例子"是专为Worktile设计的一个工具,它能自动化填写Worktile的任务描述表单,从而提升工作效率。 1. **Chrome浏览器插件基础** - 插件架构:Chrome浏览器插件基于Chrome的扩展框架,...

    Chrome浏览器开发学习资料

    在IT领域,Chrome浏览器不仅是最受欢迎的网页浏览工具,还是开发者们进行Web应用开发、调试和优化的重要平台。这份压缩包文件包含了一系列的学习资料,旨在帮助你深入理解Chrome浏览器的内部机制,提升你的前端开发...

    chrome浏览器及插件

    Chrome浏览器是一款由Google开发的广泛使用的网页浏览器,以其速度、安全性和稳定性著称。它采用了开源的WebKit渲染引擎,提供了一个简洁的用户界面,并且支持大量的扩展插件,极大地拓展了其功能范围。 POSTMAN是...

    如何使用chrome自带的Javascript调试工具

    Chrome 浏览器内置的 JavaScript 调试工具,又称为 Chrome DevTools,是开发者们进行前端调试的重要利器。它提供了丰富的功能,包括代码编辑、性能分析、网络请求检查、内存泄漏检测等,使得开发者能高效地定位和...

    chrome浏览器vue插件

    Chrome浏览器Vue插件是开发和调试Vue.js应用的重要工具,它们极大地增强了开发者在Chrome DevTools中的体验。Vue.js是一款流行的前端JavaScript框架,用于构建用户界面,而Chrome浏览器Vue插件则为开发者提供了一...

    vue 关于Chrome浏览器的开发工具包

    在进行Vue项目开发时,Chrome浏览器的开发工具包是开发者的重要助手。本篇将详细介绍Vue与Chrome开发工具包的结合使用,以及如何利用`vue-devtools`这个Chrome扩展程序提升开发效率。 Vue DevTools是Vue.js官方推出...

    chrome-win64-123.0.6312.58

    【标签】"chrome" 明确指出这个压缩包与Chrome浏览器相关,Chrome是由Google开发的一款广泛使用的网络浏览器,以其快速、安全和用户友好的特性而闻名。它支持HTML5、CSS3和JavaScript等现代Web技术,并且有一个强大...

    chrome浏览器-vue开发者工具

    总的来说,Chrome浏览器的Vue开发者工具是Vue.js开发者不可或缺的利器,它提供了直观、高效且强大的调试和分析能力,使得Vue应用的开发变得更加便捷和高效。无论你是初学者还是经验丰富的开发者,熟练掌握Vue ...

    chrome js 调试工具

    Chrome浏览器内置的开发者工具(DevTools)是这个调试环境的核心,其功能强大且易于使用,深受前端工程师喜爱。在这个压缩包中包含的是Chrome的安装程序(23.0.1271.95_chrome_installer.exe),通过安装此版本的...

    360快速浏览器,web开发调试工具

    首先,360快速浏览器基于开源的Chromium项目,因此它的开发者工具与Google Chrome浏览器的DevTools非常相似,提供了丰富的功能和友好的用户界面。开发者可以方便地在浏览器中直接打开这些工具,通常通过按F12或者...

    ConsoleImporter从Chrome控制台轻松导入JS和CSS资源

    打开Chrome浏览器,按F12或者右键选择“检查”打开开发者工具,切换到“Console”(控制台)面板。在控制台中输入以下命令: ``` import('path/to/console-importer.js') ``` 这将加载并执行`console-importer....

    Chrome开发人员工具导出的har文件如何浏览

    Chrome 浏览器的开发者工具是一个功能强大的工具,能够帮助开发者和用户更好地理解和调试 Web 应用程序。在 Chrome 浏览器中,用户可以通过 F12 或者通过菜单→更多工具→开发者工具来打开开发者工具。在开发者工具...

    Sense插件chrome浏览器ES插件.7z

    Sense插件是一款专门为Chrome浏览器设计的增强型工具,它在ES(Elasticsearch)领域有着广泛的应用。Elasticsearch是一个开源的全文搜索引擎,被广泛用于数据检索、分析和可视化。这款插件的主要功能是帮助用户更...

    Google Chrome 浏览器开发人员工具 教程

    Google Chrome 浏览器的开发人员工具为网页开发者提供了一个全方位的开发环境,从简单的元素查看和修改,到复杂的性能分析和调试,几乎涵盖了所有可能的需求。熟练掌握这些工具的使用方法,将极大地提高网页开发的...

    Atom-xatom-debug-chrome,用于xatom调试的google chrome调试器插件。对xatom的贡献.zip

    4. 按照插件的文档指示配置调试设置,例如指定Chrome浏览器的位置和项目根目录。 5. 开始调试:在源代码中设置好断点后,启动调试会话,插件会自动打开Chrome DevTools界面,允许用户进行各种调试操作。 此外,由于...

    通过chrome浏览器控制台(Console)进行PHP Debug的方法

    为了实现这个功能,可以定义一个名为Console_log的类,并在其中使用一个私有静态变量$output来存储所有调试信息。类中的log()函数用于添加调试信息到$output,而fetch_output()函数则用于在脚本结束时返回完整的输出...

Global site tag (gtag.js) - Google Analytics