资讯专栏INFORMATION COLUMN

Chrome 控制台常用调试技巧详解

JouyPub / 899人阅读

1、Chrome控制台小技巧

打开和关闭抽屉式选项卡:按Esc键可打开和关闭 DevTools 的 Drawer(抽屉式选项卡)

在Drawer(抽屉式选项卡)中,你可以在 Console 控制台中执行命令,查看动画检查器(Animations),配置网络条件(network conditions)和渲染(rendering)设置,搜索(search)字符串和文件等

使用Request blocking 阻塞请求:

使用这个功能可以拦截请求;

比较常用的场景是,页面执行完某操作后页面就进行重定向跳转了,这时如果想调试重定向前发的请求做了啥,就可以使用此功能进行阻塞拦截

debugger:代码手动编程设置断点调试;

Coverage 代码覆盖率检测:可以观察到代码覆盖率,哪些是没用的,去除无用代码,较少代码体积

Changes 变化:显示更改代码的比较,可以通过这个工具观察你用控制台修改过的代码,类似于git 的 diff 功能类似,红色代表删除、绿色代码新增;

Snippets:在 console 里可以临时运行代码,但是书写格式不太友好,而且一换行就执行了(虽然可以 shift+enter 换行),不想打开代码编辑器怎么办,可以使用 Snippets 这个工具创建js脚本,并可以访问和从任何页面的Chrome DevTools面板中执行(除非你删除)。

2、console控制台命令

$_:返回最近一次计算的表达式的值;

$(selector):返回匹配指定CSS选择器的第一个DOM元素的引用,实际是document.querySelector()函数的别名;

$$(selector):$$(selector)返回一个与给定CSS选择器匹配的元素数组,等效于调用document.querySelectorAll();

$x(path):返回一个与给定XPath表达式匹配的DOM元素的数组;

clear(): 清除控制台中所有历史记录;

copy(object):将指定对象的字符串表示复制到剪贴板;

debug(function):当调用指定的函数时,调试器被调用并在Sources(源文件)面板上的函数内部断点暂停;

dir(object):Console API的console.dir()方法的别名。

getEventListeners(object)返回在指定对象上注册事件的监听器

keys(object) 返回一个数组,该数组包含属于指定对象的属性名;

values(object):回一个数组,该数组包含属于指定对象的属性值;

document.body.contentEditable=true:将浏览器变成编辑器

monitorEvents(document.body, "click"):第一个参数是要监听的对象。如果未提供第二个参数,所有事件都会返回。要指定要监听的事件,传递一个字符串或字符串数组作为第二个参数;

unmonitorEvents(document.body):停止监听body对象上的事件;

3、console API详解

有开发就有console,开发调试必使用的一大命令console,看看都有些啥?

(1)输出信息基本方法:

console.log 用于输出普通信息

console.info 用于输出提示性信息

console.error用于输出错误信息

console.warn用于输出警示信息

console.group&&console.groupEnd分组输出,console.groupCollapsed创建新分组

</>复制代码

  1. console.group("warn警告信息")
  2. console.warn("warn1")
  3. console.warn("warn2")
  4. console.warn("warn3")
  5. console.groupEnd()
  6. console.group("info信息")
  7. console.warn("info")
  8. console.warn("info1")
  9. console.groupEnd()
  10. console.group("log信息")
  11. console.warn("log1")
  12. console.warn("log2")
  13. console.groupEnd()
  14. console.group("error信息")
  15. console.warn("error1")
  16. console.warn("error2")
  17. console.groupEnd()

给console输出添加样式(通过背景属性图片也可以输出哦)

</>复制代码

  1. ["log","info","warn","error"].forEach(item => {
  2. let $print = console[item];
  3. console[item] = function() {
  4. $print.call(console, "%c"+Array.prototype.slice.apply(arguments).join(" "), "font-size: 16px;padding:10px;font-weight: bold;text-decoration: underline;")
  5. }
  6. })

(2)复杂类型输出:

console.dir | console.dirxml:替代for in详细的输出对象信息,经常遇到的坑点是,使用console.log想打印出对象信息,发现只有[object Object],现在可以使用dir;dirxml如果可以会使用xml形式打印。

