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

f12查看js

按下F12键可打开浏览器开发者工具，切换至”Sources”或”Console”标签页即可查看网页加载的

使用F12查看JS的详细方法

打开浏览器开发者工具

  • 快捷键：按下 F12 或 Ctrl+Shift+I（Windows/Linux），Cmd+Option+I（Mac）。
  • 菜单入口：浏览器右上角菜单（三个点）→ 更多工具 → 开发者工具。

切换到对应面板

面板名称 用途
Console（控制台） 查看console.log输出、直接执行JS代码
Sources（源代码） 查看/调试JS文件、设置断点
Network（网络） 分析XHR/Fetch请求中的JS文件
Elements（元素） 查看页面DOM结构及绑定的事件

在Sources面板中查看JS

  • 展开左侧文件树,找到目标JS文件（如app.js）。
  • 点击文件名可查看源码,右侧显示代码内容。
  • 调试功能：
    • 点击行号设置断点（断点处会显示蓝色标记）。
    • 按F10（步过）、F11（步进）执行代码。
    • 在Scope区域查看当前变量值。

在Console中执行JS

  • 直接输入JS代码（如document.title）并回车，可实时查看结果。
  • 支持调用页面中的函数或变量（需确保已加载）。

分析网络请求中的JS

  • 在Network面板中刷新页面，筛选.js文件。
  • 点击JS文件可查看其内容（如第三方库或动态加载的脚本）。

常见问题与场景

问题 解决方案
JS文件被压缩 在Sources面板右键点击文件 → Pretty-print Minified Source（格式化代码）
移动端调试 手机浏览器开启远程调试（如Chrome DevTools的USB连接）
动态生成的JS 在Sources面板刷新页面，或通过Audits面板检查资源

相关问题与解答

问题1：如何在手机浏览器中调试JS？

解答：

f12查看js 第1张

  1. Chrome浏览器：
    • 电脑与手机连接同一WiFi。
    • 手机访问chrome://inspect，启用“端口转发”。
    • 电脑打开chrome://inspect，选择手机设备进行调试。
  2. Safari浏览器：
    • 电脑开启“Web检查器”（偏好设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”）。
    • 手机与电脑通过USB连接,在电脑的Safari → 开发中选择设备。

问题2：如何查看动态生成的JS代码？

解答：

  1. 通过Network面板：
    • 刷新页面,观察.js文件列表，动态生成的脚本通常会在加载时出现。
  2. 在Sources面板强制刷新：
    • 右键点击Sources中的文件，选择Reload（非缓存刷新）。
  3. 监听事件：
    • 在Console中注入代码，如： 
      window.addEventListener('error', (e) => { console.log(e.target) });

      可捕获

f
0

相关文章