一、准备排查
排查 JavaScript 本身就是一门技能，而排查用 JavaScript 构建的 Lightning Web Components 更是在此基础之上。你首先要发现的是：LWC 是编译并压缩（minified）的——压缩让它们更小、更快加载，但也让排查变得困难：换行被移除、变量名被改短。这个动手模块教你用 Chrome DevTools 调试 LWC：启用 Debug Mode 获取未压缩代码、用断点暂停执行、用 Watch 实时监控变量、用 Console 交互式执行 JavaScript。最终你能高效调试任何 LWC 问题而无需 console.log。
LWC 的 JavaScript 挑战与准备工作
LWC 在送达浏览器前会被编译并压缩——压缩移除换行、缩短变量名（a、b、c）、合并文件，这让调试几乎不可能：你在源码里认识的变量名在生产里都消失了。解决方案：开发时使用未压缩代码。Chrome DevTools 是你的主要工具，内建于 Chrome、无需安装。
三个单元的学习目标：Unit 1（DevTools 设置）——启用 Debug Mode 获取未压缩代码、开发时禁用缓存、从 GitHub 获取未压缩源码、为 @track 属性启用自定义格式化器、用 Ignore List 过滤噪音；Unit 2（断点）——行断点、条件断点、事件监听器断点、管理与导航；Unit 3（监控）——Watch 表达式与变量、Console 交互式调试、暂停与恢复。最终：无需 console.log 就能调试 LWC。
启用 Debug Mode 与禁用缓存
两个关键的设置步骤：
启用 Debug Mode（Setup → Debug Mode，勾选你的用户并 Enable）：这会让 Salesforce 向浏览器提供未压缩的 JavaScript——变量名保持与源码一致、换行与注释保留、代码结构可读。没有 Debug Mode，你调试的是单字母变量的压缩代码，几乎无法理解。这是最重要的单个设置步骤，应在所有 LWC 开发期间启用。
禁用缓存：LWC 缓存组件定义以提升性能——对用户是好事，但开发时它会隐藏你的最新改动。两种方式禁用：Chrome DevTools 的 Network 选项卡勾选「Disable cache」（快速，适合短会话），或 Setup → Session Settings 取消勾选「Enable secure and persistent browser caching」（持久，适合长会话）。禁用后每次刷新都获取最新代码。记住：调试完要重新启用缓存（性能测试、UAT、生产部署前）。
从 GitHub 获取源代码（Source Maps）
即使启用了 Debug Mode，Salesforce 也不会提供原始源码。为了最佳调试体验，从 GitHub 克隆 Salesforce 示例应用仓库（含你的 LWC）。有了本地源码：DevTools 可以用 source maps 把压缩/生产代码映射回原始源文件——你看到自己的变量名、注释、文件结构，在原始源码行上设的断点在浏览器里生效。
Source maps 是编译代码与原始源码之间的桥梁：compiled.js（浏览器）← source map → myComponent.js（你的机器）。这意味着：用可读的变量名调试、在 DevTools 里看到你的文件结构、在原始源码行上设断点、逐行调试你的代码而非编译产物。GitHub 源码 + Debug Mode + 禁用缓存 = 完整的调试环境。
打开 DevTools：Sources 面板
打开 Chrome DevTools 的三种方式：F12、Ctrl+Shift+I（Windows）/ Cmd+Opt+I（Mac）、右键 → Inspect。LWC 调试的关键面板：Sources（查看 JavaScript 文件、设断点、逐步执行）、Console（执行 JavaScript 命令、查看输出、与页面交互）、Elements（检查 DOM、查看组件结构）、Network（监控 API 调用）。本模块聚焦 Sources 与 Console。
Sources 面板是你的调试工作区：左侧 File Navigator（Page 标签显示当前页面加载的文件）、中间 Code Editor（查看源码、点击行号设断点）、右侧调试控件（Watch、Call Stack、Scope、Breakpoints）。熟悉这个布局——所有 LWC 调试都用它。
更改 DevTools 位置：默认停靠右侧，也可停靠左侧/底部或分离成独立窗口（快捷键 Ctrl+Shift+D 循环切换）。选择适合你工作流的位置——底部适合宽屏，右侧适合笔记本，独立窗口适合双显示器。
启用自定义格式化器与 Ignore List
启用自定义格式化器：LWC 用 JavaScript Proxy 实现 @track 响应式。在 DevTools Console 里，代理属性默认不显示实际值——你看到的是 Proxy{} 而非真实数据。自定义格式化器解决这个问题：在 Debug Mode 下把代理操作成可读部分，让你看到实际值而非代理。启用：DevTools → Settings → Preferences → Console → 勾选 Custom formatters。没有它处处是 Proxy{}，有了它就能看到实际值。
Use Ignore List：DevTools 显示所有 JavaScript——包括 Salesforce 框架代码、库、第三方脚本，这很嘈杂。Ignore List 过滤掉你不想调试的代码：Settings → Ignore List → Add regex rule → 输入 /components/.*.js$。被忽略的文件从调用栈与文件导航器隐藏，忽略文件里的断点在调试时被跳过。忽略 Salesforce 框架代码（aura、lwc）、第三方库、压缩 bundle，聚焦你自己的组件文件——更干净的调试、更快的排查。
在 Sources 中定位 LWC
LWC 文件在 DevTools 里按组件命名空间与名称组织：components / 你的命名空间 / 组件名。在 Sources 面板展开 Page → top → components → c → 你的组件名，会看到 .js（JavaScript 类）、.html（模板）等文件。启用 Debug Mode 后代码是可读的——真实变量名、正确格式、保留注释；没有 Debug Mode 则全压缩成单字母变量、单行。
快速导航技巧：Ctrl+P（Mac 是 Cmd+P）在 Sources 打开文件搜索，输入组件名直接跳到其 JS 文件；用 Filesystem 标签添加本地项目文件夹，DevTools 可映射到你的原始源码（可临时编辑、改动即时可见）。文件搜索是最快的导航方式——学会并经常使用它，就像 VS Code 的 Ctrl+P。
二、使用断点
本单元掌握断点。你将用正确的 DevTools 断点取代 debugger 语句：行断点（在特定行暂停）、条件断点（仅在条件满足时暂停）、事件监听器断点（事件触发时暂停）。你还将学习高效管理与导航断点，理解断点控制工具栏按钮：Resume、Step Over、Step Into、Step Out、Step。
行断点与步进代码
行断点在特定行暂停 JavaScript 执行——比 debugger 语句更好：无需改代码（无需清理！）、设置/移除不用编辑文件、可条件化、在一个面板里集中查看、跨页面刷新持久。设置：在 Sources 点击行号，出现蓝色标记。移除：再点一次。
暂停时用这些控件导航（所有浏览器/调试器都一样）：Step Over（F10）——执行当前行并移到同函数下一行；Step Into（F11）——进入当前行调用的函数；Step Out（Shift+F11）——完成当前函数返回调用者；Resume（F8）——继续执行到下一个断点。Call Stack（右侧面板）显示当前执行路径——哪个函数调用了哪个，点击任意帧查看其变量。
导航与管理断点
调试会话增长后，你会在多个文件里有断点。Breakpoints 面板（右侧）按文件列出所有断点：复选框启用/禁用（无需移除）、右键 → Remove / Remove all / Deactivate all、点击条目跳转到 Sources 里的该断点。快捷键 Ctrl+F8 停用所有断点，再按一次重新激活。
断点最佳实践：从入口点（事件处理器、生命周期钩子）的一个断点开始逐步执行；随着缩小问题范围再增加断点（不要随机散布）；结合 Watch 表达式——在关键行设断点、把变量加进 Watch、边步进边观察值。目标：理解代码流，而非随机暂停。战略性的断点胜过许多随机断点。
条件断点
普通断点每次执行到该行都暂停；条件断点只在指定条件为真时暂停。设置：右键行号 → Add conditional breakpoint → 输入 JavaScript 表达式。条件可以是任意表达式：i > 50（循环只暂停 50 次之后）、user.name === 'Admin'、event.detail.value > 100、this.contacts.length > 0。金色标记（而非蓝色）表示这是条件断点。
实际场景：循环调试（index === 42 只停在第 43 项）、数据依赖（this.recordId !== null 在 recordId 加载后才停）、用户特定、状态特定（数据就绪时停，而非加载态）。条件让断点精确——停止猜测，开始加条件。
管理断点与事件监听器断点
DevTools 支持多种断点类型：行断点（最常见）、条件断点（精确目标）、事件监听器断点（特定事件触发时暂停）、DOM 断点（DOM 节点变化时暂停）、XHR/Fetch 断点（网络请求匹配 URL 模式时暂停）。所有类型都在 Breakpoints 面板管理，可混用。
事件监听器断点在特定浏览器事件触发时暂停：Sources → 右侧 → Event Listener Breakpoints → 展开类别 → 勾选事件类型（Mouse 的 click/dblclick、Keyboard 的 keydown 等）。对 LWC 调试，勾选 click 就能在组件里任何按钮/链接点击时暂停——DevTools 在事件处理器第一行暂停，然后你逐步理解发生了什么。无需先找到处理器函数，只需勾选事件、DevTools 帮你找到它。
三、监控 JavaScript 执行
本单元学习用 Watch 表达式实时跟踪变量值（取代 console.log）、用 Console 交互式调试（在页面上下文执行 JavaScript），并掌握暂停/恢复控制执行流。你将调试 Solutions 应用，找出为什么计数跳跃 2 且发生字符串拼接而非数字相加——用 Watch 发现 bug、用 Console 测试修复。
Watch 功能：实时监控变量
Watch = 实时监控 JavaScript 变量与表达式：在右侧面板点击 + → 输入变量名 → 值出现并随代码执行更新。边步进边观察：变量值即时更新、复杂表达式实时求值、逐步看到属性变化。Watch 取代 console.log——与其到处打日志，不如把它们加进 Watch 并逐步执行。更干净、更快、无需改代码。
实际 Watch 工作流：打开 display.js 找到 handleAugmentorChange(event) 函数 → 把 event.target.value 加进 Watch（初始显示 this.augmentor = event.target.value; 设断点 → 在应用的 Control Option 选「2」→ 断点触发，Watch 显示 event.target.value 是 "2"（字符串！） → 把 this.augmentor 也加进 Watch（仍是数字 1，因为断点行还没执行）→ Step over 执行该行，两个值都更新为 "2"。
Watch 表达式与 typeof 诊断
Watch 不只限于简单变量——可监控任意 JavaScript 表达式：this.items.length（数组长度）、this.contacts.filter(c => c.active)（筛选数组）、typeof this.data（类型检查）、JSON.stringify(this.record)（完整转储）。表达式在每一步重新求值，你能看到计算值随状态变化而变化。
用 typeof 诊断 Solutions 应用的 bug：把 typeof operand 加进 Watch → 断点在 handleIncrement 触发后显示 typeof operand = "string" ← 找到了！operand 变量是字符串而非数字。再加 typeof this.counter（= "number" ✓）与 typeof this.augmentor（= "string" ✗）。根本原因：this.augmentor 被 Control Option 设成了字符串，字符串在加法里传播导致拼接而非相加。Watch 几秒就找到了 bug，无需 console.log、无需猜测。
Watch 最佳实践：从关键变量开始（你怀疑与 bug 相关的）；添加派生表达式（依赖关键变量的计算值）；用描述性表达式；移除不再需要的表达式保持 Watch 干净；与 Console 结合（Watch 用于监控、Console 用于一次性检查）。
Console：交互式 JavaScript 执行
Console 是调试时的交互式 JavaScript 乐园。在断点暂停时：直接输入 JavaScript 表达式、在当前作用域执行（可访问局部变量！）、测试修复、调用函数、检查对象、修改状态。Console 对组件状态有完全访问权限。
实际实验：在 handleAugmentorChange 断点暂停 → 在 Console 检查 event.target.value（返回 '2'——注意引号表示字符串）→ 测试赋值 this.augmentor = event.target.value（返回 '2' 仍是字符串，错了）→ 试修复 this.augmentor = parseInt(event.target.value)（返回 2 是数字，对了！）→ this.augmentor = 1 恢复原值。
Console 是你的实验室：测试理论、验证修复、理解行为，全在 DevTools 内完成。你验证了修复：this.augmentor = parseInt(event.target.value); 是正确的一行改动——现在你知道要改什么：在源码里给 event.target.value 包上 parseInt()。无需反复猜-改-部署。
完整的调试工作流
应用修复后验证 Solutions 应用行为正确：刷新重置状态 → Control Option 选「2」→ 断点在 handleAugmentorChange 触发 → Step Over 检查 this.augmentor（现在是数字，parseInt 修复生效！）→ Resume → 点 +2 → 逐步执行 handleIncrement → Watch 显示 operand = 2（数字）、this.counter 从 0 变 2（加法而非拼接）。修复生效，计数正确 +2：0 → 2 → 4 → 6……
完整的 LWC 调试工具包：
- 设置（每次会话一次）：Debug Mode 开启、缓存禁用、自定义格式化器启用、Ignore List 配置。
- 断点（每个调试任务）：关键位置行断点、精确用条件断点、事件调试用事件监听器断点。
- 执行控制：Step Over/Into/Out（F10/F11/Shift+F11）、Pause/Resume（F8）。
- 监控：Watch 表达式（连续）、Console（交互式）、Call Stack（执行上下文）、Scope 变量（自动跟踪）。
这是专业的 JavaScript 调试工作流——对 LWC 及任何框架、任何浏览器都适用。不再用 console.log 调试，欢迎进入快车道。