无法将Chrome Live Edit与Webpack源地图一起使用



我有一个webpack 4配置,它为我的应用程序的JavaScript生成源映射。在Chrome中调试我的应用程序时,会加载源地图,这样我就可以看到我的未经验证的代码。我将在函数中设置一个断点,并在"源代码"选项卡中对代码进行编辑。我点击CMD+S保存我的编辑。

通常情况下,我希望Chrome在处理我的编辑时考虑一下,然后我可以继续调试我的会话,修改代码。

但这并没有发生。在"源"选项卡中,我的文件旁边有一个黄色的小图标,上面写着"对此文件的更改没有保存到文件系统中">。调试会话继续进行,我的代码没有更改。

我在我的webpack配置中为devtools选项尝试了不同的选项,如cheap-module-source-mapcheap-module-eval-source-map

有什么建议吗?谢谢

我有工作要做!

我最终在reddit上发布了同样的问题,并得到了一些帮助。https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/

您需要添加项目的目录以将更改保存在来源

以下是步骤:

开放开发工具

点击X旁边最右边的3个垂直点菜单。点击设置

点击工作区

添加项目的目录

刷新页面,您现在应该可以保存所做的更改。

希望这能有所帮助。

奇怪的是,我能够从工作区中删除我的项目目录,并且仍然能够对我的源地图进行实时编辑!

最新更新