크롬 브라우저 모바일 웹페이지 소스 보기 html css 소스 보기

1. 웹페이지 소스 간단히 보기

간단하게 소스를 확인하는 방법은 다른 브라우저와 동일합니다. 웹 페이지에서 오른쪽 마우스를 누르면 나타나는 페이지 소스 보기 메뉴를 이용하는 것입니다. 바로 실행하는 단축키는 Ctrl + U 입니다.
페이지 소스보기 이후에는 HTML 소스가 있는 새로운 탭이 나타납니다. 단, 오른쪽 마우스를 누르면 나타나는 빠른 실행 메뉴 보기가 차단된 사이트는 나타나지 않습니다. 이런 경우에는 브라우저에서 제공하는 개발자 도구를 이용해야 합니다.

2. 개발자 도구를 통해서 확인하는 방법

주로 소스를 분석하기 위한 도구로 오른쪽 상단에 더보기 > 도구 더보기 > 개발자 도구 메뉴를 클릭해서 창을 띄울 수 있습니다. 단축키는 Ctrl + Shift + I 혹은 F12 입니다.

F12 단축키를 눌러 개발자 도구를 띄우면 화면 하단이나 양 옆에 브라우저 내에 창이 나타납니다. 위치는 사용자가 정할 수 있으며, 새로운 창으로 띄울 수도 있습니다. 소스는 Elements 탭에서 볼 수 있습니다.

Elements 탭에서 오른쪽 영역의 창에는 디자인 소스인 CSS 코드를 보여줍니다. 특정 태그에 적용된 디자인 코드로 상단 파일 링크를 클릭하면 실제 소스 파일로 이동할 수 있습니다.

CSS 소스가 들어간 실제 파일의 내용을 보고 싶다면 Sources 탭으로 이동해야 합니다.