网页开发中,如何快速定位特定函数所在的 JS 文件?

网页开发中,如何快速定位特定函数所在的 JS 文件?

如何在众多 js 文件中快速定位函数位置?

当开发网页时,需要查找解决效果问题的函数,但 html 和 JS 代码文件分离,处理函数隐藏在众多 JS 文件中。如何快速定位到特定函数所在的 JS 文件?

解决方案:

可以通过审查元素和浏览器调试工具定位函数所在的 JS 文件:

  1. 右键审查元素:在需要检查的元素上右键,选择“审查元素”。
  2. 查找元素 dom在浏览器的调试工具中,定位到该元素的 DOM 节点。
  3. 定位 JS 处理器在 DOM 节点中,找到包含元素事件处理器的属性。如 onclick=”functionA()”,其中 functionA() 是处理 JS 函数。
  4. 查看脚本源:将鼠标悬停在处理函数的名称上,浏览器会显示脚本源。
  5. 定位 JS 文件:在脚本源中,找到函数的定义位置,即所在的 JS 文件。

示例:

如下图所示,通过审查元素找到一个包含 onclick 属性的元素:

[图片 1]

将鼠标悬停在函数名称 toggleLayout 上,浏览器显示脚本源:

[图片 2]

可以在脚本源中找到函数的定义,确定它位于 layout.js 文件中。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容