구글 크롬 개발자 도구 사용법 및 새창으로 띄우는 방법

사이트의 디자인을 분석하기 위한 툴로 크롬의 개발자 도구가 적당합니다. 별도의 툴이 아닌 크롬에 내장되어 있는 프로그램으로 자바스크립트, CSS 등 아주 디테일한 분석이 가능합니다. 그리고 브라우저에 들어가 있는 것이 아니라 별도의 창을 띄워서 볼 수도 있습니다. 오늘은 간단한 기본 기능만 설명하도록 하겠습니다.

 

 

▼ 크롬의 개발자 도구를 띄우는 방법은 두 가지입니다. 첫 번째는 메뉴를 통해 실행하는 방법입니다. 오른쪽 상단 더보기 > 도구 더보기 > 개발자 도구 메뉴를 실행하면 화면에 나타납니다. 두 번째는 단축키를 사용하는 것입니다. 단축키는 Function Key 인 F12 입니다. 아무래도 메뉴보다는 단축키를 이용하는 것이 빠르고 쉽겠죠.

 

▼ 개발자 도구는 웹 브라우저와 별도로 구분된 영역에 나타납니다. 화면 영역은 마우스를 이용해서 조절이 가능합니다. 그리고 개발자 도구가 화면에 장착된 방향은 더보기 > Dock side 옵션에서 조절할 수 있습니다. 분할된 화면의 크기가 작아서 웹 페이지를 분석하는데 어려움이 있다면 따로 개발자 도구를 분리할 수도 있습니다. Dock side 왼쪽 끝에 아이콘을 클릭해 보세요. 개발자 도구 창이 별도의 화면으로 떨어져 나옵니다. 

 

▼ 그림처럼 두 개의 창이 분리되었습니다. 이제 복잡하게 크롬 내부에서 웹 페이지를 분석하지 않아도 됩니다. 다시 원래대로 돌리고 싶다면 분리할 때 클릭했던 더보기 > Dock side 로 갑니다. 

 

▼ 개발자 도구 상단에는 많은 메뉴들이 있습니다. 그 중에서 가장 자주 사용하는 화면이 Elements 입니다. 웹 페이지 전체 HTML 소스와 CSS 를 볼 수 있으며, 사용자가 지정한 영역의 소스를 실시간으로 확인하는 것도 가능합니다. 방법은 간단합니다. 개발자 도구 왼쪽 끝에 화면에 화살표가 들어간 아이콘을 클릭해서 활성화합니다. 아이콘 이미지 라인이 파란색으로 바뀌면 활성화가 된 것입니다. 이제 웹 페이지에서 마우스를 원하는 위치에 가져갑니다. 화면 아래 개발자 도구에서는 웹 페이지에서 마우스가 있는 위치의 소스를 바로 보여줍니다. 역으로도 가능합니다. Elements 의 소스를 선택하면 웹 페이지 영역에서 어느 위치에 해당하는지 알려 줍니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 메모리 관리하는 방법 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기

 

 

 

 

▼ 다음은 화면에 적용된 CSS 값을 알아내는 방법입니다. Elemets 탭의 오른쪽에는 선택한 HTML 의 CSS 와 레이아웃 정보를 보여줍니다. Styles 탭으로 이동하면 Elements 에서 선택한 HTML 의 CSS 정보를 표시합니다. Styles 화면에서 주로 사용하는 기능은 원래 소스를 수정하지 않고 CSS 값을 변경해서 웹 브라우저에 반영해 볼 수 있다는 것입니다. 실제로 반영되는 것이 아니기 때문에 사용자가 마음대로 테스트해 볼 수 있는 유용한 기능입니다. 여러 값들을 테스트해 보고 값이 정해지면 실제 파일의 소스를 수정하는 것입니다. 

 

▼ CSS 값 수정은 간단합니다. 변수 뒤에 값을 더블 클릭하면 편집 가능한 Edit 형태로 바뀝니다. 만약 CSS 소스가 있는 페이지로 이동하고 싶다면 Styles 에디터화면에서 파일명과 줄번호가 표시된 텍스트를 클릭합니다. 그럼 Sources 탭으로 변경되면서 해당 CSS 소스 파일이 열립니다. 

 

▼ Sources 탭의 CSS 위치를 확인한 후 실체 파일을 열어서 변경하고 싶은 값을 적용합니다. 

 

▼ Console 탭은 로그를 확인하고 스크립트를 실행할 수 있는 곳입니다. 웹 페이지가 구동할 때 오류가 있다면 Console 화면에서 확인할 수 있습니다. 콘솔 로그를 통해 해당 위치로 이동해서 소스를 수정하고 완성해 나가는 것입니다. 

 

▼ Console 은 자바스크립트와 사칙연산 실행도 가능합니다. 그림처럼 alert() 함수를 실행하니까 웹 브라우저에 바로 반영이 되어서 화면에 나타났습니다. 지금까지 웹 페이지를 분석할 때 가장 기본적인 기능을 사용하는 방법에 대해 알아보았습니다. 좀더 디테일한 내용은 다음에 다루도록 하겠습니다.

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 메모리 관리하는 방법 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 크롬 개발자 도구 컬러 피커(Color Picker)로 색상값 알아 내기