开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Console的使用——Google Chrome代码调试

简介:
+关注继续查看

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


基本操作
1、开启控制台
    可以通过下列三种方式开启控制台:
    a) 按下Chrome界面右上方的Console的使用Google <wbr>Chrome代码调试(一)按钮,选择菜单:更多工具->开发者工具,进入开发者工具界面,点击该界面右上方的Console的使用Google <wbr>Chrome代码调试(一)控制台显示按钮。
    b) 按下快捷键CTRL-SHIFT-I,打开开发者工具,点击该界面右上方的Console的使用Google <wbr>Chrome代码调试(一)控制台显示按钮。
    c) 按下快捷键CTRL-SHIFT-J,直接打开调试界面及控制台。
2、清空控制台
    可以通过下列两种方式清空控制台:
    a) 在控制台内,选择右键快捷菜单:Clear console
    b) 在控制台内输入命令:clear()
    c) 在javascript代码中使用方法:console.clear()
    d) 在控制台内,选择左上角的Console的使用Google <wbr>Chrome代码调试(一)按钮。
3、保留日志记录
    默认情况下,在页面刷新或跳转到其他页面时,控制台的日志记录全部会清空。此时,若需要进行保留,则需要将控制台的Preserve log选项选中。
4、记录所有XHR请求
    若需要对所有XHR请求记录日志,则可以通过右键快捷菜单Log XMLHTTPRequests来实现。
 
控制台API
1、控制台日志输出
    console.log()
    log方法可以将括号内的一个或多个表达式以字符串形式输出至控制台。各表达式之间用逗号隔开,逗号的实际效果与加号一样。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
2、错误和警告
    console.error()——输出错误信息
    console.warn()——输出警告信息
    error()方法将以红色字体向控制台输出指定的内容,而warn()方法以黑色字体显示输出内容。两者均不会阻断程序代码的运行。两者均支持格式化字符串,与C语言的printf类似,具体支持的格式化类型见后面表格。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
3、断言
    console.assert(boolean, string)
    当第一个参数boolean计算结果为false时,将第二个参数string输出至控制台
4、输出信息分组显示
    console.group(groupString)和console.groupEnd()
    上述一组方法可将执行group和groupEnd方法期间输出至控制台的信息归属于groupString分组显示。分组可以嵌套。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)

    结果如下:

    Console的使用Google <wbr>Chrome代码调试(一)
5、以javascript对象形式格式化DOM元素
    默认情况下,console.log()将以XML形式展示DOM元素。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
    如果希望看到元素拥有哪些属性以及它们的值,那么就需要用到console.dir()方法了,其效果与使用带有%O格式符的console.log()方法一致。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
6、以CSS定义风格输出内容
    Chrome还可以以指定的CSS格式输出显示指定内容。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
7、测量代码执行时间
    console.time(nameString)和console.timeEnd(nameString)
    控制台输出自执行console.time(nameString)方法开始,直至遇到对应的console.timeEnd(nameString)方法的累积执行时间,单位为ms。使用该组方法可以检测函数的执行时间。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:
    Console的使用Google <wbr>Chrome代码调试(一)
8、设置调试断点
    debugger
    该代码的效果相当于在所在位置设置了一个调试断点,当程序执行到debugger时,会中断执行等待调试。
    注:只有在打开程序员工具时,才有该效果。
9、设置时间轴标签
    console.timeStamp(markName)
    当执行到timeStamp()方法时,会产生一个时间轴标志。该语句仅在启用时间轴面板录制时有效。关于时间轴面板详见后续文章。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)
    结果如下:(见蓝色选中行时间轴:Timestamp:Adding Timeline)
    Console的使用Google <wbr>Chrome代码调试(一)

命令行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,……]
    由于网页事件是可以冒泡的,所以,监控父对象时,子元素的相同事件一并会被监控到。
    代码举例:
    Console的使用Google <wbr>Chrome代码调试(一)

    结果如下:

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

    结果如下:

    Console的使用Google <wbr>Chrome代码调试(一)

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

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/5031786.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【chrome】在做项目使用chrome调试的时候,调整Console的位置
在新的电脑上安装了谷歌浏览器 ,然后在调试系统的时候,发现console这个控制台,模拟调试js的位置无法显示到source以下,   解决问题: 怎么样让console控制台显示到sources下,在查看js源码的同时又能查看console模拟控制台的js调试呢? 在sources界面下,按下...
1105 0
Google C++单元测试框架之宏
一、概述   gtest中,断言的宏可以理解分为两类,一类是ASSERT系列,一类是EXPECT系列;   1、ASSERT_*系列的断言,当检查点失败时,退出当前函数(注意:并非退出当前案例)   2、EXCEPT_*系列的断言,当检查点失败时,继续往下执行;
945 0
Google Chrome浏览器中如何使用命令
Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome  1 2 3 分步阅读 Google Chrome浏览器有很多的特性在界面菜单中是没有体现的,你可以通过「chrome://命令」来访问。
1166 0
(转)Google 使用技巧 (101个使用技巧)
原文:http://blog.163.com/fan_cun_fu/blog/static/455609201132143043227/ 更加全面地用Google搜索的最好方式是点击高级搜索。 它可以让你搜索更加精准的词组,“所有词组”或者是适当的搜索框里输入词组的某一个特定关键词。
1216 0
Google 代码搜索
 今天在CSDN上看到的消息,google推出了CodeSearch的服务,上去一测试,吓死我了! 代码的秘密全无了! http://www.google.com/codesearch/ 你可以试试你的代码看看! 比如:搜索以下:on error resu...
581 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载