HTML 소스 코드 추출기
모든 웹페이지의 HTML 소스 코드를 쉽게 추출하세요. 브라우저 확장이 필요 없이 콘텐츠를 직접 보고, 복사하고, 다운로드할 수 있습니다.
Google Chrome에서 페이지 소스를 검사하는 방법
Google 크롬에서 웹페이지의 소스 코드를 검사하는 것은 개발자, 디자이너, SEO 전문가에게 간단하면서도 매우 유용한 작업입니다. 아래 단계를 따르십시오.
Google 크롬을 엽니다.
Google Chrome 브라우저를 사용하고 있는지 확인하세요. 검사하려는 페이지를 엽니다.
개발자 도구에 액세스
개발자 도구(DevTools)를 여는 세 가지 주요 방법이 있습니다.
- 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "검사"를 선택합니다.
-
키보드 단축키를 사용하십시오:
Windows/Linux: Ctrl + Shift + IMac: Cmd + Option + I
- Chrome 오른쪽 상단에 있는 점 3개 메뉴(⋮) > 도구 더보기 > 개발자 도구를 클릭합니다.
소스 코드 찾아보기
DevTools가 열리면 여러 탭이 표시됩니다. 소스 코드를 검사하는 주요 항목은 다음과 같습니다.
요소
페이지의 HTML 구조를 표시합니다. 요소 위로 마우스를 가져가면 페이지에서 해당 영역이 강조표시됩니다.
콘솔
JavaScript 명령을 실행하고 페이지 스크립트를 디버그할 수 있습니다.
네트워크
페이지에서 로드한 모든 리소스(HTML, CSS, JavaScript 및 이미지)를 표시합니다.
HTML 탐색
요소 탭에서 DevTools의 왼쪽 상단에 있는 선택기 아이콘(< >)을 클릭한 다음 페이지의 요소를 클릭합니다. 그러면 해당 HTML 코드가 강조 표시됩니다. DevTools에서 HTML을 직접 편집하여 임시 변경 사항을 테스트할 수 있습니다.
전체 페이지 소스 보기
페이지의 전체 소스 코드를 보려면:
- 페이지의 아무 곳이나(DevTools 외부) 마우스 오른쪽 버튼으로 클릭하세요.
- "페이지 소스 보기"를 선택하세요.
- 전체 HTML을 표시하는 새 탭이 열립니다.
추가 팁
요소 복사: DevTools > Copy > Copy element에서 요소를 마우스 오른쪽 버튼으로 클릭합니다.
HTML로 검색:
사용 Ctrl + F (또는 Cmd + F Mac의 경우) HTML에서 특정 단어나 태그를 검색합니다.
소스 코드에서 검사할 수 있는 사항
자주 묻는 질문
HTML 소스 코드 추출기 정보
이 무료 HTML 소스 코드 추출기는 작업 흐름을 벗어나지 않고 정기적으로 페이지 마크업을 검사해야 하는 SEO 전문가, 웹 개발자 및 디지털 마케팅 담당자를 위해 설계되었습니다. 클라이언트 사이트를 감사하든, 경쟁업체 페이지를 비교하든, CMS가 올바른 메타 태그를 출력하고 있는지 확인하든 이 도구는 몇 초 안에 원시 HTML을 제공합니다.
브라우저 기본 "페이지 소스 보기"와 달리 이 추출기는 모든 장치에서 작동하며 한 번의 클릭으로 전체 소스를 복사하거나 다운로드할 수 있습니다. 추출은 서버측 프록시를 통해 이루어지므로 Googlebot을 포함한 웹 크롤러가 페이지를 요청할 때 실제로 수신하는 내용이 출력에 반영됩니다.