웹 개발자를 위한 크롬 개발자 도구

---

시작하면서

꼭 프론트엔드 개발자가 아니더라도 웹 개발을 하다 보면 한 번쯤은 크롬 개발자 도구를 사용해 봤을 거라 생각한다. 크롬이 버전업할수록 크롬 개발자 도구 역시 나날이 발전해 왔고 현존하는 도구 중에는 최고의 웹 개발자 도구라고 말할 수 있다. 예전 IE6에서 alert과 status로 디버깅을 했던 시절을 생각하면 정말 좋은 세상에 살고 있다는 생각이 든다.

크롬 개발자 도구에는 정말 많은 기능들이 추가되었고 별도의 도구로 사용했던 기능들도 내부에 편입되어 더욱 유용해졌다. 심지어 로컬파일를 에디팅하고 저장해서 바로바로 브라우저에서 확인해 보는 에디터의 기능도 추가되었다. 이런 기능들이 모두 필요하지는 않을 수 있지만, 몇 가지는 꼭 알았으면 하는 기능들이 있다. 이 글은 전문 프론트엔드 개발자가 아닌 웹(또는 서버)개발자를 대상으로 자바스크립트 디버깅을 할 때 알아두면 좋을 만한 기능들을 소개한다.

유용한 셋팅

도구가 발전함에 따라 셋팅창에서 설정할 수 있는 내용도 많아졌다. 몇 가지 유용한 셋팅에 대해 알아보자.

도구에서 F1키를 누르거나 메뉴에서 Settings를 클릭해서 셋팅창을 열 수 있다.

다크테마 적용

개인적으로도 그렇지만 IDE나 에디터, 터미널 등 개발 환경을 다크 테마 위주로 셋팅하는 취향을 가진 개발자들이 많을 것으로 생각한다. 이런 취향을 가진 개발자를 위해 크롬 개발자 도구도 다크 테마로 전환할 수 있다. 다크 테마는 General - Appearance - Theme 항목에서 변경 할 수 있다.

Default로 설정되어 있는것을 클릭해서 Dark로 바뀌본다.

이제 있어보이는 다크 테마가 적용되어 뭘해도 멋있어 보인다.

Disable cache

아마 대부분 아는 옵션일 것이라 생각되지만 의외로 이 옵션을 몰라서 매번 인터넷 사용 기록 삭제로 캐시를 지워 주는 개발자가 많다. General - Disable cache 옵션을 체크해두면 개발자 도구가 열린 상태에선 캐시가 적용되지 않는다.

Blackboxing

언제 부턴인가 셋팅창에 자리를 잡기 시작한 Blackboxing 옵션.

자바스크립트 디버깅에 아주 유용한 기능이다. 코드량이 많을수록 빛을 발하는데, 디버거로 에러 스택을 추적하는 과정에 불필요한 라이브러리 코드를 건너뛸 수 있다.

제이쿼리를 사용한 자바스크립트 코드를 디버깅하면 아래와 같은 콜 스택 정보를 볼 수 있다.

여기서 실제 서비스에서 작성한 코드는 app.js 파일 하나인데 프레임웍정보에 가려 정작 필요한 정보를 찾기가 힘들다. 블랙박싱옵션으로 제이쿼리나 언더스코어같이 사용은 하지만 직접 개발한 내용은 아니라서 굳이 디버깅시에 보일 필요가 없는 프레임웍들의 코드를 숨겨줄 수 있다.

간단하게 Add pattern 버튼으로 블랙박싱할 자바스크립트 파일을 추가만 하면 앞으로는 귀찮던 몇개의 작업을 피할 수 있게된다.

Blackbox content scripts 체크박스는 크롬 익스텐션의 스크립트 파일들을 블랙박싱해주는 기능으로 항상 체크해두는게 좋다

Source

소스탭은 자바스크립트를 디버깅할때 주로 사용하게 된다. 웹페이지에 로드된 자바스크립트 파일을 확인 할 수 있고 코드의 스탭별 디버깅이나 변수의 값을 확인하는 등의 작업을 할 수 있다.

Command + P(Ctrl + P)

개발자들이 많이 사용하는 서브라임텍스트에는 "Go to anything"이라는 기능이 있다. 프로젝트 내의 파일을 검색하여 파일 이동을 쉽게 지원해주는 기능인데 서브라임텍스트에서 선보인 이후 많은 에디터들이 같은 기능을 지원하게 된다. 이 기능을 개발자도구에서도 지원한다.

소스탭에서 Command + P를 입력하면 팝업이 열리게 되는데 찾고자하는 파일의 이름을 타이핑하면 자동완성이 지원되어 원하는 파일을 쉽게 찾게 된다.

웹페이지에 로드된 자바스크립트 파일뿐아니라 CSS, HTML, 이미지파일도 검색이 된다.

파일 찾고 열어주는것 외에 특정 파일이 로드된 상태에서 ":1"을 입력하면 코드의 1번 라인으로 포커스를 이동해 준다. 이런 방식의 라인 이동은 VIM을 조금 사용해 봤던 개발자라면 익숙한 기능이다.

디버깅 컨트롤

