这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战
怎样打开console控制台?
首先打开chrome浏览器,按F12即可打开console控制台
如图:
控制台方法和属性
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.profile和console.profileEnd配合一起使用来查看CPU使用相关信息
在Profiles面板里面查看就可以看到cpu相关使用信息
15.console.timeLine和console.timeLineEnd配合一起记录一段时间轴
16.console.trace 堆栈跟踪相关的调试
chrome的快捷命令
Chrome 的命令菜单。命令菜单之于 Chrome,就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。
首先,我们打开 Chrome 开发者工具,然后使用以下快捷键打开命令菜单:
- windows:Ctrl + Shift + P
- macOS:Cmd + Shift + P
- Screenshot Capture full size screenshot 截取网页上所有内容的屏幕快照,包括可视窗口中未显示的所有内容。
- Screenshot Capture node screenshot 精确捕获 DOM 元素的内容。
可以截取完整的页面图: juejin.cn_post_6844903492423778312.png