当前位置: 首页 > Web前端 > HTML

chrome开发者工具tutorial-02-console面板

时间:2023-03-28 15:43:03 HTML

录了个视频放b站上https://www.bilibili.com/video...视频比文章1更清晰详细,编辑代码:一些快捷键:执行:enter换行:shiftenter自动补全:tab上下方向键:上次输入/下一次输入跳转到行首/行尾:home/end跳转到段落开头停靠:ctrlhome/ctrlendorpageup/pagedown2、magic变量$:相当于document.querySelector$$:相当于document.querySelectorAll$0:当前选中的DOM元素$_:上次执行的结果copy函数:复制变量到剪贴板,复制后按ctrlv粘贴注意:这些变量只有在控制台才有,方便开发调试,不能写在js文件中。3.对象是alive的(第一次展开时的值)4.控制台记录console.log:信息console.warn:警告console.error:错误console.trace:看函数调用栈console.timeconsole.timeEnd二调用时间差1151毫秒console.profileconsole.profileEnd:记录性能描述信息console.profile('test')doSomething()console.profileEnd('test')functiondoSomething(){}然后去Moretools->JavaScriptProfiler看到相关资料点击右边的文件名可以跳转到代码在源码面板的位置5、工具栏搜索、菜单栏(清除、过滤、默认级别、)//看视频,懒得写了6、设置preservelog:(刷新页面时)keepthelogautocompletefromhistory:自动补全历史数据,selectedcontextonly:只显示当前执行上下文的日志(默认不勾选,一般不要检查)在co中将相似的消息分组nsole:同一个log,连续播放,只显示一行EagerEvaluation:控制台写入表达式时,显示预览结果。评估触发用户激活:检测触发用户激活。有些API只有在用户有操作时才能调用。当用户不操作时,不执行JS调用,如window.open(),自动播放音视频;但是控制台默认没有这个限制(这个按钮是勾选的),调用api是可以正常执行的。同样一段代码,在控制台运行的效果和在网页运行代码的效果是不一样的。如果希望在控制台调试的效果与代码在网页运行的实际效果一致,可以取消勾选evaluatetriggersuseractivation。