Как получить полностью вычисленный HTML (вместо исходного HTML)?

Учитывая веб-страницу, которая использует множество javascript для генерации своего HTML, как я могу получить окончательный вычисленный HTML, который анализируется браузером вместо исходного HTML? Другими словами, предположим, что на странице есть множество тегов, окружающих функции javascript, которые при вызове возвращают некоторый HTML. Когда я просматриваю источник страницы, я вижу вызов функции script, а не HTML, который он создает.

Как я могу получить весь HTML-код, созданный на веб-странице?

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

Update:

Спасибо за все ответы. Тем не менее, я все еще не получаю HTML-код, который я вижу в консоли Firebug, с помощью любого из этих методов. На моей странице с примерами я использую вкладку "Информация" в своем собственном профиле Facebook. Если вы просмотрите источник на этой странице, вы увидите множество сценариев с названием "big_pipe.onPageletArrive()". Однако, если вы посмотрите на него в Firebug, каждый из этих вызовов функций отображает HTML. Я попробовал щелкнуть правой кнопкой мыши тег в Firebug, View Generated Source на панели инструментов Webdev и предложение Chrome, но все они дают мне вызов script, а не HTML.

Любые другие идеи?

Обновление 2:

Когда я сказал, что каждая из этих функций отображает HTML в Firebug, я был не совсем прав. Они отображаются только в том случае, если я выберу их на странице и щелкните правой кнопкой мыши- > Проверить элемент. Затем, как представляется, это сделать. Так что, может быть, мой вопрос стал тем, как вы получаете Firebug, чтобы автоматически отображать весь HTML-код, чтобы вы могли его выбрать и сохранить? (Или я открыт для любого другого решения для захвата этого HTML).

Ответ 1

С вкладкой HTML Firebug вы можете щелкнуть правой кнопкой мыши элемент <html> и нажать "Копировать HTML".

Вы можете сделать то же самое с инструментами разработчика в Chrome/Safari.

Ответ 2

Панель инструментов веб-разработчиков для Firefox имеет параметр "Просмотр сгенерированного источника", который предоставляет эту функциональность.

Ответ 3

with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

Открытая консоль
скопируйте, вставьте приведенный выше код и выполните
открывается пустая страница,
Теперь осмотрите страницу, щелкнув правой кнопкой мыши или нажав F12,
скопировать externalhtml комментария
вставьте куда хотите
при желании удалите комментарий в начале и в конце

Если вы хотите живую версию, на которую можно кликать, просто пропустите теги комментариев в приведенном выше коде.

Ответ 4

document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');

<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>

Ответ 5

Это невозможно вообще. Вот отрывок из моего букмарклета, который опирается на нестандартный outerHTML:

with (window.open("")) {
    document.open("text/html");
    document.write("<PRE>");
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("</PRE>");
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

Примечание. DTD отсутствует и вообще не восстанавливается.