Я знаю о Workspaces, недавно появившемся в DevTools, но это не то, что мне нужно. Например: страница использует jquery, загруженный из CDN, меняет код библиотеки jquery, нажимает ctrl-s, перезагружает страницу → изменения теряются. Или я хочу отлаживать какой-то сайт, у меня нет возможности изменять файлы.
Я не хочу только сохранять изменения, как в сохранять CSS - во время просмотра, как я могу сохранить файлы css изнутри chrome dev или firebug в локальный каталог, я хочу, чтобы они сохранялись между перезагрузкой страницы.
Вы получили большую часть этого, но здесь небольшое изменение:
Внесите изменения в панель "Стили" (или в "Источники" ), затем перейдите в "Источники" , и когда ваш измененный файл открыт, нажмите ctrl-s.
Затем вы можете щелкнуть правой кнопкой мыши объект в списке "Источники" и нажать Сохранить как... и сохранить новый измененный файл на диск.
Невозможно сохранить измененный удаленный файл, не сохраняя его на диске, и ожидать, что он будет изменен при перезагрузке.
Рабочие области позволяют редактировать файлы, сопоставленные с локальным каталогом, но, естественно, предварительным условием является обслуживание локальных файлов.
Если вы играете с файлами, у вас нет прямого/удобного доступа (по какой-либо причине), я рекомендую настроить прокси-сервер, например Burp. В двух словах вы можете изменить ответ сервера и выполнить поиск на лету и заменить его как cdn.example.com/jquery-library.js на localhost:8080/jquery-library.js в html-корпусе. Все, что вам нужно сделать после этого, - установить локальный сервер (тривиальный) и отредактировать локальный экземпляр script!
Это удобный шаблон для предварительного просмотра локальных изменений в отношении производственного контента, если он не используется вместо тестовой среды.
Возможно, но довольно сложно:
Вы можете попробовать это так (для jquery):
- сначала загрузите страницу, а на вкладке источников установите точку останова в строке номер 1 - затем перезагрузите страницу, измените файл и сохраните (вы можете видеть, что страница приостановлена из-за точки останова) - нажмите кнопку воспроизведения, и страница начнет загружаться. Сделанные вами изменения будут работать. Недостатком этого решения является то, что как только вы снова обновите страницу, изменения будут потеряны.
Надеюсь, что это поможет!
Насколько я могу судить, в Chrome DevTools нет способа сделать это. Вы должны просмотреть документацию сохранение и внести локальные изменения, Единственное, что, похоже, сохраняется при перезагрузке, - это snippets... но это не похоже на то, что вы хотите.
Если когда-нибудь будет создано решение для этого... Я хочу этого. На данный момент, кажется, лучше всего вы можете сделать это с помощью скриптов контента и т.п.
Я не знаю, соответствует ли это ответам, но это то, что я делаю, и тем ближе к тому, что мне нужно.
Я загружаю страницу в браузере, и я сохраняю ее как в локальном файле. Обратите внимание, что я сохраняю полную страницу с помощью HTML, js и CSS.
Теперь, если я хочу изменить CSS, я редактирую HTML и направляю этот файл (или файлы) в свои файлы разработки.
Я перезагружаю страницу, и теперь я могу работать так, как вы хотите (сохранение и перезагрузка того, что я сохранил).
Конечно, это означает, что у вас есть полный доступ к файлам, и, скорее всего, они локальные, но я не думаю, что вы действительно хотите редактировать реальные веб файлы в режиме онлайн.
Когда я закончу модификацию файлов, это просто вопрос синхронизации файлов dev с веб файлами.
Просто подсказка, под Firefox я использую Greasemonkey. Я не знаю, знаете ли вы об этом инструменте, но он позволяет запускать скрипты javascript через веб-страницу для веб-сайта. Затем с адаптированным javascript вы можете динамически изменять css.
Немного о начале greasemonkey: http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/
Для хром это tampermonkey: http://tampermonkey.net/faq.php
Примечание. Использует библиотеку 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();
Я использую свой apache в режиме отладки с eclipse, поэтому cahnges отражаются на сайте, как только я сохраняю страницу.
См. fooobar.com/info/54698/...:
Ресурс Overrideрасширение позволяет сделать именно это:
- создать правило файла для URL-адреса, который вы хотите заменить
- отредактируйте js/css/etc в расширении
- перезагружайте столько, сколько хотите:)
Вы даже можете добавить вкладку в инструменты dev.