您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Chrome 控制台实用指南

时间:2019-08-08 10:19:08  来源:  作者:

前言

Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大了吧,说它是神器一点也不过分,很方便。但其实很多开发者并没有用出控制台的精髓,只是使用简单的console.log();其实控制台功能远远不止这么简单哦。

console.clear

console.clear();清空控制台,这个应该和console.log知名度一样高吧。

console.log家族

先简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

 

Chrome 控制台实用指南

 

 

如果你是一位开发者,我想console.log肯定是经常使用的了,我们主要看看console.log的几个兄弟:

1.console.log ('普通信息')

2.console.info ('提示性信息')

3.console.error ('错误信息')

4.console.warn ('警示信息')

 

Chrome 控制台实用指南

 

 

大家都会用log,但很少有人能够很好地利用console.error,console.warn 等将输出到控制台的信息进行分类整理。他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化。

如果再配合console.group 与console.groupEnd,可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web App时,将各自的log信息分组到以各自命名空间为名称的组里面。

console.group("app.bundle");console.warn("来自bundle模块的警告信息1");console.warn("来自bundle模块的警告信息2");console.groupEnd(); console.group("app.bundle");console.log("来自bundle模块的信息1");console.log("来自bundle模块的信息2");console.groupEnd();

 

Chrome 控制台实用指南

 

 

这样的控制台信息看上去就一目了然了,就不用再为了找这是属于那一行代码输出的再翻一遍源码了。

另外,console.log家族还给我们提供了一个的API:第一个参数可以带一些格式化指令,比如%c,n;看下面这个炫酷的效果:

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

 

Chrome 控制台实用指南

 

 

当然,图片也是可以的,读者可以自行尝试,修改上述代码即可。

另外,console.log() 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。

 

Chrome 控制台实用指南

 

 

console.table

看着这种“黑魔法”是不是有种坑分的感觉呢,其实还不止哦!console.table可以让我们输出表格,示例:

var data = {code:200,content:[{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]};console.table(data.content);

 

Chrome 控制台实用指南

 

 

有的时候后端传回来一大串数据,是不是觉得直接console.log或是通过抓包工具查看都会让人晕头转向呢,这个时候正事console.table发挥作用的时候了,以表格的形式呈现数据,自然一目了然。

console.assert

var isDebug=false;console.assert(isDebug,'开发中的log信息。。。');

 

当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。

 

Chrome 控制台实用指南

 

 

console.count

除了条件输出的场景,还有常见的场景是计数。

当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任这样的任务.

 

Chrome 控制台实用指南

 

 

console.dir

将DOM结点以JAVAScript对象的形式输出到控制台,而console.log是直接将该DOM结点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。

console.dir(document.body);console.log(document.body);

 

Chrome 控制台实用指南

 

 

console.time & console.timeEnd

输出一些调试信息是控制台最常用的功能,当然,它的功能远不止于此。当做一些性能测试时,同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时,可以用console.time与 console.timeEnd来做此事。

console.time("Array耗时");var arraynew Array(10000000);for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object();};console.timeEnd("Array耗时");

 

Chrome 控制台实用指南

 

 

当想要查看CPU使用相关的信息时,可以使用console.profile配合 console.profileEnd来完成这个需求。

这一功能可以通过UI界面来完成,Chrome 开发者工具里面有个tab便是Profile。使用方法和console.time基本一样,其实time开发者工具里也有个tab就是timeline。关于console.prefile博主就不做多余的介绍了。想要做更多了解的读者可以看这里。

$

讲真,米国程序员们真的很喜欢money啊(谁又不是呢),看看php就知道了,满屏的$。而在Chrome的控制台里,$用处同样是蛮多且方便的。

2+2//回车,再$_+1//回车得5

上面的$_需要领悟其奥义才能使用得当,而$0~$4则代表了最近5个你选择过的DOM节点。

什么意思呢?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined。

 

Chrome 控制台实用指南

 

 

另外值得一赞的是,Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点,多么滴熟悉。

$('body');$$('div');

 

Chrome 控制台实用指南

 

 

$(selector)返回的是满足选择条件的首个DOM元素。

剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。

同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll() 的封装。

$x(path)

将所匹配的节点放在一个数组里返回

$x("//p");$x("//p[a]");

 

Chrome 控制台实用指南

 

 

