chrome调试

2022/08/26 FrontEnd 共 645 字,约 2 分钟

chrome调试

控制台打印对象

console.log

console.table: 如果你要打印的变量是一个数组,每一个元素都是一个对象。我建议你使用console.table来打印,其表格化的呈现更加美观易读。

选择元素

$ 和 $$

如果你在 console 下没有任何库使用$和$$,那么你可以使用它们分别作为document.querySelector() 和 document.querySelectorAll()的快捷键。

$0

如果你想引用某个 DOM 元素,使用$0。$0指向你当前在 Element 中选中的元素。如果指定了$0,$1指向之前选中的元素。以此类推,直到$4都可以使用。

getEventListeners()

getEventListeners(domElement) 返回在 DOM 元素上注册的所有的事件

函数断点debug(fn)

如果你想在点击按钮后的执行过程中暂停,你可以使用debug函数。debug(fn)接收一个函数作为参数,当每次该函数被调用时,Debugger 就会在该函数的第一行中断执行。

想象一下你要 debug 一个按钮的问题,但是你不知道这个按钮对应的事件函数在代码中什么位置。除了去大量的源代码中慢慢寻找之外,还有一个巧妙的方法。使用getEventListeners函数,然后将debug方法注入进去。这样,当你点击按钮的时候,就会在该函数的第一行停下来。

监听dom元素断点

可以找到改dom元素属性的js位置。

elements上右键break on, 选attribute.

参考

参考

Search

    Table of Contents