Google Chrome：如何编辑 JavaScript/CSS 文件并预览更改而无需重新加载？

Question

我想通过“源”选项卡进行更改Inspect Elements，并且希望快速查看预览而无需刷新浏览器。

有没有办法做到这一点？

例如，在 JavaScript 中我有一个变量：

var abc = 'xyz';

但是通过“Sources”选项卡，我找到了我的脚本文件并更改了代码：

var abc = 'hello world';

现在如果我尝试alert(abc)的话，它会显示最新的更改吗？我不想刷新来查看此更改。

有没有什么可能性或插件可以做到这一点？因为有时这非常节省时间。例如，每次我测试时，我都必须执行很多步骤才能看到一些值或响应。因此，为了进行微小的更改，我必须在原始文件中进行更改，然后再次刷新才能看到它，这样我总是必须经历整个过程，这会浪费大量时间。

Answer 1

您可以使用 Chrome 的开发者工具（按F12或Ctrl+ Shift+ I）在运行时调试和操作 JavaScript 代码。然后，您可以在代码中设置断点、检查对象、处理值、从控制台调用函数等等。所有这些都无需实际更改物理源文件或重新加载窗口。

根据 OP 的评论进行更新：

这是一个快速而粗略的示例，用于动态创建新函数，然后在控制台中调用它。第一行添加该函数（添加函数本身不会返回任何有意义的内容，因此您会得到“未定义”的结果）。接下来我调用这个新函数，它会像预期的那样弹出一个警告窗口（屏幕截图中未显示）并返回值 17。

您可以执行相同操作并返回根据当前状态下的实际页面计算的值。如果您在代码中放置了断点，则可以使用控制台检查对象和值或在运行时对它们进行更改。顺便说一句，这也适用于DOM，这样您也可以通过控制台操作 HTML。