크롬이용 화면 capture/웹 페이지 전체 화면/개발자 도구

크롬 브라우저 개발자 도구를 이용하여 웹페이지 전체를 스크롤 Capture 하는 방법에 대한 설명입니다

웹페이지를 검색하며 자료를 찾다 보면 웹페이지 전체 내용을 저장 할 필요가 있을 때가 있어서 찾아보니 방법이 있네요 확장 프로그램을 설치 할 필요도 없으니 편리하게 사용 가능 합니다. 


크롬 브라우저 개발자 도구를 이용하여 웹페이지를 Capture 하는 방법.

개발자 도구를 이용한 방법에는 2가지가 있습니다.
그것은 사용자에 PC환경에 관련 된 것이니 사용자 환경에 맞는 방법으로 하면 되겠습니다.



크롬의 개발자 도구를 이용한 FULL SCREEN CAPTURE 2가지 방법.


   첫 번째 방법

1. 크롬 브라우저를 실행 합니다.

2. Capture 하고자 하는 페이지에서 키보드의 F-12 key 누릅니다.

   밑의 그림과 같은 창이 나타납니다.


크롬 개발자도구선택 화면


3. Ctrl + Shift + p 누릅니다.

    그럼 밑에 와 같은 창이 나타납니다.


크롬 개발자도구 캡쳐 실행화면



3-1. ① RUN> 입력으로 이동.


        4종류의 Screenshot 할 수 있는 항목이 표시 됩니다.

      ② RUN> SCREEN 이라고 입력. 

        - Capture area screenshot

        - Capture full size screenshot

        - Capture node screenshot

        - Capture screenshot

      ③ Capture full size screenshot에 

      ④ Screenshot  바를 선택하여 Click

         .png file 형태로 다운로드 폴더에 저장 됩니다.


   두 번째 방법


1. Capture 하고자 하는 페이지에서 크롬 브라우저 왼쪽. 밑에 그림의  ① 선택


크롬 개발자도구 우측 상단 설정 메뉴


 ② 도구 더 보기 선택

 ③ 개발자 도구 선택

     창이 나타나면 

첫 번째 방법의 3-1항의 내용을 순서 대로 하시면 됩니다.

이 모든 게 몇 초 안에 완료 됩니다.

다른 확장 프로그램이나 Tool 없이 간단히 원하는 결과를 얻을 수 있습니다.

이상과 같이 크롬 개발자 도구를 이용한 방법 입니다.


감사합니다. 

좋은 하루 되세요.