![Google Chrome:如何编辑 JavaScript/CSS 文件并预览更改而无需重新加载?](https://linux22.com/image/1505939/Google%20Chrome%EF%BC%9A%E5%A6%82%E4%BD%95%E7%BC%96%E8%BE%91%20JavaScript%2FCSS%20%E6%96%87%E4%BB%B6%E5%B9%B6%E9%A2%84%E8%A7%88%E6%9B%B4%E6%94%B9%E8%80%8C%E6%97%A0%E9%9C%80%E9%87%8D%E6%96%B0%E5%8A%A0%E8%BD%BD%EF%BC%9F.png)
我想通过“源”选项卡进行更改Inspect Elements
,并且希望快速查看预览而无需刷新浏览器。
有没有办法做到这一点?
例如,在 JavaScript 中我有一个变量:
var abc = 'xyz';
但是通过“Sources”选项卡,我找到了我的脚本文件并更改了代码:
var abc = 'hello world';
现在如果我尝试alert(abc)
的话,它会显示最新的更改吗?我不想刷新来查看此更改。
有没有什么可能性或插件可以做到这一点?因为有时这非常节省时间。例如,每次我测试时,我都必须执行很多步骤才能看到一些值或响应。因此,为了进行微小的更改,我必须在原始文件中进行更改,然后再次刷新才能看到它,这样我总是必须经历整个过程,这会浪费大量时间。
答案1
您可以使用 Chrome 的开发者工具(按F12或Ctrl+ Shift+ I)在运行时调试和操作 JavaScript 代码。然后,您可以在代码中设置断点、检查对象、处理值、从控制台调用函数等等。所有这些都无需实际更改物理源文件或重新加载窗口。
根据 OP 的评论进行更新:
这是一个快速而粗略的示例,用于动态创建新函数,然后在控制台中调用它。第一行添加该函数(添加函数本身不会返回任何有意义的内容,因此您会得到“未定义”的结果)。接下来我调用这个新函数,它会像预期的那样弹出一个警告窗口(屏幕截图中未显示)并返回值 17。
您可以执行相同操作并返回根据当前状态下的实际页面计算的值。如果您在代码中放置了断点,则可以使用控制台检查对象和值或在运行时对它们进行更改。顺便说一句,这也适用于DOM,这样您也可以通过控制台操作 HTML。