无法将Chrome Live Edit与Webpack源映射一起使用 [英] Cannot use Chrome Live Edit with Webpack source maps

问题描述

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

I have a webpack 4 configuration that generates source maps for my app's JavaScript. While debugging my app in Chrome, the source maps get loaded so I can see my unimified code. I'll set a breakpoint in a function and in the Sources tab I'll make edits to the code. I hit CMD+S to save my edits.

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

Normally, I would expect Chrome to think for a little bit while it processes my edits and then I can continue debugging my session with my code changes.

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

But that doesn't happen. I get a little yellow icon next to my file in the Sources tab that says "Changes to this file were not saved to the filesystem". And the debugging session continues without my code changes.

我在Webpack配置中为devtools选项尝试了不同的选项，例如cheap-module-source-map和cheap-module-eval-source-map.

I've tried different options like cheap-module-source-map and cheap-module-eval-source-map for the devtools option in my webpack config.

有什么建议吗?谢谢！

推荐答案

我正在工作！

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

I ended up posting my same question on reddit and got some help. https://www.reddit.com/r/learnjavascript/comments/a98gh1/cannot_use_chrome_live_edit_with_webpack_source/

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

You need to add your project's directory to save changes in the source.

以下是步骤:

打开开发工具

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

Click on the 3 vertical dots on the far-right beside X which brings up a menu. Click on Settings

点击工作区

添加项目的目录

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

Refresh the page, and you should be able to save your changes now.

希望这会有所帮助.

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

Oddly enough, I was able to remove my Project's directory from the Workspace and STILL able to make Live Edits to my source maps!

这篇关于无法将Chrome Live Edit与Webpack源映射一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！