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

f12 js调试

按F12或右键检查打开浏览器控制台，切换至Sources面板，可设置断点、查看

F12 JS调试详解

打开开发者工具

  1. 快捷键：F12 或 Ctrl+Shift+I（Windows/Linux），Cmd+Option+I（Mac）
  2. 浏览器菜单：右键点击页面 → 选择“检查”或“检查元素”
  3. 移动端调试：通过USB连接手机，在Chrome开发者工具中选择“Toggle device toolbar”

核心调试功能

功能模块 说明
Sources 源代码调试（设置断点、单步执行、查看调用栈）
Console 输出日志、执行JS代码、查看变量/对象
Network 监控网络请求（XHR/Fetch/API）
Elements 实时修改HTML/CSS，查看DOM结构
Application 查看本地存储、Cookie、缓存资源
Performance 性能分析（记录页面加载、脚本执行时间）

断点类型与用法

断点类型 操作方式 适用场景
行级断点 点击代码行号左侧 → 红色圆点出现 单步跟踪代码执行流程
条件断点 右键断点 → 输入条件表达式（如 i > 5） 仅在满足条件时触发
日志断点 右键断点 → 选择“Log Point” → 自动打印变量值到Console 快速查看变量变化
DOM断点 在Elements面板右键元素 → 选择“Break on” → 属性/子树/移除变化时触发 调试动态DOM操作
XHR断点 在Network面板过滤XHR请求 → 点击请求 → 点击“Initiator”定位源码位置 调试异步请求

调试流程示例

场景：调试一个按钮点击事件

  1. 设置断点：在事件回调函数第一行点击行号左侧
  2. 触发事件：点击页面按钮
  3. 暂停执行：代码停在断点处，此时可：
    • 查看局部变量（Scope Panel）
    • 逐行执行（Step Over/Into/Out）
    • 修改变量值（直接编辑或Console赋值）
  4. 继续执行：点击“Resume Script”或按F8

高级调试技巧

  1. 异步代码调试

    f12 js调试 第1张

    • 在Promise链中添加.then(() => debugger)
    • 使用async/await时在await前一行插入debugger;
      fetchData().then(data => {
debugger; // 断点会在Promise resolved后触发
console.log(data);
});

  2. 远程调试

    • 手机调试：启用USB调试 → 浏览器地址栏输入chrome://inspect
    • 跨域调试：在被调试页面注入window.name或localStorage传递debug标识

  3. 性能优化

    • 在Performance面板录制操作 → 分析火焰图（Flame Graph）
    • 强制垃圾回收：在Console执行window.gc()（需开启相关设置）

常见问题与解决方案

问题 解决方案
断点不触发 确认代码已执行到断点位置
清除浏览器缓存（Ctrl+F5）
检查是否在iframe中
变量显示undefined 确认变量已声明
检查作用域（可能是块级作用域或闭包）
使用console.assert(variable)预验证
控制台报错未捕获 在Sources面板“Pause on exceptions”勾选（包含未捕获异常）
使用try...catch包裹代码

【相关问题与解答】

Q1：如何调试页面加载时的III型错误（如“Uncaught TypeError”）？

A：

  1. 打开Sources面板，勾选“Pause on all exceptions”（包括未捕获异常）
  2. 刷新页面，断点会自动停在错误发生的位置
  3. 查看Scope面板中的变量状态，定位错误原因（如未定义变量、类型错误）

Q2：如何在移动端（如Android/iOS）调试H5页面？

A：

  1. 物理设备调试：
    • Android：启用开发者模式 → USB连接电脑 → Chrome地址栏输入chrome://inspect
    • iOS：Mac安装Xcode → 手机信任电脑 → Safari开启“Web检查器”
  2. 远程调试：
    • 在PC端打开浏览器（如Chrome）→ 输入手机IP+端口（如http://192.168.1.100:9222）
    • 点击页面“Inspect”按钮即可打开完整开发者
f1
0

相关文章