Google 크롬 개발자 도구를 사용하여 HTML & CSS 학습

프로그래밍 초보자이기 때문에 내용에 오류가있을 수 있습니다.
만약, 잘못이 있으면 수정하므로 점점 지적해 주세요.

이번에는 개발자 도구에 대해 가볍게 쓰고 싶습니다.
자세한 기능에 대해서는 나중에 기사로 하고 싶습니다.

개발자 도구란 무엇입니까?

Google 크롬 개발자 도구는 Chrome에서 웹페이지를 볼 때 동시에 해당 페이지의 HTML, CSS 및 JavaScript 코드를 표시하는 기능입니다.
표시하고 싶은 페이지에서 Windows라면 F12 키, Mac이라면 Command+Option+I 키를 눌러 표시할 수 있습니다.

돋보기 아이콘

왼쪽 상단의 돋보기 아이콘을 누르면 마우스로 선택한 웹 페이지의 요소 코드를 볼 수 있습니다.

이것을 사용하면, 신경이 쓰인 요소가 어떻게 구성되어 있는지 조사할 수 있습니다.

장치 아이콘

돋보기 아이콘의 오른쪽에 있는 장치 아이콘을 누르면 스마트폰 등에서 화면을 확인할 수 있는 에뮬레이터 창이 표시됩니다.

패널

상단에 표시되는 탭을 패널이라고 하며 개발자 도구의 기능이 정리되어 있습니다.

Elements 패널

요소 패널에서 HTML 및 CSS 태그와 스타일을 확인할 수 있습니다.
브라우저 부분에 표시되는 HTML 요소를 트리 뷰로 표시합니다.

콘솔 패널

JavaScript 실행과 오류를 확인할 수 있습니다.

소스 패널

CSS나 JavaScript의 코드를 디버그 할 수 있는 기능입니다.
코드 정형도 가능합니다.

네트워크 패널

페이지를 요청한 후 통신 내용을 목록으로 볼 수 있습니다.

Performance 패널

페이지를 볼 때 브라우저 엔진이 어떤 처리를 하고 있는지, 얼마나 걸리는지 자세히 조사할 수 있습니다.

Memory 패널

보고 있는 웹 페이지에서 사용되는 메모리 양을 확인할 수 있습니다.

애플리케이션 패널

쿠키와 웹 스토리지를 확인하고 편집할 수 있습니다.

보안 패널

페이지에서 발행된 연결 요청이 안전한지(보안) 여부를 확인하여 진단 결과를 표시합니다.

Audits 패널

웹 페이지를 최적화하기위한 권장 사항을 제시합니다.

추가 패널

Chrome 웹 스토어에서 패널을 추가할 수도 있습니다.