Итак, я использую браузер Chrome/Chromium (но могу использовать Firefox, если нужно).
Я просматриваю веб-страницы, которые создаются «на лету» с помощью (предположительно) AJAX (вспомните, как вы прокручиваете страницу в Facebook, а элементы просто появляются и появляются).
Я хотел бы сохранить HTML-код для такой страницы после загрузки множества данных, но он не отображается в DOM инструментов разработчика Chromium, а щелчок правой кнопкой мыши для сохранения просто сохраняет исходную страницу до загрузки данных с помощью AJAX.
Что я могу сделать?
решение1
Один из способов получить исходный код со всеми динамически загруженными элементами — через Chrome Developer Tools ( F12). Выберите <HTML>тег в самом начале страницы и скопируйте элемент ( CTRL+ C). Это также должно скопировать все вложенные данные, динамически загруженные или иным образом, в буфер обмена, и вы затем можете вставить их куда угодно.
Вот gif-анимация, демонстрирующая процесс:
Очевидный недостаток заключается в том, что вам придется вручную загружать все файлы ( .js,,, .cssизображения) и сохранять их (совет: используйте вкладку «Источники» в инструментах разработчика) в той же папке, что и HTML-файл, если вам нужен полный веб-сайт, или, в качестве альтернативы, изменять ссылки в HTML-источнике следующим образом, если вы не против того, чтобы некоторые данные были получены из Интернета:
===ORIGINAL===
<img src="file.jpg">
===MODIFIED===
<img src="[url_of_website_that_you_want_to_save]/file.jpg">
решение2
Букмарклет
Вот еще один метод, гораздо более простой!
Сохраните следующий код JavaScript какбукмарклети щелкните по нему на странице, чтобы просмотреть сгенерированный исходный код:
javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();
Нажмите здесь, чтобы упростить процесс!|JSFiddle
Гифка:
