19

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

我不想只将更改保存为保存 CSS - 在浏览时，如何将 css 文件从 chrome dev 或 firebug 内部保存到本地目录，我希望它们在页面重新加载之间保持不变。

4

10 回答 10

6

你得到了大部分内容，但这里有一个细微的变化：

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

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

在此处输入图像描述

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

于 2013-08-19T03:06:23.187 回答
6

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

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

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

于 2014-03-25T03:33:48.947 回答
3

这是可能的，但非常棘手：

  • 打开资源并右键单击带有样式\资源的文件夹（不要忘记在地址栏下方显示的对话框上单击“允许”）
  • 然后右键单击具体资源并选择“另存为”（将其保存到您在上一步中指定的工作目录）
  • 然后右键单击相同的资源并选择“映射到文件系统资源”（写入与上一步相同的名称，例如 all.css 但不是 all.css？id=234234234，以防万一）
  • 修改开发工具中的样式。
  • 刷新页面（并意识到你所有的修改都没有应用）
  • 打开资源，找到您的工作区文件夹和其中的资源（例如 all.css）
  • 右键单击该资源并选择“本地修改”
  • 在打开的控制台中单击以“应用原始内容”并意识到您的样式已被应用=）它退出了一个棘手的方法，更好的想法是使用像提琴手之类的东西来替换本地文件的资源。
于 2014-03-24T01:32:29.057 回答
3

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

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

希望有帮助！

于 2014-03-25T11:05:26.510 回答
2

I don't know if this qualifies as an answer, but it is what I am doing, and the closer that I have get to what you want.

I load the page in the browser, and the I do save as in a local file. Note that I am saving the full page, with HTML, js and CSS.

Now, if I want to modify the a CSS, I edit the HTML and direct these file (or files) to my development files.

I reload the page, and now I can work as you want (saving and reloading what I have saved).

Of course that means that you have full access to the files, and most probably they are local, but I don't think that you are really willing to edit the real web files on line.

When I am finished modifying the files, it's just a matter of syncing my dev files with the web files .

于 2014-03-23T09:55:32.227 回答
2

据我所知，在 Chrome 的 DevTools 中没有办法做到这一点。您应该查看有关保存和进行本地更改的文档。唯一似乎通过重新加载持续存在的是片段......但它似乎不是你想要的。

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

于 2014-03-21T07:32:27.757 回答
2

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

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

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

于 2014-03-24T01:51:28.737 回答
2

注意，使用 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();
于 2014-03-27T09:21:32.473 回答
2

我在 Eclipse 的调试模式下使用我的 apache，所以一旦我保存页面，这些变化就会反映到网站上。

于 2014-03-27T11:03:03.083 回答
0

请参阅https://stackoverflow.com/a/31585725/52817：

资源覆盖 扩展允许您做到这一点：

  • 为要替换的 url 创建文件规则
  • 编辑扩展中的 js/css/etc
  • 随心所欲地重新加载:)

您甚至可以向开发工具添加选项卡。

于 2015-07-23T11:16:11.407 回答