read Show
자바스크립트 디버깅 어떻게 하시나요? 과거의 저를 포함하여 많은 웹 프론트엔드 개발자들이 소스 사이사이에 척박한 개발환경에서 등장한 Firefox의 Firebug 플러그인은 엄청나게 인기를 끌었고 후에 등장하는 브라우저의 개발자 도구에 많은 영향을 끼쳤습니다. 최근에는 크롬, 파이어폭스, 사파리, IE 등 대부분 브라우저에서 강력한 개발자 도구를 기본으로 제공하고 있습니다. 웹 브라우저에 내장된 개발자 도구는 웹이라는 특성에 맞게 로그나 라인 중단점Breakpoint을 이용한 디버깅뿐 아니라 이 글에선 디버깅이란 무엇인지 간단하게 살펴보고 크롬 개발자 도구의 실용적이고 강력한 기능을 3가지 예제와 함께 소개합니다. 그리고 Visual Studio Code(VSCode)와 크롬 브라우저를 연동하는 방법도 알아보겠습니다. 디버깅이란버그란 프로그램 내의 결함이나 문제점을 이야기하는 것으로 프로그래밍 언어 COBOL의 개발을 주도한 그레이스 호퍼가 1945년 Mark II의 오작동 원인을 찾다가 컴퓨터에 나방이 껴있는 걸 발견한 것을 최초의 버그라고 기록하고 있습니다. 버그를 해결하는 것을 디버깅debugging이라고 하고 주요 전략으로 인터렉티브 디버깅, 컨트롤 분석, 유닛 테스트, 통합 테스트, 로그 파일 분석, 모니터링, 메모리 덤프, 프로파일링등이 있습니다.
여기선 인터렉티브 디버깅 전략에 대해 알아봅니다. 디버깅을 하기 위해서는 도구가 필요한데 특정 기기/프로그램의 경우 특별한 하드웨어가 필요한 때도 있지만, 웹 어플리케이션은 크롬 개발자 도구와 같이 브라우저에 내장된 무료 소프트웨어를 사용하면 됩니다. 크롬 개발자 도구는 크롬 브라우저에 내장된 개발 관련 도구입니다. 웹 어플리케이션을 개발하고 수정/최적화하는데 필요한 다양한 기능을 제공합니다. 자바스크립트 디버깅뿐 아니라 모바일 기기 시뮬레이터, 네트워크 분석, 최적화에 대해 검사도 해줍니다. 전체 기능은 공식 홈페이지에서 확인하세요. 개발자 도구 열기개발자 도구를 여는 방법은 여러 가지가 있습니다. 단축키를 외우는 걸 추천합니다.
주요 패널 소개디버깅할 때 자주 사용하는 Element 주로 디자인을 수정하는 용도로 사용하는 패널입니다. DOM을 확인하고 CSS style을 수정합니다. 특정 DOM의 변화에 중단점을 걸 수 있는 기능이 숨겨져 있습니다. Console 로그를 확인하고 스크립트 명령어를 입력하는 패널입니다. 중단점을 건 시점의 변수를 확인할 수 있고 값을 평가하거나 수정할 수 있습니다. Sources 자바스크립트 디버깅의 가장 핵심적인 영역입니다. 왼쪽에 파일 관리창과 가운데 소스 에디터, 오른쪽에 디버깅관련 정보창이 있습니다. 창의 크기에 따라 화면 레이아웃이 적절하게 바뀌고 토글 버튼을 누르면 세부창을 열었다 닫았다 할 수 있습니다. 디버깅 정보창 위에 중단점 컨트롤을 이용하여 한땀한땀 코드를 디버깅합니다. 본격 자바스크립트 디버깅예제 소스는 총 3가지 프로젝트(디렉토리)로 구성되어 있고 https://github.com/subicura/javascript-debugging-example 에서 다운로드 할 수 있습니다. 좋아요 클릭좀 Node.js 8.x를 설치하고 소스를 다운로드 후
Basic Example아무런 라이브러리를 사용하지 않고 순수 자바스크립트로 작성한 매우 간단한 웹 어플리케이션입니다. 버그를 찾고 한땀한땀 디버깅하는 일련의 흐름을 살펴봅니다. 1. 버그 찾기 웹서버를 실행하고 크롬 브라우저로 내용이 위에 나오고 이름이 밑에 나오는 걸 기대했는데 결과를 보니 이름과 내용이 반대로 출력되었습니다. 이 버그를 수정해보겠습니다. 2. 중단점 걸기 코드를 실행하는 도중에 일시 정지하고 해당 시점의 변수값을 확인하기 위해 중단점을 걸어보겠습니다. 소스가 익숙하고 어떤 함수가 문제인지 안다면 바로 해당 라인에 중단점을 걸 수 있지만 여기서는 소스가 복잡해서 어디에 중단점을 걸어야 할지 모른다고 가정하고 다른 방식으로 접근해보겠습니다. 개발자 도구는 특정 라인이 아닌 글로벌한 이벤트에 대해 중단점을 만들 수 있는데 이름과 내용을 입력하고 폼 전송을 하는 순간을 체크하기 위해
이벤트 중단점을 체크했으면 다시 화면으로 돌아와서 이름과 내용을 입력하고
3. 단계별(step) 코드 실행 코드를 한줄 한줄 단계별로 실행하면서 스크립트가 어떻게 실행되는지, 변수가 어떻게 저장되어 있는지 확인해 보겠습니다. 디버깅 정보창 위에 디버깅 정보창의 Scope 섹션과 소스의 변수명 근처에서 현재 시점의 변수값을 확인할 수 있습니다. updatePost함수를 한 줄씩 실행해보니 postHtml에 이름과 메시지가 반대로 들어간 것을 알 수
있습니다. 4. 콘솔창에서 테스트하기 콘솔탭을 선택하고
위에 내용이 나오고 밑에 이름이 나오네요. 이름과 내용이 정상적으로 바뀌어서 출력되었습니다! 5. 소스 수정하기 Sources창의 에디터에서 코드를 수정합니다. 짜잔! 버그를 고쳤습니다. 이제 문제없이 동작하네요! 풀리퀘고고
크롬 개발자 도구의 워크플레이스workspace기능을 사용하면 수정한 내용을 로컬 소스에 바로 반영할 수 있습니다. 개발자 도구의 에디터도 문법 하이라이팅Syntax Highlighting을 지원하고 자동완성 기능Auto Completion을 제공하지만, 아직 다른 전용 에디터보다는 기능이 부족합니다. 따라서 뒤에 설명할 VSCode와 연동해서 사용하는 걸 추천하지만 간단하게 워크플레이스 기능을 살펴보겠습니다. 6. Workspace 사용하기 Workspace는 개발 중인 소스 파일을 개발자 도구에 등록하고 브라우저에서 바라보는 네트워크 상의 파일을 연결하여 수정을 편하게 해주는 기능입니다. 예를 들면, Workspace에 폴더를 등록하기 위해 개발자 도구의 Sources탭을 선택합니다. 그리고 왼쪽 파일 네비게이션 창에서 Filesystem 탭을 누르고 단지 폴더만 추가했을 뿐인데 개발자 도구가 똘똘하게 이제 개발자 도구 에디터에서 소스를 수정하면 로컬 개발환경의 소스 파일도 수정됩니다. 새로고침해도 문제없네요! jQuery ExampleBasic 예제에서 자바스크립트 디버깅의 가장 기본적인 작업 흐름을 살펴보았습니다. 이번에는 좀더 현실적으로 jQuery라이브러리를 사용한 웹 어플리케이션을 다양한 방법으로 디버깅해보겠습니다. 웹서버를 실행하고 크롬 브라우저로 Blackboxing Basic 예제에서는 라이브러리를 사용하지 않았기 때문에 submit 이벤트를 검사할 때 정상적으로 소스에 중단점이 걸린 것을 확인했습니다. jQuery같은 라이브러리를 쓰면 상황이 좀 달라지는데 테스트를 위해 Event Listener중에 예상대로(?) jquery 파일에 중단점이 걸렸습니다. minified되어 알아볼 수 없는 코드가
보이고 Scope의 변수 또한 아무 의미가 없어 보입니다. minified된 코드를 좀 더 이쁘게 바꿔보겠습니다. 에디터 왼쪽 하단에 뭔가 한 줄로 복잡했던 소스가 좀 이뻐지긴 했지만.. 큰 도움이 되지 않습니다. 역시 디버깅은 console.log 밖에 없을까요? 안돼 개발자 도구에선 이렇게 무의미한 파일을 제외하기 위해 개발자 도구의 설정을 누르고 왼쪽 메뉴에서 Blackboxing을 선택한 다음 Add pattern..을 클릭하여 새로고침을 하고 다시 클릭해 보겠습니다. jquery파일이 제외되어 Fetch Breakpoint 이번에는 click 이벤트가 아닌 디버깅 정보 창에서 Column Breakpoint fetch함수를 자세히 보면 한 줄로 길게 연결(chain)되어 있는걸 알 수 있습니다. 어떤 응답 데이터가 오는지 궁금한데… 한 줄 내 중간중간열에 중단점을 생성할 수도 있을까요? 일단 디버깅할 라인에 중단점을 체크하면 연결된 함수에 다시 중단점을 걸 수 있습니다.
DOM change Breakpoint 마지막으로 DOM이 변경되었을 때 중단점을 생성해보겠습니다. 지금 보는 웹 어플리케이션은 Github의 사용자 정보를 조회하여
DOM 왼쪽에 동그라미 표시가 된 게 보이시죠? 이제 다시 테스트를 해보겠습니다. 데이터를 요청하고 화면에 그리는 순간 중단점에 걸립니다. 이제 에디터 전체검색창에 DOM ID를 입력하고 검색결과의 홍수 속에서 원하는 소스를 일일이 찾아보지 않아도 됩니다. React Example마지막 예제는 webpack을 이용하여 소스를 번들링한 최신 트랜드를 반영한 예제입니다. 이전까지 예제는 소스 파일과 브라우저에서 보이는 소스 파일이 정확하게 일치했지만 webpack을 사용하면 소스 파일을 bundle.js라는 하나의 파일로 묶기 때문에 소스가 일치하지 않습니다. 이런 경우에도 디버깅이 가능할까요? 브라우저에서
source map
이 파일을 소스맵은 합쳐지거나 minified된 파일과 원본 파일을 연결하기 위해 어떤 소스의 몇번째 줄 몇번째 열이 어떤 소스의 몇번째 줄 몇번째 열과 일치하는지 알려주는 역할을 합니다. 너와 나의 연결고리 React와 관련된 파일은 엄청나게 많기 때문에 소스맵파일도 엄청나게 클 수밖에 없습니다.
webpack은 소스맵을 생성할 수 있는
옵션( Conditional Breakpoint Redux에서 reducer는 다양한 action을 처리하는 곳 입니다. 추가/수정/삭제에 대한 action이 들어올 수 있는데 삭제 action만 중단점을 생성해보겠습니다. 조금 전 생성한 중단점에 오른쪽 버튼을 누르면 중단점을 수정할 수 있고 조건절에 Store as Global Variable 마지막으로 특정 React Component에 존재하는 멤버(지역) 변수를 콘솔창에서 자유롭게 테스트하는 방법을 알아봅니다. 자바스크립트가 모듈화 되면서 콘솔에서 내부에 존재하는 변수에 접근하기 어려워졌지만 다 방법이 있습니다. 개발자 도구에서 콘솔창을 보면 정상적으로 새로운 할 일이 추가되었습니다. 이제 콘솔에서 자유롭게 테스트하세요! Visual Studio Code지금까지 개발자 도구의 다양한 디버깅 기능을 살펴보았습니다. 내장된 에디터도 간단하게 사용하기엔 좋지만, 아직 기능이 많이 부족해 보입니다. 코드 작성은 VSCode에서, 중단점 및 테스트는 크롬 브라우저에서 테스트할 수 있게 설정해보겠습니다. VSCode를 실행하고 다운받은 소스 디렉토리를 엽니다. chrome 확장기능 소개크롬 브라우저와 연동하려면 설치가 완료되면 디버그 포트를 오픈한 크롬을 실행할 수 있게
VSCode Debugger설정 파일을 저장하면 디버깅 모드의 실행 목록에 자동으로 추가됩니다. 플레이 버튼처럼 생긴 내용을 입력하면 크롬 브라우저와 VSCode 동시에 중단점이 걸리는 걸 볼 수 있습니다. 개발자 도구처럼 한줄한줄 실행할 수도 있고 콘솔을 사용할 수도 있습니다. 개발자 도구와 VSCode가 동기화돼서 움직이기 때문에 개발자 도구에 중단점을 생성해도 VSCode에서 확인할 수 있습니다. 이제 VSCode를 사용하면서 크롬 개발자 도구의 강력한 부가 기능도 같이 사용할 수 있습니다. 그래서자바스크립트 디버깅에 대한 자료를 찾아보면서 이렇게 개발자 도구가 좋아졌나 하고 많이 놀랐습니다. 크롬 브라우저는 6주에 한 번씩 새로운 버전을 릴리즈하는데 매번 새로운 기능을 추가하고 있습니다. 공식 Youtube 채널에서 새 릴리즈에 대한 내용을 짧게 요약해주니 관심 있으면 구독하는 걸 추천합니다. Visual Studio Code 또한 굉장히 빠르게 업데이트되고 있습니다.(매달 릴리즈) Node.js와의 궁합도 좋아 서버를 node로 작성한 경우 서버와 클라이언트를 동시에 스무스하게 디버깅하고 작업할 수 있습니다. 특히 터치바가 장착된 맥북 프로를 사용한다면 디버깅 모드에서 컨트롤이 이쁘게 터치바에 표시되는 걸 볼 수 있습니다.
개발자 상시 모집중입니다. 연락주세요 ㅎㅎ (http://www.purpleworks.co.kr/recruit) Chrome Devtools javascript debug node |