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

f12怎么看js

按下F12打开浏览器开发者工具，切换至”Sources”或”Console”标签页，可查看网页加载的JS文件、执行日志及调试脚本，不同浏览器标签名称略有差异

打开浏览器开发者工具

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

定位 JavaScript 代码

面板 功能
Sources 查看网页加载的 JavaScript 文件、设置断点、调试源码。
Console 执行临时代码、查看日志输出（console.log）、捕获错误。
Network 分析网络请求中的 .js 文件（如异步加载的脚本）。

操作步骤：

  1. 在 Sources 面板中：

    f12怎么看js 第1张

    • 展开左侧文件树，找到目标 .js 文件（可按 Ctrl+P 搜索文件名）。
    • 点击文件后，右侧会显示代码内容，可设置行断点（点击行号）。

  2. 在 Network 面板中：

    • 刷新页面（F5），过滤资源类型为 JS。
    • 点击 .js 文件,查看其内容或发起请求的细节。

调试 JavaScript 代码

断点调试

  • 行断点：在 Sources 面板的代码行号处点击,设置断点。
  • 条件断点：右键断点 → Edit → 输入条件（如 i === 3）。
  • 逐步执行：使用工具栏的 Step Over（逐行执行）、Step Into（进入函数）。

监控变量

  • Watch Expressions：在 Sources 面板右侧 Watch 区域,手动添加变量名。
  • Scope Panel：自动显示当前作用域内的变量值。

控制台交互

  • 在 Console 面板输入命令， 
    console.log(window.location); // 输出当前URL
  • 直接修改全局变量： 
    myGlobalVar = 100; // 修改后页面可能立即响应

常见问题与场景

如何找到动态生成的脚本？

  • 某些脚本通过 eval 或动态插入（如 document.write）加载，需在 Sources 面板启用 Async scripts blackboxing：
    • 点击右上角齿轮图标 → Blackboxing → 勾选 Show async scripts as blackboxes。

如何分析网络请求中的 JS？

  • 在 Network 面板中找到 .js 文件，点击后：
    • Headers：查看请求头/响应头。
    • Response：查看脚本内容（可能已压缩）。
    • Initiator：追踪脚本来源（如由哪个HTML标签触发）。

相关问题与解答

问题 1：如何查看页面加载的所有 JS 文件？

  • 解答：
    1. 打开 Network 面板。
    2. 刷新页面（F5），过滤资源类型为 JS。
    3. 列表会显示所有 .js 文件及其加载顺序、大小、加载时间。

问题 2：如何模拟移动端调试 JS？

  • 解答：
    1. 点击开发者工具左上角的 设备图标（Toggle device toolbar）。
    2. 选择移动设备（如 iPhone X）。
    3. 页面会自动重置为移动端视图,此时可调试触屏事件或移动端专属的
javascript开发者工具
0

相关文章