다른 환경의 디버깅 도구와 마찬가지로 크롬 개발자 도구도 코드를 스텝별로 디버깅 하는 기능을 지원한다.

디버깅을 컨트롤 하는 패널에는 스텝을 다룰수 있는 버튼외에 브렉포인트관련 도구와 Async 체크박스가 있다. 해당 버튼들은 다른 환경의 디버깅 도구를 다뤄본 사람이라면 금방 적응할만한 UI를 가지고 있다.

• Pause/Continue, F8: 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 된다. 다른 브렉포인트가 잡힐 때까지 코드를 진행시킨다.
• Step over, F10: 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수안의 코드로는 진입하지 않는다. 즉 라인의 함수를 실행만 하게 된다.
• Step into, F11: 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.
• Step out, SHIFT+F11: 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아간다.
• Toggle breakpoints: 브렉포인트를 끄거나 켤수 있다.
• Pause on exception: 자바스크립트 예외가 발생하면 해당 위치에 브렉포인트를 잡아준다
• Capture async stack trace: 함수의 비동기 호출을 추적한다.

Watch

Watch 패널은 디버깅 도중에 살펴볼 변수나 객체를 미리 등록해서 한 번에 확인할 수 있게 해준다. "+" 버튼을 누르고 자바스크립트에서 변수명 혹은 함수 실행 등 자바스크립트로 표현 가능한 표현식을 입력한다.

브렉포인트가 잡힌 상태에서만 정상적으로 동작하게 되는데 디버깅 도중 현재 코드 스텝의 스코프에서 자바스크립트의 표현식에 해당되는 내용을 보여준다. 자바스크립트 문법에만 맞는다면 무엇이든 허용된다.

Call Stack

콜스택 패널에서는 현재 스텝의 함수 실행 콜스택을 보여준다. 디버깅 컨트롤 툴에서 async 체크 박스가 체크되어있다면 여기에서 비동기 호출 콜백들도 볼 수 있다.

각 항목을 클릭해서 해당라인의 코드를 살펴 볼수도 있다.

Scope

Scope는 일종에 자동 Watch라고 생각하면 된다. 자바스크립트의 펑션 스코프를 기반으로 글로벌 스코프부터 현재 라인에 해당되는 스코프까지의 변수들을 보여준다. this와 arguments의 내용들도 볼 수가 있는데 정확히 말하자면 Excution Context의 내용들을 보여준다. 순간순간 매우 유용한 정보들을 제공해준다.

break point

크롬 개발자 도구에선 여러 종류의 브렉포인트를 걸 수 있게 되었다. 도구 내에 코드 라인의 거터를 통해서 지정할 수 있을 뿐 아니라 DOM의 특정 상황이나 Ajax 통신에도 브렉포인트를 걸 수 있다.

브렉 포인트 걸기

웹페이지에 로드된 자바스크립트 파일을 열고 코드 화면의 특정 라인의 커터를 클릭하면 쉽게 브렉포인트를 잡을 수 있다.

물론 빈칸이 아닌 코드가 있는 라인을 클릭해야 브렉포인트가 정상적으로 잡힌다. 코드라인에 브렉포인트가 잡히게 되면 브렉포인트 패널에도 해당 정보가 추가된다.

체크박스로 브렉포인트를 온오프 할 수 있다. 이후 자바스크립트 실행 도중 해당 라인을 지나게 되면 해당 라인부터 디버깅할 수 있다.

DOM Breakpoints

브렉포인트 바로 밑에 보면 DOM breakpoints라는 패널이 보이고 아무런 버튼도 존재하지 않는다. DOM 브렉포인트는 DOM 상에 특정한 변화를 주는 자바스크립트 작업이 일어났을 때 브렉포인트를 잡아주는데, 소스 탭에서는 DOM 브렉포인트를 잡을 수 없고 엘리먼트 탭에서 잡아줘야 한다.

앨리먼트탭에서 변화를 감지하길 원하는 특정 엘리먼트 위에 마우스를 대고 오른쪽 클릭을 하게 되면 컨텍스트 메뉴가 나오는데 메뉴 중 Break On이라는 항목이 있다 그 하위 항목들이 바로 DOM 브렉포인트를 잡아주는 메뉴이다.

• Subtree Modifications: 해당 노드의 자식노드의 변화, 예를들면 자식노드의 추가나 삭제를 하는 자바스크립트 코드에 브렉포인트를 잡아준다.
• Attributes Modificattion: 해당 노드의 어트리뷰트를 변경하는 자바스크립트 코드에 브렉포인트를 잡아준다.
• Node Removal: 해당노드를 삭제하는 자바스크립트 코드에 브렉포인트를 잡아준다.

아무 웹페이지나 열고 Body 엘리먼트에 Subtree Modifications Dom 브렉포인트를 걸어주면 정신없이 브렉포인트가 잡히는 것을 볼 수 있다.

XHR Breakpoints

Ajax 요청이 발생되는 시점의 자바스크립트 코드에 브렉포인트를 걸어주는 패널이다. "+"를 눌러 API URL의 일부를 입력하면 해당 텍스트가 포함된 URL로 Ajax 요청이 발생하는 코드에 브렉포인트가 잡힌다. 특정 API가 어떤 상황에서 호출되는지 찾아볼 때 유용하게 사용될 수 있다.

