调试 Lightning Web Components
LWC 使用标准 HTML 和 JavaScript——可使用标准浏览器调试工具（Chrome DevTools 为 LWC 调试优化）。最简单的方式：创建 Lightning Page→添加组件→在浏览器中打开→使用 DevTools 检查调试。移动端用真实设备或虚拟设备构建。
生产模式 vs 调试模式
生产模式（默认）
性能优化——JavaScript 被压缩（minified）：删除换行/空格/制表符/注释，缩短函数名和变量名。每次压缩输出可能不同（变量 name→a 在下次 build→b），但逻辑不变。压缩是性能优化不是知识产权保护。
代理对象：生产模式使用 JavaScript Proxy——@api/@wire 属性保持只读、@track 属性观察变更。Locker/LWS 在标准 Web API 上使用 Proxy。调试时看到的是 Proxy 而非实际对象。
可用 pretty print：Chrome DevTools Sources 面板底部 {} 图标→新标签页格式化代码。变量名仍被混淆但可设断点和检查值。
调试模式
启用后 JavaScript 代码不压缩不优化——变量名和函数名可读，断点可直接设在源码行上。Debug 模式不应用 HTTP 缓存头（代码变更立即生效）。页面顶部出现横幅提醒（"Debug mode is on, slows things down"）+ EPT 指标（Experienced Page Time——绿/橙/红表示页面加载健康度）+ 存储指标（KB 显示内存使用和缓存，同样颜色编码）。代码仍然被编译，但编译器可生成更多调试信息（如源码映射）。
两种模式对比：生产模式→压缩混淆→Proxy 可见→需 Pretty Print→缓存延迟 10 分钟。调试模式→可读变量名→直接设断点→无缓存延迟→EPT 实时指标→显著变慢。仅对正在调试的用户启用！
HTTP 缓存与启用调试模式
HTTP 缓存机制
自定义组件返回 Cache-Control: private, max-age=300, stale-while-revalidate=300。含义：private——仅浏览器本地缓存；max-age=300——5 分钟内视为新鲜；stale-while-revalidate=300——过期后仍用缓存 5 分钟同时后台请求新版本→总计最多 10 分钟延迟看到代码变更（Safari 除外）。
组件请求通过 302 重定向获取最新版本——URL 中 _uid=LATEST→302→_uid=具体版本号→200。Session Settings 的 "secure and persistent browser caching" 不影响自定义组件缓存。Debug 模式不应用缓存头。
启用 Debug 模式
Setup→Debug Mode Users→勾选用户→Enable。仅对正在调试的用户启用。代码只有几行→debug mode 未启用→硬重载（DevTools 打开时右键刷新按钮→Hard Reload）。禁用：相同步骤点 Disable。
开发期间禁用缓存
Setup→Session Settings→取消勾选 "Enable secure and persistent browser caching"→Save。生产组织必须重新启用——严重负面影响性能。仅 Sandbox/Developer Edition 使用。
调试 Wire Adapters
需要两步准备：① 启用 debug mode ② Chrome DevTools Settings→Console→Enable custom formatters。
Wired 函数调试：Sources 面板中在解构的 {data, error} 处设断点。当 data 或 error 有值时可在 Scope 面板中检查。
Wired 属性/方法调试——自定义格式化器输出四属性：
- data——wire adapter 返回的最后值（如 getRecord 返回的 Record 对象）
- config——传给 adapter 的最后配置对象（如
{ recordId:"...", fields:[...] }）——检查此处确认参数是否正确传递 - context——仅 context wire adapter 有值（如 getObjectInfo 返回对象元数据上下文）
- isDataProvisionedForConfig——Boolean。true=data 对应当前 config；false=config 已变更但新 data 尚未到达（数据过期状态）
检查步骤：Elements 面板点击组件元素（如 <c-apex-wire-method-to-property>）→ Console 面板输入 $0→展开查看完整调试信息。参考 lwc-recipes apexWireMethodToProperty。
常见陷阱：未定义的响应式参数阻止 wire 触发→data 和 error 都保持 undefined。确保每个$前缀的配置值在类中有初始值（如recordId = ''）。Undefined→不触发；null→触发。
LWS 调试与移动端调试
LWS 环境调试
启用 LWS 的组织中调试技术基本相同——先启用 debug mode 获得最佳体验。LWS 使用虚拟 JavaScript 沙箱——代码在沙箱内运行，某些底层调试能力受限（如 Proxy 对象在 Console 中显示为 Proxy {} 而非实际对象）。Console 中 this 指向的组件实例实际是 Proxy wrapper。参考 Debug with LWS Enabled 和 Limitations for Debugging with LWS。建议流程：先在不启用 LWS 的环境中开发→再在启用 LWS 的 Sandbox 中测试→验证两环境行为一致。参考 Workflow to Test Components with LWS。
移动端调试
桌面浏览器可模拟基础移动特性——Chrome DevTools Device Mode 模拟：屏幕尺寸、设备方向、位置变化、CPU 限制、网络限制。注意桌面和移动版 Salesforce 提供相同 UI（Lightning Experience）→桌面可调试大部分移动组件。但不等同于真实设备测试——移动特定功能需在真实设备上的 Salesforce Mobile App 中测试。
感谢阅读本指南。如需继续学习，请参阅下一章：测试 Lightning Web Components。