前端调试必备:CHROME CONSOLE控制台的使用:诊断并记录

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。 我们从console.log()开始,探索其他高级用法。

这篇文章主要讲以下几个内容:

使用log()进行基本的日志记录

使用error()和console.warn()来引人注目的东西

使用group()和console.groupEnd()来分组相关消息,避免混乱

使用assert()显示条件错误消息

写入控制台console

使用console.log()方法进行任何基本的日志记录到控制台。 它将一个或多个表达式作为参数,并将其当前值写入控制台,将多个参数连接成空格分隔的行。

在你的JavaScript中执行这行代码(注意在console下面写这段代码的时候,换行是shift+Enter)

那么,控制台就会输出以下信息:

自动完成命令

当您键入控制台时,控制台会自动显示一个与您输入的文本相匹配的相关方法的自动完成下拉菜单。 这包括您执行的以前的命令。这是命令的提示,能更好地帮你记得console有哪些命令:

组织控制台输出

消息放在一个组里

您可以将相关输出与组命令一起放在一个组里。 console.group()命令使用一个字符串参数来设置组的名称。 在您的JavaScript中调用它之后,控制台将开始将所有后续输出组合在一起。

要结束分组,只需在完成后调用console.groupEnd()。

示例输入:

例子输出:

嵌套组

日志组也可以彼此嵌套。 这对于一次看到一个较小的小组很有用。

此示例显示登录进程的身份验证阶段的日志组:

输出的结果如下:

自动折叠组

当大量使用群体时,在发生的事情看不到的时候可能非常有用。 对于这些时间,您可以通过调用console.groupCollapsed()而不是console.group()来自动折叠组,这样一个组就可以自动折叠起来,不会因为消息太多而忽略其他。

groupCollapsed() 的输出:

错误和警告

错误和警告的行为与正常记录相同。 唯一的区别是error()和warn()有样式来引起注意。

console.error()

console.error()方法显示红色图标和红色消息文本:

输出如下:

console.warn()

console.warn()方法显示带有消息文本的黄色警告图标:

输出如下:

Assertions

console.assert()方法仅在其第一个参数的计算结果为false时才有条件地显示错误字符串(第二个参数)。

一个简单的Assertions和它如何显示

只有当属于list元素的子节点数大于500时,以下代码才会在控制台中导致错误消息。

如何在控制台中显示断言失败:

字符串替换和格式

传递给任何日志记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个%符号和一个字母组成,该字母指示适用于该值的格式。字符串后面的参数按顺序应用于占位符。

以下示例使用字符串和数字格式化程序将值插入到输出字符串中。你会在控制台上看到“Sam has 100 points”。

格式说明符的完整列表:

此示例使用数字说明符来格式化document.childNodes.length的值。它还使用浮点说明符来格式化Date.now()的值。

代码:

输出如下:

使用CSS设计控制台输出

CSS格式说明符允许您自定义控制台中的显示。用说明符%c开始字符串,并给出你希望应用的样式作为第二个参数,就是说第二个样式为CSS的样式。 试试这个代码:

让你的输出字体是蓝色的,而且是large的

将DOM元素格式化为JavaScript对象

默认情况下,DOM元素以HTML的表示形式登录到控制台,但是有时您想要以JavaScript对象的形式访问DOM元素并检查其属性。您可以使用%o字符串说明符来执行此操作(请参阅上文),或者使用console.dir来实现相同的操作:

本文内容来自:chrome console控制台的使用: 诊断并记录 – Break易站

本文来自企鹅号 - 突破的枷锁媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听Allen瞎扯淡

Sed 命令详解

sed是stream editor的简称,也就是流编辑器。它一次处理一行内容,处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern spa...

9810
来自专栏GreenLeaves

Jquery filter()方法简介

利用filter函数可以从wrapper set中过滤符合条件的dom元素。 如下图html代码,假如我们要获取类名为filter的<a>标签,用filter方...

21890
来自专栏黒之染开发日记

对less的理解

less是写css时可以采用的另一种写法,用less的格式写出来的东西,可以通过编译器编译成css。也就是可以使用某种方法,把less文件变成css文件。编译成...

21520
来自专栏同步博客

Smarty的基本使用与总结

含义:Smarty是PHP的一个引擎模板,可以更好的进行逻辑与显示的分离,即我们常说的MVC,这个引擎的作用就是将C分离出来。

10230
来自专栏杨建荣的学习笔记

shell基础学习总结(二) (r3笔记第72天)

-->关于shell编程之文件比较 可以使用如下的选项来做文件的比较。有了这些选项,文件的比较来说都是游刃有余。 -d file file是否存在...

26040
来自专栏cnblogs

Javascript的内存泄漏分析

     作为程序员(更高大尚的称谓:研软件研发)的我们,无论是用Javascript,还是.net, java语言,肯定都遇到过内存泄漏的问题。只不过他们都有...

12520
来自专栏马涛涛的专栏

模块化、闭包与立即执行函数的使用、MVC里的V和C

将js分成不同的几个模块后,然后使用文件引入,但是会出现问题:如果使用var 声明变量,那么就会成为全局变量,这样容易覆盖.

21810
来自专栏北京马哥教育

Linux Bash脚本15分钟进阶教程

这里的技术技巧最初是来自谷歌的“Testing on the Toilet” (TOTT)。这里是一个修订和扩增版本。

7600
来自专栏Django Scrapy

Django安装及简单使用 1.2

Django安装及简单使用 1.2 代码都在github: URL:https://github.com/njxshr/codes/tree/master/...

32980
来自专栏十月梦想

Promise对象、传参以及错误处理

在大部分情况下我们的程序都是在进行异步操作,需要嵌套多次callback,使得程序变得复杂!ES6中提供了Promise对象,将非阻塞I/O变为阻塞I/O,把异...

76210

扫码关注云+社区

领取腾讯云代金券