Обновление файла с помощью инструмента разработчика / Firebug

Question

Есть ли способ сохранить изменения, внесенные в Chrome Developers Tool или Firebug, прямо в файл?Предполагая, что у меня есть доступ для чтения / записи к этому файлу.

Или есть какие-либо инструменты разработки, которые могут обновлять изменения аналогичным способом (или аналогичным интерфейсом) ??

Answer 1

Да, в Firefox, если вы также используете отличный Web Developer дополнение ...

Используя это дополнение, выберите Просмотреть исходный код -> Просмотреть созданный источник .
Это откроет текущее состояние HTML-файла ¹ , измененное JS и любыми ручными изменениями, внесенными вами в Firebug.

В открывшемся окне вы можете "сохранить как" файл или скопировать и вставить по желанию.

Обратите внимание, что этот сгенерированный файл будет иметь множество стилей Firebug (легко идентифицированных) и может иметь атрибуты style, установленные для элементов с помощью JS.

¹ К сожалению, он не фиксирует изменения в файлах CSS или JS, которые связаны в.
По этой причине при настройке с помощью Firebug мне нравится изменять CSS и JS, добавляя правила стиля и код в "файл" HTML.
Как только страница выглядит / действует примерно так, как нужно, изменения фиксируются с помощью Просмотр созданного источника , а затем при необходимости объединяются со связанными файлами.

Answer 2

В инструментах разработчика Chrome можно сохранить измененные файлы CSS и JavaScript с панели «Источники» и посмотреть, какие изменения (различия) были внесены в эти файлы.

Например:

1. Откройте файл JavaScript или CSS на панели "Источники".

2. Щелкните источник.

3. Внесите изменения

4. Нажмите Command-S или Ctrl-S, чтобы сохранить изменения.

5. Щелкните правой кнопкой мыши исходный код (или в дереве источников панели "Источники") и выберите Локальные изменения , чтобы просмотреть управление версиями.

6. Щелкните правой кнопкой мыши, выберите "Сохранить как ..." и выберите место на диске для сохранения файла.Последующие сохранения будут сохранены в этом месте.

Answer 3

Есть проект Java для Eclipse / Chrome:

http://code.google.com/p/chromedevtools/

Это только отладчик JavaScript (вы не видите CSS, сеть и т. д.), но вы можете настроить свой проект Eclipse так, чтобы отлаживать и редактировать те же файлы (плюс редактирование в реальном времени). В текущей версии настройка исходных файлов немного сложна

http://code.google.com/p/chromedevtools/wiki/FeatureDebugOnRealFiles

(надеюсь, следующая версия будет проще).

Вместе с JSDT, Aptana или другой поддержкой JavaScript вы можете получить хороший отладчик IDE + для Chrome.

Answer 4

Нет.Код, который вы редактируете, является визуализированным кодом на стороне клиента.Невозможно повлиять на код на стороне сервера через браузер.В любом случае семантика такой операции действительно нарушается, если базовый файл (файлы) на стороне сервера нестатичен.