Chrome console控制台用法

409 阅读2分钟

这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战

怎样打开console控制台?

首先打开chrome浏览器,按F12即可打开console控制台

如图:

image.png


控制台方法和属性

1.console.log 用于输出普通信息

console.log(x);

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

console.info(x);

3.console.error用于输出错误信息

console.error(x);

4.console.warn用于输出警示信息

console.warn(x);

5.console.debug用于输出调试信息

console.debug(x);

6.console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码

7.console.group输出一组信息的开头

8.console.groupEnd结束一组输出信息

9.console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

10.console.count(这个方法非常实用哦)当你想统计代码被执行的次数

11.console.dir(这个方法是我经常使用的 可不知道比for in方便了多少)直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

12.console.time 计时开始

13.console.timeEnd 计时结束(看了下面的图你瞬间就感受到它的厉害了)

14.console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信息

在Profiles面板里面查看就可以看到cpu相关使用信息

15.console.timeLineconsole.timeLineEnd配合一起记录一段时间轴

16.console.trace 堆栈跟踪相关的调试


chrome的快捷命令

Chrome 的命令菜单。命令菜单之于 Chrome,就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。

首先,我们打开 Chrome 开发者工具,然后使用以下快捷键打开命令菜单:

  • windows:Ctrl + Shift + P
  • macOS:Cmd + Shift + P

image.gif

  • Screenshot Capture full size screenshot 截取网页上所有内容的屏幕快照,包括可视窗口中未显示的所有内容。
  • Screenshot Capture node screenshot 精确捕获 DOM 元素的内容。

image.png

可以截取完整的页面图: juejin.cn_post_6844903492423778312.png