Есть ли способ сохранить css/js изменения удаленного ресурса между перезагрузкой страницы или перенаправить удаленный ресурс на локальный в devtools?

Ответ 1

Вы получили большую часть этого, но здесь небольшое изменение:

Внесите изменения в панель "Стили" (или в "Источники" ), затем перейдите в "Источники" , и когда ваш измененный файл открыт, нажмите ctrl-s.

Затем вы можете щелкнуть правой кнопкой мыши объект в списке "Источники" и нажать Сохранить как... и сохранить новый измененный файл на диск.

Невозможно сохранить измененный удаленный файл, не сохраняя его на диске, и ожидать, что он будет изменен при перезагрузке.

Ответ 2

Рабочие области позволяют редактировать файлы, сопоставленные с локальным каталогом, но, естественно, предварительным условием является обслуживание локальных файлов.

Если вы играете с файлами, у вас нет прямого/удобного доступа (по какой-либо причине), я рекомендую настроить прокси-сервер, например Burp. В двух словах вы можете изменить ответ сервера и выполнить поиск на лету и заменить его как cdn.example.com/jquery-library.js на localhost:8080/jquery-library.js в html-корпусе. Все, что вам нужно сделать после этого, - установить локальный сервер (тривиальный) и отредактировать локальный экземпляр script!

Это удобный шаблон для предварительного просмотра локальных изменений в отношении производственного контента, если он не используется вместо тестовой среды.

Ответ 3

Возможно, но довольно сложно:

• открыть ресурсы и правый клик в папку со стилями\ресурсами (fo не забудьте нажать "разрешить" в диалоговом окне, который отображается под адресная панель)
• затем щелкните правой кнопкой мыши на конкретном ресурсе и выберите "сохранить как" (save его в рабочий каталог, указанный вами на предыдущем шаге)
• затем щелкните правой кнопкой мыши на тот же ресурс и выберите "Карта в файловую систему ресурс "(введите то же имя, что и в предыдущем шаге, например, all.css, но не all.css? id = 234234234, на всякий случай)
• изменить стили в инструментах dev.
• обновить страницу (и понять, что все ваши изменения не приложенное)
• открыть ресурсы, найти папку рабочего пространства и свой ресурс в ней (например, all.css)
• щелкните правой кнопкой мыши на этом ресурсе и выберите "локальные изменения"
• в открытой консоли нажмите "применить оригинальный контент" и поймите, что вы применяли стили =) Это бросает сложный путь, и лучшая идея - использовать что-то вроде скрипача, чтобы заменить ресурсы на локальные файлы.

Ответ 4

Вы можете попробовать это так (для jquery):

- сначала загрузите страницу, а на вкладке источников установите точку останова в строке номер 1 - затем перезагрузите страницу, измените файл и сохраните (вы можете видеть, что страница приостановлена ​​из-за точки останова) - нажмите кнопку воспроизведения, и страница начнет загружаться. Сделанные вами изменения будут работать. Недостатком этого решения является то, что как только вы снова обновите страницу, изменения будут потеряны.

Надеюсь, что это поможет!

Ответ 5

Насколько я могу судить, в Chrome DevTools нет способа сделать это. Вы должны просмотреть документацию сохранение и внести локальные изменения, Единственное, что, похоже, сохраняется при перезагрузке, - это snippets... но это не похоже на то, что вы хотите.

Если когда-нибудь будет создано решение для этого... Я хочу этого. На данный момент, кажется, лучше всего вы можете сделать это с помощью скриптов контента и т.п.

Ответ 6

Я не знаю, соответствует ли это ответам, но это то, что я делаю, и тем ближе к тому, что мне нужно.

Я загружаю страницу в браузере, и я сохраняю ее как в локальном файле. Обратите внимание, что я сохраняю полную страницу с помощью HTML, js и CSS.

Теперь, если я хочу изменить CSS, я редактирую HTML и направляю этот файл (или файлы) в свои файлы разработки.

Я перезагружаю страницу, и теперь я могу работать так, как вы хотите (сохранение и перезагрузка того, что я сохранил).

Конечно, это означает, что у вас есть полный доступ к файлам, и, скорее всего, они локальные, но я не думаю, что вы действительно хотите редактировать реальные веб файлы в режиме онлайн.

Когда я закончу модификацию файлов, это просто вопрос синхронизации файлов dev с веб файлами.

Ответ 7

Просто подсказка, под Firefox я использую Greasemonkey. Я не знаю, знаете ли вы об этом инструменте, но он позволяет запускать скрипты javascript через веб-страницу для веб-сайта. Затем с адаптированным javascript вы можете динамически изменять css.

Немного о начале greasemonkey: http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/

Для хром это tampermonkey: http://tampermonkey.net/faq.php

Ответ 8

Примечание. Использует библиотеку 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();

Ответ 9

Я использую свой apache в режиме отладки с eclipse, поэтому cahnges отражаются на сайте, как только я сохраняю страницу.

Ответ 10

См. fooobar.com/info/54698/...:

Ресурс Overrideрасширение позволяет сделать именно это:

• создать правило файла для URL-адреса, который вы хотите заменить
• отредактируйте js/css/etc в расширении
• перезагружайте столько, сколько хотите:)

Вы даже можете добавить вкладку в инструменты dev.