logo标签列表

有没有一种方法可以在页面重新加载时保存远程资源的CSS/JS更改，或者在开发工具中将远程资源映射到本地？

javascriptcssmappinggoogle-chrome-devtoolsweb-inspector
19

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

我不仅想要保存更改，就像在浏览时保存CSS，在Chrome Dev或Firebug内部如何将CSS文件保存到本地目录，我希望它们在页面重新加载之间保持存在。

大家好，感谢所有的回答。不幸的是，对于我来说，那些仅依赖于 Chrome 自身的答案都不起作用，因此我必须假设这是我特定版本的 Chrome 中的一个错误或类似的问题。我将点赞所有的答案，因为它们都提供了解决或绕过问题的有用方法之一。我会把奖励给已经存在的答案，因为它似乎更符合原始问题。很抱歉我无法真正测试它们并做得更好。 - Septagram
10个回答
6

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

如果您正在处理无法直接/方便访问的文件（由于任何原因），我建议设置一个类似于Burp的篡改代理。简而言之，您将能够修改服务器响应并执行即时查找和替换，例如在html正文中将cdn.example.com/jquery-library.js更改为localhost:8080/jquery-library.js。之后，您所要做的就是设置本地服务器（微不足道）并编辑脚本的本地实例！

这是一种方便的方法，可以预览针对生产内容的本地更改，只要它不用来取代测试环境。

6
你的理解基本正确，这里有一些微小的更改：
在“样式”面板（或“源”中）进行更改，然后切换到“源”，当修改过的文件打开时，按下ctrl-s。
然后你可以右键单击源列表中的资源，点击另存为...并将新修改的文件保存到磁盘上。

enter image description here

不可能在不将其持久化到磁盘中的情况下保存修改后的远程文件，并期望在重新加载时发生更改。
5
也许我没有说清楚。我将文件保存，进行编辑，再次保存，重新加载页面。结果：服务器加载原始（未修改）文件。期望结果：从磁盘加载文件。这是否可能？ - vladimir
3

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

  • 打开资源并右键单击带有styles\resources文件夹的文件夹（不要忘记在下面的地址栏中出现的对话框上单击“允许”）
  • 然后右键单击具体的资源，选择“另存为”（将其保存到您在上一步中指定的工作目录中）
  • 然后右键单击同一资源，选择“映射到文件系统资源”（写入与上一步相同的名称，例如all.css，而不是all.css?id=234234234，以备不时之需）
  • 在dev工具中修改样式。
  • 刷新页面（然后意识到所有修改都没有应用）
  • 打开资源，找到您的工作区文件夹和其中的资源（例如all.css）
  • 右键单击该资源，选择“本地修改”
  • 在打开的控制台中单击“应用原始内容”，然后意识到您的样式已应用=） 这是一种相当棘手的方法，更好的想法是使用类似fiddler的东西来将资源替换为本地文件。
3
你可以尝试以下方法（针对jquery）：
- 第一次加载页面时，在源代码选项卡中在第一行设置断点。 - 然后重新加载页面，修改文件并保存（你会发现页面因为断点而暂停）。 - 按下播放按钮，页面将开始加载，所做的修改将生效。
这种解决方案的缺点是，一旦你再次刷新页面，修改就会丢失。希望能有所帮助！
2
注意，使用jQuery库（非必需）。
请在控制台尝试。
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();
2
我不确定这是否算作答案，但这是我正在做的事情，也是最接近你想要的。
我在浏览器中加载页面，然后使用“另存为”功能将其保存到本地文件。请注意，我保存了包含HTML、js和CSS的完整页面。
现在，如果我想修改CSS，我会编辑HTML并将这些文件（或文件）指向我的开发文件。
我重新加载页面，现在我可以按照你的要求工作（保存和重新加载我所保存的内容）。
当然，这意味着你可以完全访问这些文件，而且它们很可能是本地的，但我不认为你真的愿意在线编辑真实的Web文件。
当我完成修改文件后，只需要将我的开发文件与Web文件同步即可。
2
2

我使用Eclipse将Apache设为调试模式，这样当我保存页面时，更改会立即反映到网站上。

2
据我所知，Chrome的开发者工具中没有办法做到这一点。您应该查阅有关“保存”和“进行本地更改”的文档。唯一似乎可以在重载后保留的是片段代码...但这似乎不是您想要的东西。
如果有解决方案......我也想要知道。目前，似乎最好的方法就是使用内容脚本等方式。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接