구글 크롬 디버깅 모드로 웹사이트 오류 찾는 방법

이번 시간에는 크롬에서 제공하는 디버깅 모드에 대한 사용 설명을 포스팅하도록 하겠습니다. 개발을 하신 분들이라면 디버깅이라는 용어를 아실 텐데, 디버깅이란 프로그램 소스 내 흘러가는 로직을 부분별로 볼 수 있도록 하는 기능입니다. 보통 오류 검증용으로 많이 사용하죠.

 

구글 크롬 브라우저에서는 별도 기능으로 디버깅을 할 수 있도록 지원하고 있으며 저도 최근에 제가 개발중인 웹 사이트의 자바스크립트 오류를 크롬 디버깅 기능으로 잘 찾아내어 처리하였습니다.

 

 

---

구글 크롬은 웹사이트 관리를 위한 유용한 도구

디버깅 모드는 각종 웹사이트 오류를 확인하는 기능

---

 

 

 

크롬 디버깅 모드 전환

 

먼저 크롬에서 디버깅 모드에 어떻게 들어가는지 알려 드리겠습니다. 디버깅을 원하는 페이지에서 키보드의 F12버튼을 누르면 아래 사진처럼 추가 화면이 출력됩니다. 

 

이 추가 화면에서의 메뉴는 아래와 같습니다. 

 

- Elements : CSS 요소 식별 시 용이합니다.

- Console

- Sources : 디버그 모드 제공 메뉴

- Network

- Performance

- Memory

- Application

- Security

- Audits

 

 

다른 메뉴들은 잘 안써봐서 정확히는 모르고 Elements는 CSS요소를 식별하고 값을 바꾸는 용도로 종종 쓰고 있는 메뉴 입니다. 그리고 디버그 모드를 제공하는 메뉴는 Sources 메뉴 입니다.

 

 

저는 제가 개발하여 운영하고 있는 kpopschools.com이라는 사이트를 대상으로 디버깅해 보았습니다. 본 포스팅에 있는 사진들은 관련해서 디버깅한 내역을 첨부해 보았습니다.

 

디버깅을 위해 출력된 추가 메뉴 중 source 메뉴를 선택합니다. 이 메뉴에서는 지금 화면에 표시된 페이지의 소스가 나오게 됩니다. 이 소스 중 원하는 부위에 breakpoint를 설정하여 디버깅을 하는 구조입니다.

 

 

F12를 눌러 source메뉴로 간면 위 사진처럼 프로그램 소스 리스트가 나오며 이중 하늘색 폴더를 클릭하면 관련 소스가 표시됩니다.

 

 

표시된 소스 중 디버깅을 원하는 위치에 breakpoint를 지정합니다. breakpoint는 디버그가 수행되면서 해당 point에서 멈추고 '계속 진행' 버튼을 누르면서 point에 오류가 있는지를 점검하는 위치입니다.

 

 

 

breakpoint는 해당 위치의 숫자에 마우스 우클릭을 해서 위의 사진처럼 나오게 되면 'Add breakpoint'를 눌러 point를 지정하는 방식입니다.

 

원하는 위치의 숫자에 breakpoint를 지정하도록 합니다.

 

 

breakpoint지정 후 F5키를 눌러 새로고침을 하면 디버깅이 시작됩니다. 위 화면 중 좌측 상단에 'Paused in debugger'표시가 있는데 지정한 breakpoint직전까지 수행하였다는 내용입니다.

 

여기서 진행 표시(Resume script execution)을 누리게 되면 breakpoint이후로 디버깅이 수행되게 됩니다.

 

 

제가 개발한 사이트에서 임의로 소스코드 오류(미확인 변수 명)을 발생시켜 크롬 디버깅 모드에서 오류가 발생한 디버깅이 어떻게 나오는지 보여 드리겠습니다.

 

먼저 소스에 미확인 변수명을 추가하여 업로드 한 후, 해당 위치에 breakpoint를 지정한 다음 F5를 눌러 디버깅을 실행시켜 보았습니다.

 

 

확인 결과, 위의 화면 처럼 145번 줄 아래에 있는 소스에 오류가 발생되었다고 빨간색 밑줄이 쳐 있는 것을 볼 수 있습니다. 이 빨간색 줄 맨 끝으로 가서 마우스를 소스 위에 올리면 오류 메세지가 출력되는데, 저 같은 경우 미 확인 변수가 포함되어 있다는 메세지가 출려되었습니다.

 

저도 알게된지 얼마 안되었지만 웹사이트 소스 오류에 대해 용이하게 찾아볼 수 있는 크롬 디버깅 기능에 대해 복습 및 다른 분들에게도 도움이 되고자 정리해 보았습니다.