在 Chrome Inspector 中实时编辑远程 JavaScript

Question

我正在尝试使用 Google Chrome 检查器调试远程 JavaScript。我记得过去能够：

1) Edit remote javascript using Chrome Inspector

2) 'Save' the change using (cmd + s)

3) Test the effect the the altered javaScript on the page

现在，当我尝试“保存”更改时，“选项卡”中会出现一个黄色警告图标，上面写着

"Changes to this file were not saved to the file system"

任何人都可以帮助我解决这个问题，请记住，我正在使用远程代码（不是试图更改本地文件），并且我确实安装了开发人员工具扩展。

Answer 1

这些更改没有保存到磁盘，因为您显然无法访问远程 js 文件，但当 javascript 到达这些代码行时，它们就会生效。

你可以在你想要动态添加代码的地方之前添加一个断点，重新加载页面，添加你想要的代码，点击ctrl-s。忽略您提到的有关文件系统的警告并享受。

因此您可以按照这些步骤进行操作并忽略警告。

Answer 2

对于任何像我一样偶然发现这个问题的人......

对于本地文件

您可能需要以管理员身份运行 chrome。或者在我的例子中（Ubuntu）作为 root 用户。

sudo google-chrome --no-sandbox

然后您可以在开发工具中保存文件。

Answer 3

更新：根据下面的链接，文档已移至此处。

您必须设置工作区才能执行此操作。阅读有关如何使用工作区的文档：https://developer.chrome.com/devtools/docs/workspaces

Answer 4

我设法使用 chrome 开发工具通过 FUSE 和 sshfs 实时编辑远程文件。
SSHFS 允许您使用 SFTP 挂载远程文件系统，因此您可以从本地计算机访问远程文件，并且 chrome 能够编辑您的本地文件，并且 SSHFS 自动检测更改并将文件推送到远程服务器。
这是在 mac 上使用 SSHFS 的示例：

mkdir /Users/username/Sites/localhost/yourLocalfolder
sshfs [email protected]:public_html/wp-content/themes/yourRemoteFolder /Users/username/Sites/localhost/yourLocalfolder

要停止 SSHFS，您只需要做：

umount /Users/username/Sites/localhost/yourLocalFolder

您唯一需要做的就是从 chrome 开发工具保存您的文件，SSHFS 会自动将您的文件推送到远程服务器！