chrome调试技巧

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

show changes 面板 查看changes

show