Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作、控制台API、命令行API来介绍控制台的使用。

基本操作
1、开启控制台
    可以通过下列三种方式开启控制台:
    a) 按下Chrome界面右上方的按钮,选择菜单:更多工具->开发者工具,进入开发者工具界面,点击该界面右上方的控制台显示按钮。
    b) 按下快捷键CTRL-SHIFT-I,打开开发者工具,点击该界面右上方的控制台显示按钮。
    c) 按下快捷键CTRL-SHIFT-J,直接打开调试界面及控制台。
2、清空控制台
    可以通过下列两种方式清空控制台:
    a) 在控制台内,选择右键快捷菜单:Clear console
    b) 在控制台内输入命令:clear()
    c) 在javascript代码中使用方法:console.clear()
    d) 在控制台内,选择左上角的按钮。
3、保留日志记录
    默认情况下,在页面刷新或跳转到其他页面时,控制台的日志记录全部会清空。此时,若需要进行保留,则需要将控制台的Preserve log选项选中。
4、记录所有XHR请求
    若需要对所有XHR请求记录日志,则可以通过右键快捷菜单Log XMLHTTPRequests来实现。
 
控制台API
1、控制台日志输出
    console.log()
    log方法可以将括号内的一个或多个表达式以字符串形式输出至控制台。各表达式之间用逗号隔开,逗号的实际效果与加号一样。
    代码举例:
    
    结果如下:


2、错误和警告

    console.error()——输出错误信息
    console.warn()——输出警告信息
    error()方法将以红色字体向控制台输出指定的内容,而warn()方法以黑色字体显示输出内容。两者均不会阻断程序代码的运行。两者均支持格式化字符串,与C语言的printf类似,具体支持的格式化类型见后面表格。
    代码举例:
    
    结果如下:
    
3、断言
    console.assert(boolean, string)
    当第一个参数boolean计算结果为false时,将第二个参数string输出至控制台
4、输出信息分组显示
    console.group(groupString)和console.groupEnd()
    上述一组方法可将执行group和groupEnd方法期间输出至控制台的信息归属于groupString分组显示。分组可以嵌套。
    代码举例:
    

结果如下:

    

5、以javascript对象形式格式化DOM元素
    默认情况下,console.log()将以XML形式展示DOM元素。
    代码举例:
    

结果如下:

    
    如果希望看到元素拥有哪些属性以及它们的值,那么就需要用到console.dir()方法了,其效果与使用带有%O格式符的console.log()方法一致。
    代码举例:
    
    结果如下:
    
6、以CSS定义风格输出内容
    Chrome还可以以指定的CSS格式输出显示指定内容。
    代码举例:
    
    结果如下:
    
7、测量代码执行时间
    console.time(nameString)和console.timeEnd(nameString)
    控制台输出自执行console.time(nameString)方法开始,直至遇到对应的console.timeEnd(nameString)方法的累积执行时间,单位为ms。使用该组方法可以检测函数的执行时间。
    代码举例:
    
    结果如下:
    
8、设置调试断点
    debugger
    该代码的效果相当于在所在位置设置了一个调试断点,当程序执行到debugger时,会中断执行等待调试。
    注:只有在打开程序员工具时,才有该效果。

9、设置时间轴标签
    console.timeStamp(markName)
    当执行到timeStamp()方法时,会产生一个时间轴标志。该语句仅在启用时间轴面板录制时有效。关于时间轴面板详见后续文章。
    代码举例:
    

结果如下:(见蓝色选中行时间轴:Timestamp:Adding Timeline)

    

命令行API

1、计算表达式
    说是计算表达式,其实能执行一切javascript脚本,包括函数、JS代码变量的读取和赋值等。注意:这里所做的一切对当前页面立即生效。
2、选择DOM元素
    $(condition)和$$(condition)
    $()返回符合条件的第一个元素,同 document.querySelector()效果一致。$$()以数组形式返回符合条件的所有元素,同document.querySelectorAll()效果一致。
    x(xpath)
    返回符合XPath路径的DOM元素。
