그래서 저는 Chrome/Chromium 브라우저를 사용하고 있습니다(필요하다면 Firefox를 사용할 수도 있습니다).
나는 (아마도) AJAX를 사용하여 "즉시" 구축된 웹페이지를 보고 있습니다(Facebook에서 아래로 스크롤하면 내용이 계속해서 나타나고 나타나는 것을 생각해 보세요).
많은 항목이 로드된 후 해당 페이지에 대한 HTML을 저장하고 싶지만 Chromium 개발자 도구의 DOM에는 표시되지 않으며 저장을 마우스 오른쪽 버튼으로 클릭하면 AJAX가 로드되기 전에 원본 페이지가 저장됩니다. 물건.
어떡해?
답변1
동적으로 로드된 모든 요소가 포함된 소스 코드를 얻는 한 가지 방법은 Chrome 개발자 도구( F12)를 사용하는 것입니다. <HTML>페이지 맨 처음에 있는 태그를 선택 하고 요소( CTRL+ C)를 복사합니다. 또한 동적으로 로드되거나 클립보드에 포함된 모든 데이터를 복사한 다음 원하는 곳에 붙여넣을 수 있습니다.
다음은 프로세스를 보여주는 GIF입니다.
명백한 단점은 완전한 파일을 원할 경우 모든 파일( .js, , 이미지) 을 수동으로 다운로드하고 html 파일과 동일한 폴더에 저장해야 한다는 것입니다 (팁: 개발자 도구의 "소스" 탭 사용). .css웹사이트에서 일부 데이터를 가져오는 것이 괜찮다면 다음과 같이 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
GIF:
