Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chrome控制台常用高级console指令 #84

Open
FrankKai opened this issue Jul 7, 2018 · 0 comments
Open

chrome控制台常用高级console指令 #84

FrankKai opened this issue Jul 7, 2018 · 0 comments

Comments

@FrankKai
Copy link
Owner

FrankKai commented Jul 7, 2018

image

1.console.assert()

判断第一个参数是否为true,false的话抛出异常并且输出信息到console.

image

2.console.group()

使日志按照一定的层次关系输出,树状结构调试清晰化,适合层次结构较简单的日志输出。

添加console.group()前:

image

添加console.group()后:

image

3.console.groupCollapsed()

与console.group()用法相同,唯一的区别就是会console.groupCollapsed()方法默认折叠日志,适合层次结构较为复杂的日志输出。

image

4.console.groupEnd()

结束当前树状结构日志打印,与console.group()和console.groupCollapsed()配合使用。

5.console.table()

以表格的形式输出数据,使数组或者对象的详细信息更加形象地展示出来。

①低级地使用console.log()查看数组:
image

使用console.table()查看数组:

image

通过对比,可以看出,console.table()显示我们主要关注的信息更加形象,具体,直观,优于console.log()。

②使用console.table()查看对象:

image

console.table()可以过滤对象属性,选择部分属性显示.

各对象都有name,sex和age三个属性,我们使用console.table()挑选出name和age属性显示。

为什么只学了5个高级console指令?

image

要理性购物,对不对,学习不在多,而在于学以致用!

近一点说是为了加速Qlik可视化插件开发,远一点呢?

还是那句即将审美疲劳的励志鸡汤:

努力成为优秀的前端工程师!

希望这篇博客对大家有用!

----------------------分割线---------------------------

1.console.dir()----查看对象属性的比console.log()更好的方法,因为它可以打印DOM对象的属性。

打印javascript对象的属性列表,这个列表可以交互。console.log()也可以打印对象,但是在打印DOM对象的时候会打印出HTML片断,打印不出所需的DOM对象属性。

例如:

console.log(document)

image

而console.dir(document)
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant