无法将Chrome Live Edit与Webpack源映射一起使用

时间:2018-12-16 20:39:35

标签: google-chrome webpack google-chrome-devtools source-maps

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

通常,我希望Chrome在处理我的修改时会花一点时间,然后我可以继续通过代码更改来调试会话。

但这不会发生。我在“源”选项卡中的文件旁边看到一个黄色的小图标,上面写着“对此文件所做的更改未保存到文件系统中” 。并且调试会话将继续进行,而无需更改我的代码。

我在Webpack配置中为<div id="f" style='display: none'> <form> <input type='text' id='style' /> </form> </div> <button onclick='document.getElementById("f").style.display = "block"'>Click</button>选项尝试了cheap-module-source-mapcheap-module-eval-source-map之类的其他选项。

有什么建议吗?谢谢!

1 个答案:

答案 0 :(得分:0)

我正在工作!

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

  

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

     

以下是步骤:

     

打开开发工具

     

单击X旁边最右边的3个垂直点,这会弹出   一份菜单。点击设置

     

点击工作区

     

添加项目的目录

     

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

     

希望这会有所帮助。

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