</>复制代码

  1. let obj = {
  2. test_1: "ffff",
  3. test_2: "这是test",
  4. fn: () => {
  5. console.log("fn")
  6. },
  7. arr_1: [1,{a: "arr_obj"}, "string"]
  8. }
  9. console.group("log打印对象")
  10. console.log(obj)
  11. console.groupEnd()
  12. console.group("dir打印对象")
  13. console.dirxml(obj)
  14. console.groupEnd()
  15. console.group("dirxml打印对象")
  16. console.dirxml(obj)
  17. console.groupEnd()
  18. console.group("log打印数组")
  19. console.log(obj.arr_1)
  20. console.groupEnd()
  21. console.group("dir打印数组")
  22. console.dirxml(obj.arr_1)
  23. console.groupEnd()
  24. console.group("dirxml打印数组")
  25. console.dirxml(obj.arr_1)
  26. console.groupEnd()

有时候对象或者数组数据过多,要是能表格形式直观展示就perfect,console.table满足你

</>复制代码

  1. let obj = {
  2. test_1: "ffff",
  3. test_2: "这是test",
  4. fn: () => {
  5. console.log("fn")
  6. },
  7. arr_1: [1,{a: "arr_obj"}, "string"]
  8. }
  9. console.group("table打印")
  10. console.table(obj)
  11. console.groupEnd()
(3)其他调试输出:

计算某段程序运行时间:

console.time("time") 计时开始

console.timeEnd("time") 计时结束

计算某段程序运行时CPU使用相关信息(统计结束后信息记录在JavaScript Profiler面板):

console.profile("profile") 监听开始

console.profileEnd("profile") 监听结束

条件输出(断言输出,如果计算表达式返回false时,向控制台写入一个error):

</>复制代码

  1. console.assert(false, "为false时才输出")
  2. console.assert(true, "为true时不输出")

console.count("fn执行次数:")统计代码执行次数的必备;

console.timeLineconsole.timeLineEnd记录一段时间轴

console.clear():清空控制台

console.debug():使用方式和console.log一样

console.timeStamp():在记录会话期间向Timeline(时间轴)面板添加一个事件

console.trace(‘test’, obj):在调用该方法的地方打印堆栈跟踪。

</>复制代码

  1. “积跬步、行千里”—— 越来越懒的自己,回来吧!态懒可不太好。喜欢的话留下个赞和关注哦!

往期经典好文:

你不知道的CORS跨域资源共享

性能优化篇---Webpack构建速度优化

性能优化篇---Webpack构建代码质量压缩作

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105499.html

相关文章

  • Chrome 制台常用调试技巧详解

    1、Chrome控制台小技巧 打开和关闭抽屉式选项卡:按Esc键可打开和关闭 DevTools 的 Drawer(抽屉式选项卡) 在Drawer(抽屉式选项卡)中,你可以在 Console 控制台中执行命令,查看动画检查器(Animations),配置网络条件(network conditions)和渲染(rendering)设置,搜索(search)字符串和文件等 showImg(https...

    trigkit4 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 你不知道的Chrome DevTools(2):那些debug的技巧

    摘要:我打算把一些上使用的高级技巧写成你不知道的这一系列的博文,希望大家一起学习学习。然而,这还不是最严重的,因为的语法比较宽松和随意,所以同一功能多种写法,各种奇葩都有。总结前端在调试代码的时候,知道开发工具上的小技巧,可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools,使用它作为Web前端开发性能调试的必备工具。就连隔...

    warnerwu 评论0 收藏0
  • Chrome 调试技巧

    摘要:前言除了我们日常使用的调试方法,在中,其含有一些有意思的方法,有助于提高我们的开发调试效率。而在调试中我们可以使用是与来作为选择器,省去大串代码,如下。测试用时测试用时关闭界面 前言:除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率。 Sources页 command + p 文件跳转 使用Sublime的人或习惯用command +...

    codeGoogle 评论0 收藏0

发表评论

0条评论

JouyPub

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<