Сохранение текущего состояния отрендеренной в браузере страницы

Question

[entze]

Есть ли возможность сохранять текущее состояние отрендеренной страницы в виде статического HTML со ссылками на картинки, CSS (если можно рассчитанный) с помощью расширения или букмарклета?

Допустим, я зашел на сайт. Отрендерилась страница, отработали все скрипты, добавились элементы в DOM и т.д. Т.е. на экране я вижу текущее состояние. Я могу «поиграть со шрифтами», но как сохранить результат для дальнейшего просмотра и правок? Желательно «Одной кнопкой».

Answer 1

[Urvin]

Простейший скрипт для GreaseMonkey.
Если просмотр планируется по сети — пушить исходник в какой-нибудь pastebin.

Comments

[entze]

Есть готовое решение?

[Urvin]

// ==UserScript==
// @name       Save HTML
// @namespace  http://habrahabr.ru
// @version    0.1
// @description  enter something useful yourself
// @match      http://*/*
// @copyright  2013, Yuriy 'Urvin' Gorbachev
// ==/UserScript==

function getHtmlString()
{
  return document.documentElement.outerHTML;
}

function getSaverString()
{
  return '<div style="position:fixed;background-color:#fff;width:100px;height:30px;left:20px;top:20px;;z-index:9999;text-align:center;line-height:30px;border:#888 1px solid;border-radius:6px; box-shadow: 0 0 10px rgba(0,0,0,0.7);"><a href="#" id="btnSave">Сохранить</a></div>';
}

function saveString(aString)
{    
  document.location = "data:application/octet-stream;filename=page.html," + encodeURIComponent(aString);
}

function onSaveButtonClick()
{
  var lPageContents = getHtmlString().replace(getSaverString(),'');
  saveString(lPageContents);
  return false;
}

var lSaverBlock = document.createElement('div');
lSaverBlock.innerHTML = getSaverString();
document.body.insertBefore(lSaverBlock, document.body.firstChild);
document.getElementById("btnSave").addEventListener("click", onSaveButtonClick, false);

[entze]

Отлично! А есть возможность так же сохранять существующие стили?

[Urvin]

Не очень понимаю задачи. Стили либо прописываются в CSS, либо в теге «style».
В первом случае — через Greasemonkey можно подгрузить и вставить в страницу текст CSS,
во втором они уже будут сохранены.

[entze]

Сейчас для HTML сохранился существующий DOM. Что и требовалось. Спасибо :)

Если стили например генерируются скриптом, правятся в firebug или есть несколько подключаемых стилей (с переопределениями, наследованиями и прочим трешем которые в чужом коже сложно отлаживать) и которые в итоге рассчитываются в конечные значения (computed style) то можно ли сохранять их актуальное состояние так же как DOM, но для стилей элементов?

Например для about:blank в котором никаких внешних стилей нет, но в инструментах разработчика уже видно значения margin, значения наследованные по умолчанию.

[Urvin]

Думаю, это только какие-нибудь расширения только могут…

[entze]

А можно перебрать все элементы и для каждого сделать window.getComputedStyle(element)?

[Urvin]

Больно жирно. А потом представьте получить на выходе 50-мегабайтную страничку «hello world» с перечислением всех-всех-всех стилей.

[entze]

Да уж, для about:blank 273 строки на 7544 байт, но если включить inherited styles, то получается компактно.

Answer 2

[entze]

Ясно, спасибо. Надеюсь, кто-то кроме меня еще будет пользоваться.