자바스크립트 작성시 디버깅은 필수 입니다. 일반 어플리케이션 프로그램처럼 크롬에서 자바스크립트 디버깅이 가능합니다. 복잡한 프로그램을 좀더 빠르게 확실하게 작성하기 위해서는 필수겠죠. 크롬 뿐만 아니라 익스플로러도 개발자 도구를 통해 디버깅을 할 수 있습니다.
▼ 크롬에서 개발자 도구를 실행하기 위해서 [도구 더보기] 메뉴로 선택하거나 단축키 F12 를 누르시면 크롬 화면 하단에 창이 나타납니다. 이것을 개발자 도구라고 하는데 처음 보게 되면 아주 복잡해 보입니다.
▼ 개발자 도구에서 디버깅은 Sources 탭 화면에서 이루어 집니다. 다른 탭들은 무시해도 됩니다. 소스 탭에는 현재 웹 페이지를 구현한 모든 소스가 있습니다. 그리고 소스 화면 왼쪽에는 라인 번호가 있죠.
▼ 디버깅을 위해 브레이크포인트를 찍어야 하는데 라인 번호가 있는 부분에 오른 마우스를 누르시면 Add breakpoint 를 볼 수 있습니다. 클릭하시면 라인에 파란색 박스 표시가 됩니다.
※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 Javascript 메모리 관리하기 |
▼ 파란색 표시가 된 부분은 소스를 디버깅하게 되면 멈추게 되는 위치입니다. F5 를 누르게 되면 소스가 진행되다가 해당 위치에서 멈추고 브라우저 상단에 컨트롤이 생깁니다. 상단에 있는 컨트롤을 이용해서 단계별로 소스를 진행하시면 됩니다.
▼ 상단에 있는 Paused in debugger 컨트롤에 두 개의 버튼이 있습니다. 1번은 단계를 한 칸씩 진행할 수 있는 버튼입니다. 2번은 다 지나치고 다음 브레이크 포인트로 이동합니다. 한 단계씩이 아닌 바로 다음 단계로 빠르게 이동하기 위해서 사용합니다.
▼ 디버깅에서 브레이크포인트를 거는 이유는 그 시점에서 변수들에 어떤 값이 들어가 있는지 확인하기 위해서 입니다. 다른 프로그램들과 마찬가지로 변수에 마우스를 가져가면 현재 시점에서의 값을 볼 수 있습니다.
▼ 마우스로 매번 확인하기 귀찮다면 변수를 화면에 등록해 놓고 볼 수도 있습니다. 변수를 선택하고 오른 마우스를 누르시면 [Add to watch] 메뉴를 볼 수 있습니다.
▼ [Add to watch] 를 클릭하시면 오른쪽 Watch 란에 변수가 들어갑니다. 그럼 매번 마우스를 가져가서 확인하지 않아도 디버깅 과정에서 실시간으로 확인이 가능한 것이죠.
※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 Javascript 메모리 관리하기 |
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하기 (0) | 2023.10.11 |
---|---|
자바스크립트 배열 Array 초기화 하는 다양한 방법 (0) | 2023.10.10 |
자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법 (1) | 2023.09.22 |
자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
자바스크립트 구구단 출력하는 방법 (0) | 2019.11.06 |
웹 개발을 위한 아톰 에디터 설치, 사용하는 방법 (0) | 2019.07.13 |
자바스크립트(Javascript) 수학, 난수 계산 Math 객체 4부, Max, Min 함수 (0) | 2019.06.15 |