JavaScript 기초 2. 실행과 개발자도구

seul_velog·2021년 11월 27일

JavaScript debugging

JavaScript

목록 보기

2/25

📍 1. JS 실행 & 개발자 도구(콘솔과 디버깅)

1-1. JavaScript 실행하기

1) 웹 페이지에서 자바스크립트 작성
: 윈도우는 메모장, 맥은 텍스트에디트를 사용하여 만든다.

2) 개발자 도구 사용하기
: 크롬, 맥에서의 개발자 도구창은 command ⌘ + option ⌥ + I 키를 눌러서 열 수 있다.
command ⌘ + option ⌥ + J : 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.

3) 에디터 사용하기
( 나는 마이크로소프트사의 '비주얼 스튜디오 코드(VSCode)' 를 사용하고 있다.😀 )

1-2. 콘솔(Console)

❗️ 개발자 도구

: 개발자 도구는 브라우저에 기본 내장되어 있으며 웹 개발에 유용한 다양한 기능을 제공한다.
패널에는 Elements , Console , Sources , Network , Application 등이 있다.

console (콘솔 패널)
- 로딩된 웹 페이지의 에러를 확인하거나, 자바스크립트 소스코드에 포함시킨 console.log 메소드의 결과를 확인해 볼 수 있다.
- JS 에러 발생시 가장 우선적으로 확인해야 할 공간이며 열어두고 작업하거나 자주 확인해 보는 것이 좋다.
- 구현 단계에서 디버깅을 실행하기 보다 간편하게 값을 확인하기 위해 사용하는 경우도 많다. (console.log)
명령어 등은 MDN 사이트에 정리되어 있다.

ex.)
console.log(document);	메시지를 표시한다.

1-3. 디버깅(Debugging)

디버깅 또는 디버그(debug)는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정이다.
자바스크립트 디버그와 관련해서 GCD 사이트에 정리되어진 내용을 참고해도 좋을 것 같다.

+) Sources패널의 특징 ( reference: Chrome으로 디버깅하기 )

소스 패널 영역 ▼

1. 파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다.
2. 코드 에디터 영역 – 리소스 영역에서 선택한 파일의 소스 코드를 보여준다. 소스 코드 편집도 된다.
3. 자바스크립트 디버깅 영역 – 디버깅에 관련된 기능을 제공한다.

브레이크 포인트(중단점) 이 작동된 실행창 ▼

1. Watch – 표현식을 평가하고 결과를 보여준다.
2. Call Stack – 코드를 해당 브레이크 포인트(중단점)으로 안내한 실행 경로를 역순으로 표시한다.
3. Scope – 현재 정의된 모든 변수를 출력한다.

실행 아이콘 설명 ▼

1. Resume F8
: 스크립트 실행을 다시 시작한다.

2. Step over F10
: 다음단계 명령을 실행한다. (함수 안으로 들어가지는 않는다.)

3. Step into F11
: 함수 내부로 들어간다.

4. Step out Shift + F11
: 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속한다.

5. Step F9
: 다음 명령어를 실행한다. Step버튼을 계속 누르면 스크립트 전체를 문 단위로 하나하나 실행할 수 있다.

6. 모든 중단점을 활성화 / 비활성화 한다. (실행에는 영향을 주지 않는다.)

7. 예외 발생 시 코드를 자동 중지시켜주는 기능을 활성화 / 비활성화 한다.

❗️✍️ 브레이크 포인트(중단점)을 작동시켜보자. ▼

ex) HTML, JS ▼
<!DOCTYPE html>
<html lang="ko">
<head>
    <script type="text/javascript">
        function my(){
            return 'My_name_';
        }
        function is(){
            return 'is_Seul';
        }
        function n(){
            var a = my();
            var b = is();
         document.getElementById('message').setAttribute('value', a+b);
        }
    </script>
</head>
<body>
    <input type="text" value="" id="message">
    <input type="button" value="my name" onclick="n()">
</body>
</html>
result ▼

❗️ 디버깅할 지점을 지정한다.(중단점=브레이크포인트 지정)
이를 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있을 뿐만 아니라 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있다.🧐 ▼
실행이 되다가 브레이크포인트에서 멈췄다! (12라인까지만 실행이 되고, 멈춘다.) 이것으로 한줄 한줄 혹은 원하는 부근까지 실행을 시키면서 코드가 정상적으로 작동되는지 확인해 볼 수 있다. ▼
❓❓🧐 에러가 발생했을 때 어떻게 표시되는지 궁금해서 코드를 바꿔 보았다. ▼
( 버튼을 클릭하니까 바로 에러가 발생하여 작동되지 못한 것을 알 수 있었다.)

좌측 하단에 에러 정보가 뜨고, 우측 상단과 하단에 에러 발생 알림과 위치가 뜬다 !! ▼