$x("//p")匹配所有的p节点,$x("//p[a]");匹配所有子节点包含a的p节点

copy

copy(document.body)

 

然后你就可以Ctrl+v了。

注意:他不依附于任何全局变量比如window,所以其实在JS代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~这样我们就可以通过js代码进行复制操作而不用再依赖Flash插件了。

keys & values

这是一对基友。前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。具体请看下面的例子:

var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};keys(tfboy);values(tfboy);

 

Chrome 控制台实用指南

 

 

monitor & unmonitor

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。而unmonitor(function)便是用来停止这一监听。

function sayHello(name){ alert('hello,'+name);}monitor(sayHello);sayHello('damonare');sayHello('tjz');unmonitor(sayHello);

 

 

Chrome 控制台实用指南

 

 

 

debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。而其他还有好些命令则让人没有说的欲望,因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。

 

Chrome 控制台实用指南

 

 

原文链接:https://mp.weixin.qq.com/s/XagHDH_N2K9igi4jatB9Sw



Tags:Chrome   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
你在用的浏览器又更新了——本次 Chrome 95 稳定版为标签页分组新增了保存功能,Edge 95 稳定版则带来了更适合笔记本用户的高效能模式和 PDF 阅读体验改进。除此之...【详细内容】
2021-10-27  Tags: Chrome  点击:(42)  评论:(0)  加入收藏
Chrome F12 介绍 Chrome 开发者工具 F12 是前端开发、测试人员的利器,使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。其中的 Network 类似与 fiddle...【详细内容】
2021-08-26  Tags: Chrome  点击:(155)  评论:(0)  加入收藏
出品|开源中国文|御坂弟弟Google 在最新发布的 Chrome 浏览器中增加了一批新的 Chrome Actions,以便对该功能进行早期测试。Chrome Actions 是其最近推出的一项实验性功能,它...【详细内容】
2021-05-28  Tags: Chrome  点击:(171)  评论:(0)  加入收藏
Chrome 浏览器快捷命令命令列表 不知道或者忘记了命令怎么办,别急下面这条命令就是来拯救你的,只要记住这一条,就相当于记住了所有的命令,在 地址栏 中 输入下面的指令便可看到...【详细内容】
2021-05-19  Tags: Chrome  点击:(145)  评论:(0)  加入收藏
谷歌去年在 Android 版 Chrome 浏览器上引入了对“往返缓存”的支持,当用户点击后退或前进按钮时,可以瞬时加载页面。据外媒 Windows Latest 报道,谷歌 Chrome 92 版本已添加了...【详细内容】
2021-05-14  Tags: Chrome  点击:(183)  评论:(0)  加入收藏
IT之家3月29日消息 此前 iOS 版 Chrome 浏览器支持用户保存想要阅读的网页,以便以后查看,但并不放入书签。近日谷歌正尝试将该功能引入 Windows、Mac 以及 Linux、安卓平台。...【详细内容】
2021-03-29  Tags: Chrome  点击:(299)  评论:(0)  加入收藏
虽然在 Windows 系统中已原生整合远程桌面功能,但会被控制的客户端桌面会被强制重新调整,以适应控制方的设备。这意味着当你远程连接的时候,所有已经打开的应用都会变成小窗口...【详细内容】
2021-01-18  Tags: Chrome  点击:(202)  评论:(0)  加入收藏
微软正在推动让Progressive Web Apps的工作方式尽可能接近常规的原生应用。创新之一就是让Windows用户从Windows 10设置菜单中卸载Edge PWA。微软现在已经通过Open Source C...【详细内容】
2020-12-14  Tags: Chrome  点击:(181)  评论:(0)  加入收藏
1. Wappalyzer 想要了解一个网站的技术栈时就用它。Wappalyzer 可以分析网站所用的各项技术。它甚至可以帮助我们随时了解市场上的新兴技术信息。https://chrome.google.co...【详细内容】
2020-09-04  Tags: Chrome  点击:(86)  评论:(0)  加入收藏
以下仅代表个人的体验感受1.Infinity新标签页小编第一个接触到的谷歌浏览器插件,个性化十足,省去了去书签栏寻找的时间。每日背景,给你带来不一样的体验。Infinity设置界面 nfi...【详细内容】
2020-05-21  Tags: Chrome  点击:(116)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条