Skip to main content

Chrome 调试技巧

推荐直接倍速看我的视频讲解

Elements 面板

$0: 最后一次点击的元素。可以追溯到$4。 $_: 控制台返回的结果

$$ : document.querySelectorAll() $: document.querySelector()

H: 快捷展示/隐藏元素

单个class样式移除

node截图/全屏截图

DOM断点

设备大小

xPath: //a/div/img

Console面板

console.log('%caa', 'font-size: 20px; color: red')
inspect($('#root'))  //位置 & 返回值
node -inspect-brk "nodeFile"
  • 断点

    • 条件断点
  • setTimeout(() => { debugger }, 3000)

  • live-expression:window.innerWidth

  • copy:

    [{ name: 'amy'}, { name: 'keep alive'}]

$i(’lodash’)

登录后复制:

document.designMode='on'

// or

document.body.contentEditable='true'

不在代码中插入console.log

console.table结合{}的妙用

const name = 'aliveAmy';
const gender = 'female';
const hobbies = 'coding, painting, reading, language';
console.table({name, gender, hobbies})

Sources面板

Override: reload & show the change

snippet

Network面板

initiator——call stack

timing

throttling

network condition

request filter

选择多个展示维度

requestly

Memory面板

console.log(getEventListeners(window))

performance monitor

Application面板

Security面板

Performance面板

Drawer

show css change Animation $$