chrome devtools用法

Posted 2021-03-10 chunshan-blog

一、console.table()可以表格的形式直观输出结构复杂的数据

二、console.dir()/dir()可以输出一个对象的所有对象属性

三、console.count()可以用来记录函数的调用次数

四、console.profile()可以用来记录性能数据

五、console.time()和console.timeEnd()可以启动一个定时器，计算时间间隔

六、copy()可以拷贝一个对象

七、在Elements选项中点击一个dom元素，然后在console中输入$0，回车，会打印出选中的dom元素(调用栈会保存五个点击元素的历史，依次为$0-$5),$0是最新的

八、在console中选中上一步打印出的dom元素，右键Scroll into view会滚动到页面对应元素位置

九、在console中输入$_可以返回上一步输出的内容

十、monitor和unmonitor可以监听一个函数

十一、monitorEvents和unmonitorEvents可以用来监听事件

十二、console中可以直接使用await 调用fetch，不用再async函数中

十三、source面板下的子选项Filesystem中可以打开文件夹，在浏览器编辑内容，修改会同步本地文件。

十五、Network面板下资源链接右键可以copy为fetch

十六、ctrl+shift+p可以打开命令面板，在里面输入Screenshot可以使用内置的截屏功能

十七、console面板下的小眼睛图标可以输入动态表达式

十八、ctrl+ship+p,输入show Animate可以打开动画监听面板

十九、clear()可以用来清空控制台

二十、keys(),values()可以分别获取一个对象的键数组和值数组

二十一、可以使用$()返回满足指定css规则的一个元素，此方法为document.querySelector()的简化，$$()可以用来获取多个元素，是document.querySelectorAll()的简化，$x()返回指定XPath的所有元素。

二十二、debugger断点

二十三、ctrl+shift+p打开控制台输入theme可以切换主题

参考文章：https://mp.weixin.qq.com/s/t7hfYA8EOQ1v3jedBENANQ