웹 디자이너가 사이트의 소스 코드를 디버깅하거나 사이트 코드의 모양이 궁금한 경우 Chrome에서 바로 HTML 소스를 볼 수 있습니다. HTML 소스를 보는 방법에는 개발자 도구를 사용하여 소스보기 및 검사라는 두 가지 방법이 있습니다.
페이지 소스보기를 사용하여 소스보기
Chrome을 실행하고 HTML 소스 코드를 보려는 웹 페이지로 이동하십시오. 페이지를 마우스 오른쪽 버튼으로 클릭하고 “페이지 소스보기”를 클릭하거나 Ctrl + U를 눌러 페이지 소스를 새 탭에서 봅니다.
완전히 확장되고 형식이 지정되지 않은 웹 페이지의 모든 HTML과 함께 새 탭이 열립니다.
HTML 소스에서 특정 요소 나 부분을 찾고 있다면 특히 소스 페이지를 사용하는 것이 번거롭고 번거 롭습니다. 특히 페이지에서 JavaScript와 CSS를 많이 사용하는 경우입니다.
개발자 도구를 사용하여 소스 검사
이 방법은 Chrome의 개발자 도구 창을 사용하며 소스 코드를 보는 훨씬 깔끔한 방법입니다. 추가 서식 및보고 싶지 않은 요소를 축소 할 수있어 HTML을 쉽게 읽을 수 있습니다.
Chrome을 열고 검사하려는 페이지로 이동하십시오. 그런 다음 Ctrl + Shift + i를 누릅니다. 보고있는 웹 페이지와 함께 고정 된 창이 열립니다.
요소 옆에있는 작은 회색 화살표를 클릭하면 더 확장 할 수 있습니다.
기본적으로 전체 페이지의 코드를 보지 않고 HTML에서 특정 요소를 검사하려면 페이지에서 해당 공간을 마우스 오른쪽 단추로 클릭 한 다음 “검사”를 클릭하십시오.
이 창이 열리면 클릭 한 해당 요소가 포함 된 코드 부분으로 바로 이동합니다.
도크 위치를 변경하려면 아래, 왼쪽, 오른쪽으로 도킹하거나 별도의 창으로 도킹 해제 할 수 있습니다. 메뉴 아이콘 (점 3 개)을 클릭 한 다음 개별 창으로 도킹 해제, 왼쪽으로 도킹, 아래쪽으로 도킹 또는 오른쪽으로 도킹을 선택하십시오.
그게 전부입니다. 코드 확인을 마치면 소스보기 탭을 닫거나 개발자 도구 창에서‘X’를 클릭하여 웹 페이지로 돌아갑니다.
