Então, estou usando o navegador Chrome/Chromium (mas poderia usar o Firefox, se necessário).
Estou visualizando páginas da web que são construídas "dinamicamente" com (presumivelmente) AJAX (pense em como você rola para baixo no Facebook e as coisas continuam aparecendo e aparecendo).
Eu gostaria de salvar o html dessa página depois de carregar um monte de coisas, mas isso não aparece no DOM das Ferramentas do Desenvolvedor do Chromium e clicar com o botão direito para Salvar apenas salva a página original, antes do carregamento do AJAX coisa.
O que posso fazer?
Responder1
Uma maneira de obter o código-fonte com todos os elementos carregados dinamicamente é através das Ferramentas do desenvolvedor do Chrome ( F12). Escolha a <HTML>tag logo no início da página e copie o elemento ( CTRL+ C). Isso também deve copiar todos os dados incluídos, carregados dinamicamente ou não, para a área de transferência, e você pode colá-los onde quiser.
Aqui está um gif mostrando o processo:
A desvantagem óbvia é que você terá que baixar manualmente quaisquer arquivos ( .js, .css, imagens) e salvá-los (dica: use a guia "fontes" nas Ferramentas de Desenvolvimento) na mesma pasta do arquivo html se quiser o completo site ou, alternativamente, modifique os links no código-fonte HTML desta forma, se você não se importa que alguns dados sejam obtidos da web:
===ORIGINAL===
<img src="file.jpg">
===MODIFIED===
<img src="[url_of_website_that_you_want_to_save]/file.jpg">
Responder2
Marcador
Aqui está outro método, muito mais fácil!
Salve o seguinte código JavaScript como umbookmarklete clique nele na página da qual deseja visualizar a fonte gerada de:
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(); })();
Clique aqui para facilitar o processo!|JSFiddle
GIFs:
