当前位置：首页 > 行业动态 > 正文

f12查看网页执行的js

按F12打开开发者工具，切换至Console或Sources面板，可查看、调试网页JS代码，支持断点、实时执行

使用F12查看网页执行的JS方法详解

打开浏览器开发者工具

  1. 快捷键：在网页中按 F12 或 Ctrl+Shift+I（Windows/Linux）/Cmd+Option+I（Mac）。
  2. 菜单入口：浏览器右上角菜单（三个点或齿轮图标）→ 更多工具 → 开发者工具。
  3. 右键菜单：在网页空白处右键 → 选择 检查（或 Inspect）。

定位JavaScript相关面板

面板名称 功能描述
Console 查看日志输出、错误信息，可直接执行JS代码
Sources 查看网页加载的JS文件源码，支持断点调试
Network 监控网络请求，分析JS文件加载顺序
Event Listeners 查看DOM元素绑定的事件及回调函数

查看网页执行的JS代码

  1. 在Sources面板中查找JS文件：

    • 展开左侧文件树，筛选 .js 文件。
    • 双击文件即可查看源码,右侧会显示代码行号对应的执行位置。

  2. 通过Console查看执行结果：

    f12查看网页执行的js 第1张

    • 输入 document.currentScript 可查看当前正在执行的脚本。
    • 输入 performance.getEntriesByType("script") 列出所有加载的JS资源。

调试JavaScript代码

  1. 设置断点：

    • 在Sources面板的行号区域点击,添加断点。
    • 当代码执行到断点时，会自动暂停,方便逐行调试。

  2. 监控变量和执行流程：

    • Scope面板：查看当前作用域内的变量值。
    • Call Stack：追踪函数调用层级。
    • Watch Expressions：手动添加表达式监控变量变化。

常见问题与解决

问题 解决方案
找不到JS文件 检查Network面板是否被防火墙阻止，或尝试刷新页面（Ctrl+R）重新加载资源
断点不生效 确保断点设在实际执行的代码行，避免在未执行的代码或框架代码中断点
Console输出混乱 使用 console.group() 和 console.groupEnd() 整理日志，或通过关键词筛选（Ctrl+F）

相关问题与解答

问题1：如何临时修改网页中的JS代码？

解答：
在Sources面板中，找到目标JS文件后，直接修改代码内容，修改后按 Ctrl+S（或 Cmd+S）保存，浏览器会热更新代码（仅限当前会话，刷新页面后恢复原样）。

问题2：如何查看某个DOM元素绑定的事件处理函数？

解答：

  1. 在Elements面板选中目标元素。
  2. 右侧 Event Listeners 列表会显示所有绑定的事件（如 click、mouseover）。
  3. 点击事件名称旁的箭头，可展开查看
开发者工具
0

相关文章