Event Listener Breakpoints

DOM과 BOM에서 발생되는 이벤트 리스너에 브렉포인트를 잡아주는 패널이다.

브라우저 상에서 발생하는 모든 이벤트 리스너를 잡아낼 수 있고 타이머 함수에 의해 실행되는 함수의 실행도 잡아낼 수 있다. 크고 복잡해진 웹 어플리케이션에서는 때때로 이벤트 핸들러들이 꼬일 수가 있는데 그런 상황에서 매우 유용하게 사용된다.

Console

콘솔 창은 크롬 개발자 도구에서 아마도 제일 자주 사용되지 않을까 생각한다. 자바스크립트 REPL의 역할도 하면서 브라우저 상의 각종 로그들을 볼 수 있다.

소스코드 찾기(Cmd+Opt+F, Ctrl+Shift+F)

콘솔 창에서 맥은 Command+Option+F 윈도우는 Ctrl+shift+f를 누르면 검색 창이 뜨게 되는데 여기서는 웹페이지의 모든 리소스의 내용을 검색하여 검색 결과를 보여준다.

FIND

터미널의 grep과 비슷하게 로드된 리소스의 내용을 검색해준다. js 파일과 html 그리고 css 파일의 내용을 검색 해주는데 정규식 체크박스를 체크하고 정규식으로도 검색을 할 수 있다. 검색 결과를 클릭하면 해당 코드가 소스 패널에서 열린다.

Preserve Log

콘솔 창의 내용은 웹페이지가 다시 로드되거나 리프레시 되면 모두 사라지고 초기화되는데 콘솔 창의 Preserve Log의 체크박스를 체크해두면 페이지가 다시 로드돼도 콘솔 창의 로그 내용은 그대로 유지되게 된다. 매번 페이지를 리로드 하면서 특정 조건을 달리해 로그를 비교해 볼때 유용하다.

커맨드 라인 API

커맨드 라인 API는 콘솔창이나 자바스크립트 코드 내에서 크롬 개발자 도구와 상호작용하는 API를 제공하고 그 외 추가적인 유용한 API를 제공한다. 이중 몇 가지 유용한 API를 소개한다.

$0, $1, $2, $3, $4, $5

콘솔과 엘리먼트 탭이 상호작용하는 셀렉터이다 $0이 의미하는 것은 엘리먼트 탭에서 마지막으로 선택한 엘리먼트를 가리킨다.

엘리먼트 탭에서 엘리먼트를 선택하게 되면 엘리먼트 태그 옆에 == $0이라고 표시해 주고 있다. 참고 이미지에서는 Body 엘리먼트를 선택했는데 콘솔을 열어 $0을 입력해보면 body 엘리먼트가 표시되는 것을 확인할 수 있다.

마치 해당 노드의 참조 변수를 자동으로 만들어 주는 것과 같아 실제로 자바스크립트의 변수처럼 $0을 사용할 수 있다. $0는 가장 최근 선택한 엘리먼트를 가리키게 되고 $1는 $0보다 이전 $2는 $1 이전에 선택한 엘리먼트를 가리키게 되는데 $5까지 접근할 수 있다.

$(), $$() 함수

$는 제이쿼리를 대표하는 함수 명인데, 웹페이지에서 제이쿼리를 사용하고 있지 않더라도 커맨드 라인 API의 $함수가 비슷한 기능을 제공해준다. 물론 제이쿼리의 기능을 모두 지원하는 것은 아니고 엘리먼트를 탐색하는 기능만 지원한다. $는 엘리먼트 하나를 찾아주고 $$는 조건에 해당하는 엘리먼트를 모드 찾아준다. 이미 눈치챈 사람이 있을지 모르겠지만 querySelector와 querySelectorAll 함수의 숏컷이라고 생각하면 된다.

copy() 함수

copy 함수는 특정 내용을 클립보드에 복사해주는 기능을 한다. 엘리먼트에 해당하는 내용을 넘기면 outerHTML의 내용이 클립보드에 복사되어 어딘가에 붙여 넣을 수 있고,객체를 넘기면 해당 객체의 내용을 클립보드에 복사 하게 된다. 물론 문자열이나 숫자를 넘겨 클립보드에 복사 할 수도 있다.

참고 이미지의 예제는 일반 객체를 카피함수에 넘겨 실행한뒤 곧바로 붙여넣기(C-v)해봤다.

inspect() 함수

inspect() 함수는 $0의 반대 기능을 한다고 생각하면 이해가 쉽다. 엘리먼트 탭에서 특정 노드가 선택되도록 콘솔에서 명령을 내릴 수 있다.

마무리

이외에도 크롬 개발자 도구에는 정말 많은 기능이 있고 계속 추가되고 있다. 한발 먼저 새로운 크롬 개발자 도구를 사용하고자 한다면 크롬 카나리 버전을 사용해 보는 것도 좋을 것이다. 조금 더 자세한 내용이나 더 많은 정보는 크롬 웹사이트 를 참고 하기 바란다.