无法在Chrome开发者工具中实时编辑Javascript

Question

我已经做了无数次，即在“Sources”选项卡中打开javascript文件，编辑并按CTRL+S保存，此时Chrome将用“重新编译和更新成功”的消息进行确认。

但是现在我无法这样做了！控制台中没有确认消息。

此外，源代码窗口变成了红色，表示无法完成操作。

来自不同系统的相同脚本正在被编辑。

我使用的是Chrome 41.0.2272.101m / WIN8。

为排除可能性，该脚本未进行“美化”处理。!

- Neo

---

我曾经遇到过同样的问题，但现在我正在使用livereload。也许这对你来说也是一个选择。 - newBee

Livereload 是一个插件吗？ - Neo

部分地，是的。您将在Chrome中安装一个插件，它将与某种服务器一起工作，通知您的浏览器/插件有关更改的信息。我使用了Yeoman，它会为您的项目生成一个框架，并自动设置您需要的所有内容。但是，由于这不是对您原始问题的答案，我现在不会详细解释所有内容。您可能想要谷歌一下 - 不应该太难 ;) - newBee

Answer 1

尝试使用工作区：https://developer.chrome.com/devtools/docs/workspaces

通过在 Sources 中左侧面板上右键单击并选择“添加文件夹到工作区”，将项目文件夹添加为 devtools 中的工作区。

之后，在工作区中从文件夹中选择 JavaScript 文件。在文件中任意位置右键单击，选择“映射到本地资源”，并且选择与工作区中当前文件匹配的实时文件。

这样可以更新 JS 文件，并且所有保存的更改将应用于当前页面而无需刷新。

- micjamking

---

工作区绝对是最好的选择。一旦您将本地项目文件设置好，您可以在开发工具中完成100％的工作。我曾经用这种方式制作过整个网站，而无需离开Chrome。这很棒，无痛，节省时间，而且现在甚至有可能做到这一点，真的很酷。 - jaredwilli

现在它不起作用。我一直在尝试编辑网站的JavaScript，但仍然没有影响。 - Rahul Bali

我认为这种方法只能通过控制台直接保存到文件，它不能刷新或实时重新加载浏览器。 - samayo

@samayo，问题不是如何启用实时重新加载，而是实时编辑（这是不同的）。Chrome开发者工具没有内置的实时重新加载机制，您需要使用第三方工具，如livereload或browsersync。但是，如果您需要通过Chrome开发者工具编辑正在运行的实时JavaScript，则上述方法确实有效。 - micjamking

Answer 2

我发现一种很好的方法可以在不保存任何内容的情况下实时编辑网站的JS。它还可以在页面重新加载后保留，但您必须保持开发者控制台打开：

- 在要插入代码的位置添加断点。

- 编辑此断点并添加您想要进行的任何更改。

- 确保以“false;”结束该行，以便断点永远不会实际触发（除非您希望它触发）

例如： 如果断点条件为“valueToChange=100; false;”，每次执行经过此行时，“valueToChange”将被设置为100。

- David Stolze

---

你使用的是哪个版本？ - Risinek

哦，这是一个绝妙的技巧，可以规避Chrome DevTools团队对其编辑JS功能进行的限制，并将其范围限定在更窄的问题域上，以便更容易实现。感谢您分享您的创意！我认为这是本页面上最可靠的答案。 - ecmanaut

太完美了！这个变通方法真是太聪明了！谢谢你让我开心了 :D - Agent_Orange

Answer 3

你可以参考以下链接，它展示了逐步的指导。 https://www.youtube.com/watch?v=PJDPIsOfFZE 我发现的一件事是，Chrome扩展Jet Brain插件可以在选项中配置（右键单击Chrome扩展中的JB）。确保端口号与Intellij调试端口号匹配。如果你使用JRebel，它的端口号与javascript调试器不同。

- Kyung Hwan Min

---

视频损坏了。 - AaronJ