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'}]

登录后复制:

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 $$