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

f12调试的时候怎么看js

按F12打开浏览器开发者工具，切换至”Sources”标签页，可查看网页加载的JS文件，在代码行号处点击可设置断点，通过右侧控制台观察变量变化，实时

F12调试时查看JS的详细方法

面板名称	功能描述
Console	查看日志输出、错误信息、执行JS代码
Sources	查看/编辑源代码、设置断点、调试JS逻辑
Network	监控网络请求，分析Ajax/Fetch请求的参数和响应
Elements	查看DOM结构，动态修改HTML/CSS（辅助JS调试）
Performance	分析页面性能，定位JS执行耗时问题（需结合JS调试）

在Sources面板中定位JS文件：
- 展开左侧文件树，找到目标JS文件（可按文件夹筛选）。
- 点击文件名打开代码视图,右侧会显示对应的源码。
设置断点调试：
- 行号断点：点击行号区域,出现蓝色标记。
- 条件断点：右键断点 → 设置条件（如 x > 5）。
- 断点分组：在断点列表右侧可命名/禁用断点。
调试工具使用：
- Step系列按钮：
  - Step Over（F10）：逐行执行（不进入函数内部）。
  - Step Into（F11）：进入函数内部。
  - Step Out（Shift+F11）：跳出当前函数。
- Watch Expressions：右侧Watch栏输入变量名,实时监控值变化。
- Call Stack：查看当前执行的函数调用链。
Console交互调试：
- 输入变量名直接查看值（需在同作用域下）。
- 使用 $0 代表当前选中的DOM元素（如 $0.textContent）。
- 执行临时代码：localStorage.getItem('token')。

为什么Console看不到我的日志？
- 检查代码是否被执行（如未触发事件或被条件拦截）。
- 确认代码在<script>标签内或模块正确加载。
- 使用 debugger 语句强制暂停（等效于手动断点）。
如何追踪异步请求的回调？
- 在 Network 面板过滤XHR/Fetch请求。
- 点击请求 → Preview 查看响应数据。
- 在 Sources 面板搜索回调函数名,设置断点。