有没有办法在页面重新加载之间保存远程资源的 css/js 更改或将远程资源映射到 devtools 中的本地？

Posted 2023-03-07

【中文标题】有没有办法在页面重新加载之间保存远程资源的 css/js 更改或将远程资源映射到 devtools 中的本地？

【英文标题】：is there a way to save css/js changes of remote resource between page reloads or map remote resource to local in devtools?

【发布时间】：2013-08-07 06:50:15

【问题描述】：

我知道最近在 DevTools 中引入的工作区，但这不是我需要的。例如：页面使用从 CDN 加载的 jquery，我修改 jquery 库代码，按 ctrl-s，重新加载页面 -> 修改丢失。或者我想调试一些我无法更改文件的网站。

我不想只保存 save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory 中的更改，我希望它们在页面重新加载之间保持不变。

【问题讨论】：

大家好，感谢您的所有回答。不幸的是，出于某种原因，除了 Chrome 本身之外，没有任何一个答案对我有用。我不得不假设这是我的特定 Chrome 版本或类似版本中的错误。我会给所有答案一个+1，因为所有答案都提出了一种或另一种有用的方法来解决或解决问题。我将赏金已经存在的答案，因为它似乎更适合原始问题。抱歉，我实际上无法测试它们并做得更好。

【参考方案1】：

大部分内容都已完成，但有细微的变化：

在“样式”窗格（或“源”）中进行更改，然后单击“源”，打开修改后的文件后，点击 ctrl-s。

然后您可以右键单击 Sources 列表中的资产并点击 Save As... 并将新修改的文​​件保存到磁盘。

如果不将修改的远程文件保存到磁盘并期望在重新加载时更改它，就无法保存修改的远程文件。

【讨论】：

也许我说得不够清楚。我将文件另存为，编辑它，再次保存，重新加载页面。结果：从服务器加载原始（未修改）文件。预期结果：从磁盘加载文件。有可能吗？

【参考方案2】：

Workspaces 允许您编辑映射到本地目录的文件 - 但自然地，先决条件是提供本地文件。

如果您正在使用您无法直接/方便地访问的文件（无论出于何种原因），我建议您设置一个像Burp 这样的篡改代理。简而言之，您将能够 modify the server response 并执行动态搜索并将 html 正文中的 cdn.example.com/jquery-library.js 替换为 localhost:8080/jquery-library.js。之后您所要做的就是设置一个本地服务器（很简单）并编辑脚本的本地实例！

这是一种方便的模式，可以根据生产内容预览本地更改，只要它不用于代替测试环境。

【参考方案3】：

这是可能的，但相当棘手：

打开资源并右键单击带有样式\资源的文件夹（fo 不要忘记在出现在下方的对话框中单击“允许” 地址栏） 然后右键单击具体资源并选择“另存为”（保存 它到您在上一步中指定的工作目录） 然后右键单击同一资源并选择“映射到文件系统 资源”（写上与上一步相同的名称，例如 all.css 但不是 all.css?id=234234234，以防万一） 在开发工具中修改样式。 刷新页面（并意识到您所做的所有修改都不会 应用） 打开资源，在里面找到你的工作区文件夹和你的资源 （例如 all.css） 右键单击该资源并选择“本地修改” 在打开的控制台中点击“应用原始内容”并意识到 你的样式已被应用 =) 这是一种棘手的方法，更好的办法是使用 fiddler 之类的东西将资源替换为本地文件。

【参考方案4】：

你可以这样尝试（对于 jquery）：

-第一次加载页面并在源选项卡上的第 1 行放置一个断点 -然后重新加载页面修改文件并保存（可以看到页面由于断点暂停） - 按下播放按钮，页面将开始加载。 您所做的修改将起作用。这种方案的缺点是，一旦再次刷新页面，修改就会丢失。

希望有帮助！

【参考方案5】：

据我所知，在 Chrome 的 DevTools 中没有办法做到这一点。您应该查看有关 saving 和 making local changes 的文档。唯一似乎通过重新加载持续存在的是 snippets... 但它似乎不是你想要的。

如果有解决方案……我想要。目前看来，您能做的最好的事情就是内容脚本等。

【参考方案6】：

我不知道这是否可以作为答案，但这是我正在做的事情，而且我越接近你想要的。

我在浏览器中加载页面，然后我将另存为在本地文件中。请注意，我正在使用 HTML、js 和 CSS 保存整个页面。

现在，如果我想修改 CSS，我编辑 HTML 并将这些文件（或多个文件）指向我的开发文件。

我重新加载页面，现在我可以按照您的意愿工作（保存并重新加载我保存的内容）。

当然，这意味着您可以完全访问这些文件，而且很可能它们是本地文件，但我认为您并不太愿意在线编辑真实的 Web 文件。

当我完成文件修改后，只需将我的开发文件与网络文件同步即可。

【参考方案7】：

提示一下，在 Firefox 下我使用 Greasemonkey。我不知道你是否知道这个工具，但它允许在网站的网页上运行 javascript 脚本。然后，使用改编的 javascript，您可以动态更改 css。

开始greasemonkey： http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/

对于 chrome 它是 tampermonkey ： http://tampermonkey.net/faq.php

【参考方案8】：

我在调试模式下使用我的 apache 和 eclipse，所以当我保存页面时，cahnges 会立即反映到网站上。

【参考方案9】：

注意，使用 jQuery 库（非必需）

试试看，console

function restyle() 
  $("*").css("color", "blue"); /* development elements, css, js */
  $("head").append("<script>console.log(\"restyle\")</script>"); /* js */
  var t = document.querySelectorAll("*"); /* modified document */
  var outer = document.documentElement.outerHTML; /* modified document */
  var inner = document.documentElement.innerHTML; /* modified document */
  return $.ajax() /* `pseudo` `reload` */
  .done(function(data)  /* original document */
  document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */
  console.log(data, inner, outer, $(t)) /* options, `callbacks` */
  /* $.each($(t), function(index, value)  console.log(value) ); */
  )
;
restyle();

【参考方案10】：

见https://***.com/a/31585725/52817:

Resource Override 扩展允许你做到这一点：

为要替换的网址创建文件规则 编辑扩展中的 js/css/etc 根据需要随时重新加载 :)

您甚至可以在开发工具中添加一个选项卡。