资讯专栏INFORMATION COLUMN

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

JouyPub / 780人阅读

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创建新分组

console.group("warn警告信息")
    console.warn("warn1")
    console.warn("warn2")
    console.warn("warn3")
console.groupEnd()
console.group("info信息")
    console.warn("info")
    console.warn("info1")
console.groupEnd()
console.group("log信息")
    console.warn("log1")
    console.warn("log2")
console.groupEnd()
console.group("error信息")
    console.warn("error1")
    console.warn("error2")
console.groupEnd()

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

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

(2)复杂类型输出:

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

let obj = {
    test_1: "ffff",
    test_2: "这是test",
    fn: () => {
        console.log("fn")
    },
    arr_1: [1,{a: "arr_obj"}, "string"]
}
console.group("log打印对象")
    console.log(obj)
console.groupEnd()
console.group("dir打印对象")
    console.dirxml(obj)
console.groupEnd()
console.group("dirxml打印对象")
    console.dirxml(obj)
console.groupEnd()
console.group("log打印数组")
    console.log(obj.arr_1)
console.groupEnd()
console.group("dir打印数组")
    console.dirxml(obj.arr_1)
console.groupEnd()
console.group("dirxml打印数组")
    console.dirxml(obj.arr_1)
console.groupEnd()

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

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

计算某段程序运行时间:

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

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

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

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

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

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

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

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

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

console.clear():清空控制台

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

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

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

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

往期经典好文:

你不知道的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元查看
<