3、检测DOM元素和javascript堆对象
    inspect()
    以XML形式展示传入的DOM元素,显示内容与console.log()一致,与$()语句输出一致。若将($_)作为参数传入inspect方法,表示显示最近一次计算的对象。
4、快速选中最近选择的元素
    $0、$1、$2、$3、$4分别表示输出最近一个元素、输出倒数第二个元素、以此类推。
5、对象事件监控
    monitorEvents(obj, event)
    指定监控的对象的所有事件、所有对象的指定事件、指定对象的指定事件。该方法只能指定一个监控对象,但能指定多个事件。有多个事件时,需要以数组的形式传递,如下:
    monitorEvents(obj, [event1,event2,……]
    由于网页事件是可以冒泡的,所以,监控父对象时,子元素的相同事件一并会被监控到。
    代码举例:
    

结果如下:

    

6、CPU监控
    profile(fileName)、profileEnd(fileName)
    在Console里执行profile()方法启动一次CPU跟踪记录,profileEnd()结束本次跟踪。若省略fileName参数,则系统自动给予一个名字。当执行profileEnd()方法时,会将当前调试页面切换到profiles面板,并显示本次跟踪的详细信息。其效果与直接在profiles面板中选择Collect javascript CPU profile一致。
    代码举例:
    

结果如下:

    

多个profile()、profileEnd()可以相互间嵌套或者交叉。如:

Console的使用——Google Chrome代码调试的更多相关文章

  1. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  2. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  3. 【转】Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  4. Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  5. 谷歌浏览器(Google Chrome)开发调试详细介绍

    很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html ...

  6. js部分知识整理,google浏览器的代码调试

    整理一些学过的js知识点,包括js中3个括号的含义,this的使用,递归,google浏览器的代码调试.Location的属性及常用方法,window对象常用方法,open方法等. js括号 在js中 ...

  7. Chrome - JavaScript调试技巧总结(浏览器调试JS)

    Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...

  8. Google Chrome 浏览器禁用缓存

    在使用 Google Chrome 浏览器调试 js 时,会发现修改完 js 不会立即生效,这是由于 chrome 浏览器缓存的原因,而在火狐下没有这个问题.经常使用 chrome 浏览器调试 js ...

  9. Javascript系列: Google Chrome调试js代码(zz)

    你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...

随机推荐

  1. OC语言-07-OC语言-Foundation框架

    结构体 NSRange/CGRange 用来表示一个元素在另一个元素中的范围,NSRange等价于CGRange 包含两个属性: NSUInteger location:表示一个元素在另一个元素中的位 ...

  2. android 之 adb 启动问题的一般解决办法

    有时,当我们打开eclipse准备运行Android项目时,虚拟机会启动不了,并且会出现下面的报错. [2015-10-07 16:47:46 - Game2048] ---------------- ...

  3. android activity 管理器AMS----概述

    AMS & WMS,应该是app端打交道最多的2个framwork层的service. ActivityManagerService 是android提供给用于管理Activity运行状态的系 ...

  4. Method threw 'org.hibernate.exception.SQLGrammarException' exception. Cannot evaluate com.hotel.Object_$$_jvst485_15.toString()

    数据库字段和类Object属性不匹配,Method threw 'org.hibernate.exception.SQLGrammarException' exception. Cannot eval ...

  5. js闭包之初步理解( JavaScript closure)

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  6. Asp.net MVC 4新项目中创建area的后续操作

    Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...

  7. linux crontab & 每隔10秒执行一次

    linux下定时执行任务的方法  在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINU ...

  8. SIEBEL应用概述

    Siebel CRM是围绕客户关系管理这个主题建立起来的一系列应用的总和,和一些国内公司的CRM/CALL CENTER产品不一样,Siebel应用远远不是只是接一些电话然后记录下来并进行处理这么简单 ...

  9. PHP模拟发送POST请求之一、HTTP协议头部解析

    WEB开发中信息基本全是在POST与GET请求与响应中进行,GET因其基于URL的直观,易被我们了解,可POST请求因其信息的隐蔽,在安全的同时,也给开发者们模拟发送带来了麻烦.接下来的几篇博文中,我 ...

  10. cocos2d-x之首选项数据初试

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getIn ...