Chrome에서 스크린샷을 찍는 방법

이 기사에서는 Google Chrome 개발자 도구를 사용하여 특정 웹 페이지 요소 또는 전체 웹 페이지의 스크린샷을 찍는 방법을 보여줍니다.

내용 주제:

1. Google 크롬 개발자 도구 열기
2. Google Chrome 개발자 도구를 사용하여 웹 페이지에서 특정 요소 선택
3. Google Chrome 개발자 도구를 사용하여 웹페이지 요소의 스크린샷 찍기
4. Google Chrome 개발자 도구를 사용하여 전체 웹 페이지의 스크린샷 찍기
5. 결론
6. 참조

Google 크롬 개발자 도구 열기

Google 크롬 개발자 도구를 열려면 Google 크롬을 실행하고 스크린샷을 찍고 싶은 웹 페이지를 방문하여 누르십시오. <컨트롤> + <시프트> + 나 .

Google Chrome 개발자 도구를 여는 데 도움이 필요한 경우 다음 문서를 읽어보세요. Google 크롬 개발자 도구를 여는 방법 .

Google Chrome 개발자 도구를 사용하여 웹 페이지에서 특정 요소 선택

Google Chrome 개발자 도구를 사용하여 웹 페이지에서 특정 요소의 스크린샷을 찍으려면 웹 페이지에서 스크린샷을 찍을 요소를 선택할 수 있어야 합니다.

Google Chrome 개발자 도구의 '요소' 탭에서 웹 페이지의 요소를 선택할 수 있습니다.

Google Chrome 개발자 도구의 '검사' 도구를 사용하여 웹 페이지에서 요소를 선택할 수도 있습니다.

검사 도구를 사용하려면 다음을 클릭하십시오.

Chrome 개발자 도구의 왼쪽 상단에서

웹 페이지에서 스크린샷을 찍고 싶은 요소를 선택하세요. 요소가 선택되면 '요소' 탭에서 HTML 코드 섹션도 자동으로 선택되어야 합니다.

Google Chrome 개발자 도구를 사용하여 웹페이지 요소의 스크린샷 찍기

선택한 웹 페이지 요소의 스크린샷을 찍으려면 '요소' 탭에서 선택한 HTML 상위 요소를 마우스 오른쪽 버튼으로 클릭(RMB)하고 '노드 스크린샷 캡처'를 클릭합니다.

선택한 웹 페이지 요소의 스크린샷을 찍어 컴퓨터에 저장해야 합니다.

보시다시피 선택한 웹 페이지 요소의 스크린샷이 성공적으로 촬영되었습니다.

Google Chrome 개발자 도구를 사용하여 다른 웹 페이지 요소의 스크린샷을 찍어 보겠습니다.

LinuxHint 기사 중 하나에서 목차를 선택하고 마우스 오른쪽 버튼을 클릭(RMB)한 다음 '노드 스크린샷 캡처'를 클릭하여 최근에 한 것처럼 스크린샷을 찍습니다.

이제 스크린샷이 찍혀 저장됩니다.

보시다시피 목차만 캡쳐한 화면입니다.

Google Chrome 개발자 도구를 사용하여 전체 웹 페이지의 스크린샷 찍기

전체 웹 페이지의 스크린샷을 찍으려면 Google Chrome 개발자 도구의 '요소' 탭으로 이동하십시오. 끝까지 스크롤하여 html 태그를 선택합니다. 이것은 전체 웹 페이지를 선택합니다.

이제 html 태그를 마우스 오른쪽 버튼으로 클릭(RMB)하고 '노드 스크린샷 캡처'를 클릭합니다.

전체 웹 페이지의 스크린샷을 찍어 컴퓨터에 저장해야 합니다.

보시다시피 전체 웹 페이지의 스크린샷이 성공적으로 촬영되었습니다.

결론

Google Chrome 개발자 도구를 여는 방법을 보여 드렸습니다. 또한 Google Chrome 개발자 도구의 검사 도구를 사용하여 특정 웹 페이지 요소를 선택하는 방법과 Google Chrome 개발자 도구를 사용하여 특정 웹 페이지 요소 및 전체 웹 페이지의 스크린샷을 찍는 방법을 보여 주었습니다.

참조:

• https://developer.chrome.com/blog/new-in-devtools-62/#node-screenshots