chrome调试技巧
2020-06-15 本文已影响0人
晗笑书生
chrome调试技巧
dom的右边的弹出窗的功能
image.png
分为几个部门 上面是dom修改的 添加编辑属性 编辑html 删除元素
copy中能选择各种选择父
force State 更改dom的状态为actived hover visited 等
break on 子domTree变更 属性修改 节点删除 调试dom变化中使用 类似
MutationObserver
store as global variable 存为一个全局变量 这个也常常使用
$_ $0 $1 $2 $3 $n
$0 标识当前选择的dom $n最后第几次选择的dom
$_ 标识上一次运行的接口
image.png
$ $$
$ 是document.querySelector()的别称
$$ 是document.querySelectorAll()的别称
image.png
console
// 推荐直接打印对象
console.log('1', {b})
image.png
console.log('%cvue尤大大'，'color:red; font-size:20px;' ) -
%c能控制对应的样式 或图片输出
image.png
console.time('tag') console.timeEnd('tagEnd') 打印时差
console.count('tag') console.resetCount() 调用次数
查看掘金的全局store中的数据
// copy命令 copy命名能美化输出 直观输出查看
vue响应式的数据 使用copy命令 再粘贴可以直接看到数据
如图查看下掘金的vuex里面存了些什么数据可以使用 copy($('#juejin').__vue__.$store._vm._data)
image.png
