• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
如何利用谷歌Chrome浏览器查看网页哪些js被触发?
作者:织晶网络 发布于:2023/4/28 15:30:02 点击量: 来源:编织梦想的猫

场景:在调试web页面时,我们想修改某处的js效果,但由于页面引入的js文件较多,不知道该在哪个文件里去找,这时候可以利用Chrome浏览器来帮助我们调试。

如何使用

1.在Chrome浏览器中按F12打开开发者工具,切换到Sources(源码)选项卡
2.在Sources(源码)选项卡右侧找到Event Listener Breakpoints(事件监听断点),勾选你想监听的事件
3.在all Stack(函数调用栈)中观察

示例

例如本篇博客右侧有一个“返回顶部”的按钮,我们想找到这个按钮绑定的点击事件并做修改。

1.在Chrome浏览器中按F12打开开发者工具,切换到Sources(源码)选项卡:

2.在Sources(源码)选项卡右侧找到Event Listener Breakpoints(事件监听断点),勾选鼠标的点击事件:

3.点击“返回顶部”按钮,然后在右侧all Stack(函数调用栈)中观察:

点击调用栈中的断点,左侧将会定位到相应的js代码处:

点击图中的按钮或者按F11,将会进入到函数内部继续查看:

也可以点击图中的按钮或F10,跳过函数执行下一行代码:

可以发现通过以上办法可以迅速的找到相应的代码,方便我们定位并修改。当然有的时候并不是那么快就可以找到,需要我们一步一步的点击并查看。



上一篇:js中将两个以上的一维数组转成一个二维数组

下一篇:composer命令中create-project与require之间的区别