如何调试Shopware 6后台插件？缺失Source Maps问题求助

先解决Source Maps缺失问题 #

• 修正命令拼写：你之前的命令存在拼写错误，正确的监听命令是bin/watch-administration.sh（注意是administration而非adminstration），拼写错误会导致命令无法正常执行，自然不会生成Source Maps。
• 前置依赖检查：执行监听命令前，确保项目根目录下已安装所有依赖：
  • 运行composer install安装PHP依赖
  • 运行npm install安装前端依赖（首次搭建或依赖更新后必须执行）
• Source Maps生成位置：命令正常运行后，实时编译生成的Source Maps文件会存放在public/administration/js目录下，与对应的编译后JS文件同名（例如app.js对应app.js.map）。

后台调试具体操作步骤 #

• 打开浏览器开发者工具：进入Shopware后台，按F12（或Ctrl+Shift+I）唤起开发者工具。
• 定位原始源码：切换到Sources标签页，展开webpack:// -> . -> src路径，即可看到未编译的原始Vue/JS源码（包括你插件的代码）。
• 断点调试：找到你插件的代码目录（通常在src/Administration/Resources/app/administration/src下），在目标代码行号上点击设置断点，触发对应后台操作后，就能逐步调试代码执行流程。
• 错误快速定位：如果存在JS错误，开发者工具的Console标签页会显示错误详情，点击错误信息中的文件路径，会直接跳转到对应的原始源码位置（需Source Maps正常生效）。

额外调试注意事项 #

• 清除缓存：若编译后无变化，执行bin/console cache:clear清除Shopware缓存，同时按Ctrl+Shift+R强制刷新浏览器清除前端缓存。
• 检查插件配置：确认你的插件在src/Resources/config/admin.xml中正确注册了后台菜单、组件等资源，配置错误可能导致隐性JS问题。
• 查看编译日志：运行bin/watch-administration.sh时，终端会输出编译日志，若存在语法错误、依赖缺失等问题，会在这里直接显示，这些问题也会导致Source Maps无法正常生成。

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