Google 크롬에서 HTML 소스를 보는 방법

사이트의 소스 코드를 디버깅하는 웹 디자이너 든 사이트의 코드가 어떻게 생겼는지 궁금하든 관계없이 Google 크롬에서 바로 HTML 소스를 볼 수 있습니다. HTML 소스를 보는 방법에는 소스보기와 개발자 도구를 사용하여 검사의 두 가지 방법이 있습니다.

페이지 소스보기를 사용하여 소스보기

Chrome을 실행하고 HTML 소스 코드를 보려는 웹 페이지로 이동합니다. 페이지를 마우스 오른쪽 버튼으로 클릭하고 "페이지 소스보기"를 클릭하거나 Ctrl + U를 눌러 새 탭에서 페이지 소스를 확인합니다.

완전히 확장되고 서식이 지정되지 않은 웹 페이지의 모든 HTML과 함께 새 탭이 열립니다.

HTML 소스에서 특정 요소 나 부분을 찾고 있다면 소스보기를 사용하는 것은 지루하고 번거 롭습니다. 특히 페이지에서 많은 JavaScript와 CSS를 사용하는 경우 더욱 그렇습니다.

이 방법은 Chrome의 개발자 도구 창을 사용하며 소스 코드를 보는 데 훨씬 더 깔끔한 접근 방식입니다. 추가 서식과보고 싶지 않은 요소를 축소 할 수있는 기능 덕분에 HTML을 여기에서 더 쉽게 읽을 수 있습니다.

Chrome을 열고 검사하려는 페이지로 이동합니다. 그런 다음 Ctrl + Shift + i를 누릅니다. 현재보고있는 웹 페이지와 함께 고정 된 창이 열립니다.

요소를 더 확장하려면 요소 옆에있는 작은 회색 화살표를 클릭합니다.

기본적으로 전체 페이지의 코드를 보지 않고 HTML의 특정 요소를 검사하려면 페이지에서 해당 공간을 마우스 오른쪽 단추로 클릭 한 다음 "검사"를 클릭하십시오.

이번에 창이 열리면 클릭 한 요소가 포함 된 코드 부분으로 직접 이동합니다.

도킹 위치를 변경하려면 하단, 왼쪽, 오른쪽으로 이동하거나 별도의 창으로 도킹을 해제 할 수도 있습니다. 메뉴 아이콘 (점 3 개)을 클릭 한 다음 각각 별도의 윈도우에 도킹 해제, 왼쪽에 도킹, 하단에 도킹 또는 오른쪽에 도킹을 선택하십시오.

그게 전부입니다. 코드 확인이 끝나면 소스보기 탭을 닫거나 개발자 도구 창에서 'X'를 클릭하여 웹 페이지로 돌아갑니다.