Shopware 6能否启用JS源文件映射？如何调试all.js错误？

关于JS源文件映射 #

可以启用JS源文件映射，这对调试压缩/混淆后的all.js非常有用。启用步骤（以Chrome为例）：打开开发者工具 → 点击右上角齿轮图标进入设置 → 勾选「启用JavaScript源映射」。开启后，压缩后的all.js会关联到原始未压缩的源码，你能直接看到报错对应的真实代码行和逻辑，不用对着混淆后的代码头疼。

其他调试方法 #

• 直接添加断点：在开发者工具的Sources面板找到all.js，根据报错行号定位位置，点击行号添加断点，刷新页面触发错误，此时可以查看当前的变量值、调用栈信息
• 格式化压缩代码：打开all.js后，点击Sources面板左下角的「{}」按钮，把混淆的代码格式化成易读的结构，方便定位问题
• 插入日志输出：在怀疑有问题的代码位置（或断点暂停后），插入console.log()打印关键变量，比如console.log('当前用户ID:', userId)，验证数据是否符合预期
• 禁用缓存：在Network面板勾选「禁用缓存」，确保每次加载的都是最新的all.js文件，避免旧缓存干扰调试
• 使用条件断点：在断点上右键设置触发条件，只有当满足指定条件（比如status === 'error'）时才暂停，精准定位特定场景下的错误
• 追溯调用栈：报错时Console面板会显示调用栈，点击栈中的条目可以跳转到错误触发的上游代码，理清错误的传播路径

内容的提问来源于stack exchange，提问作者Utsav Thakur