Сохранение манипулируемого DOM / HTML после редактирования с помощью Firebug

Question

Предположим, что я запустил Firefox с включенным Firebug на случайном сайте (скажем, slashdot.org).После загрузки сайта я начинаю редактировать страницу с помощью панели Firebug > HTML.Пока все хорошо: мои изменения сразу видны в Firefox.

Мои вопросы:

• Как сохранить отредактированное дерево DOM (представлено в виде HTML)?
• Как загрузить ранее обработанное дерево DOM / HTML-файл в «исходный контекст» страницы (в нашем примере это slashdot.org)?Мне нужен исходный контекст, чтобы все ссылочные объекты (CSS, изображения и т. Д.) Загружались правильно.

Answer 1

Вы не можете сохранить дерево как таковое, только HTML.Выберите корневой тег, щелкните правой кнопкой мыши и выберите Copy HTML, затем вставьте его в текстовый редактор и сохраните в файл HTML.

Answer 2

Как сохранить отредактированное дерево DOM (представленное в виде HTML)?

Firebug не содержит методов, которые можно использовать для сохранения текущего DOM в файл.Однако вы можете использовать Firebug вместе с расширением Web Developer для сохранения DOM в файл (представленный в виде HTML).

После того, как вы закончите манипулировать DOM в Firebug, выберите Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As....

Как загрузить ранее обработанное дерево DOM / HTML-файл в «исходный контекст» страницы (в примере slashdot.org)?Мне нужен исходный контекст, чтобы все ссылочные объекты (CSS, изображения и т. Д.) Загружались правильно.

Firebug не содержит никакого метода для перечитывания ранее сохраненного дерева DOM в «текущий».контекст "страницы.Однако, если мы будем использовать Firebug вместе с расширением для веб-разработчиков, мы сможем достичь требуемой функциональности.Просто откройте ранее сохраненный HTML в редакторе, таком как Блокнот, и скопируйте HTML в буфер обмена.Затем выберите Web Developer > Miscellaneous > Edit HTML и вставьте HTML.Готово!

Answer 3

Я не уверен, что вы подразумеваете под "исходным контекстом", но вы можете попробовать добавить следующее в заголовок сохраненного HTML.

<base href="http://slashdot.org/" />

Answer 4

Попробуйте cssUpdater, он состоит из надстройки FireFox, которая прослушивает изменения CSS FireBug через сокет-сервер и позволяет синхронизировать исходные файлы CSS. Вам также необходимо установить приложение Desktop.

Таким образом, рабочий процесс будет:

1. Редактировать в FireBug
2. Нажмите синхронизацию в cssUpdater
3. Перезагрузите ваш сайт и увидите, что ваши изменения сохранены

Вы можете проверить и использовать его здесь, http://www.cssupdater.com

Answer 5

Я думаю, что это хороший вопрос, короче говоря, firebug не предназначен для «сохранения» ваших правок, поэтому я бы предложил найти рабочий процесс, в котором вы никогда не будете слишком «глубоко» погружены в страницу.Одно дело сохранить HTML, но сохранить отредактированный CSS еще сложнее.Вот мои решения ваших вопросов:

1. Нажмите HTML-тег, нажмите Редактировать.Скопируйте и вставьте в другой текстовый файл.

2. Вы не можете «перезагрузить» манипуляцию с огнем в HTML.Однако вы можете скопировать манипулированный HTML после того, как вы довольны результатами (или недовольны).Либо оставьте его на буфере обмена, чтобы скопировать его в текстовый файл, а затем, когда вы захотите использовать его снова, вам необходимо скопировать его обратно в консоль редактирования firebug.

Answer 6

Когда вы находитесь в разделе HTML Firebug, на панели чуть ниже основной панели инструментов Firebug есть кнопка «Редактировать».Нажав на эту кнопку, вы получите текстовое представление HTML (с любыми внесенными вами изменениями), которое можно скопировать в текстовый редактор.

Answer 7

Вы можете настроить внешний редактор. Откройте Firebug, слева у вас есть значок Firebug, нажмите его и нажмите кнопку Открыть в редакторе, а затем настройте редакторы. Работает с Gedit и Bluefish.

Чтобы настроить gedit: откройте редактор настроек FireBug и нажмите кнопку «Добавить», назовите его gedit, а затем найдите исполняемый файл в «usr / bin» и выберите или введите gedit. Вы можете проверить конфигурацию перед сохранением.

Answer 8

Одна вещь, которую вы можете попробовать, это выбрать веб-страницу (щелкнуть правой кнопкой мыши, выбрать все из всплывающего меню), а затем выбрать View Selection Source. Это должно показать вам измененный HTML в исходном окне, которое вы можете затем скопировать и сохранить в редакторе. Firebug может добавить некоторые дополнительные материалы, которые вы можете удалить в текстовом редакторе.

Answer 9

Файл → Сохранить страницу как ... сохранит отредактированную разметку как HTML, но, похоже, вы также можете сохранить некоторое сгенерированное Firebu содержимое (я думаю, точно , что зависит ) на вашей версии Firebug).