前端开发Chrome调试的小技巧
前端开发Chrome调试的小技巧
1、呼出快速指令面板:cmd + shift + p
在Devtools界面下,键入cmd + shift + p将其激活,然后开端在栏中键入要查寻的命令或输入?号以查看所有可用命令 .
如下图:其中Open file,Go to line,Go to symbol关于快速翻开文件和定位文件位置还是节约了不少时间.
2、机能监视器: performance monitor
3、当地覆盖:local overrides
感受这个特性是超级棒。 使用我们本人的当地资源覆盖网页所使用的资源。 多说无益,直接举个例子大家就清楚了。
大家看到了吧,我们可以把网络资源直接和当地资源映射,再次刷新网页,取得资源文件就是当地的了。这种对js、css等文件大量修改调试特殊有用。
local overrides还可以模拟Mock数据,假如后端API还不OK或者不想频繁的公布后台API。这个功效是相当有用,不外据说还不支撑XHR恳求。
4、操纵台内置指令
私认为假如网页里面假如没有援用jquery是不是就不克不及使用$这样的语法了,nonono
$(selector, [startNode]):单选中器
可以选中元素并触发元素事件.
$$(选中器,[startNode]):全选中器 $x(path, [startNode]):xpath选中器
$x(path)返回与给定xpath表达式匹配的DOM元素数组 .
$x('//p'):返回页面上的所有p元素。
getEventListeners(object):猎取指定对象的绑定事件
5、Console...的多种用途
1.变量打印:%s、%o、%d、和%c
例如: const text = "文本1"
console.log(打印${text}) //结果为打印文本1
2.布尔断言打印:console.assert()
做前端调试时很有用。
3.console.table()内容可以以表格的情势输出.
更多前端开发技巧,请关注js教程栏目。
以上就是前端开发Chrome调试的小技巧的具体内容,更多请关注百分百源码网其它相关文章!