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

Question

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

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

Answer 1

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

Например:

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

2. Нажмите в источнике.

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

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

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

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

Answer 2

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

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

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

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

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

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

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