Chrome - DevTools (크롬 개발자 도구 사용하기)

 

크롬 개발자 도구란? (Chrome DevTools)

• 크롬 브라우저에 직접 내장된 웹 개발자 도구
• 페이지를 즉석에서 편집하고 문제를 신속하게 진단
• 웹 사이트 구축 소요시간 단축에 용이
  • 웹 사이트 개발과 디버깅에 매우 유용하다!!!

---

개발자 도구 열기

방법1. 마우스 이용

• 페이지 내에서 우클릭 - 검사

---

 

방법2. 단축키 이용 (2가지)

• 첫번째 단축키 : Ctrl + Shift + C

 

• 두번째 단축키 : F12

 

 

• 개발자 도구 실행 화면

---

요소 활용하기 (Elements)

페이지 내의 특정 요소 지정하기

• 개발자 도구 좌측 상단의 첫번째 버튼을 누르면 특정 요소를 지정 할 수 있음
  (buttom name : Select an element in the page to inspect it) 
  • 지정된 요소는 정의된 값을 확인 할 수 있음
  • 예시) 테이블의 1행 1열의 속성 값 확인

---

페이지 전체의 요소 파악하기

• 메뉴 탭의 'Elements' 클릭하면 해당 페이지의 html 문서를 확인 할 수 있음

 

• html 문서의 원하는 라인에 마우스를 올려두면 해당 요소의 값과 레이아웃 확인 가능

---

요소를 통한 개발&디버깅

• 수정을 원하는 태그의 속성을 변경하면 페이지에 즉각 반영
  • 개발 툴 혹은 에디터로 수정, 저장의 번거로움 없이 개발자 도구를 이용하면 매우 편리함
  • 물론 미리보기의 형태로, 실제 적용은 해당 파일을 직접 수정해야 함 
    • 예시) 테이블의 테두리를 1에서 10으로 변경
      • 페이지에서는 즉각 반영되었지만, 실제 파일에는 영향을 받지 않음 (= 개발/디버깅 유용)

---

콘솔 활용하기 (Console)

로그 확인하기

• 개발 툴이나 에디터가 아닌 개발자 도구에서도 로그 확인 가능
  • 예시) 합을 구하는 함수의 결과 값을 로그에 출력

<!-- javascript -->
<script>
	function hap(a, b) { console.log("Log : a+b=" + (a+b) ); }
</script>

<!-- html -->
<input type="button" onclick="hap(1,2)" value="1+2=?">

---

데이터 확인하기

• 메소드를 통한 반환 값을 콘솔로 확인 가능
• 메소드의 필요한 매개 변수(파라미터)를 직접 조정 할 수 있음
  • 예시) 합을 구하는 함수의 매개 변수를 설정하여 결과 값을 로그에 출력

<!-- javascript -->
<script>
	function hapValueReturn(a, b) { return a+b; }
</script>

<!-- html의 내용은 없음 -->

---

에러 확인하기

• 개발 툴 혹은 에디터와 같이 에러 구문 확인 가능
• 에러를 확인하고 에러에 대한 값을 변경하는 등을 통해 디버깅을 진행 할 수 있음
  • 예시) 구문 오류(SyntaxError)를 일부러 발생시켜서 오류 확인해보기
    • 매개 변수 a를 일부러 변수 a로 중복 선언

<!-- javascript -->
<script>
	function hapValueReturn(a, b) {
    	let a=1;
    	return a+b;
    }
</script>

<!-- html의 내용은 없음 -->

---

소스 활용하기 (Sources)

리소스 파일 확인하기

• 해당 페이지에 관련된 파일들을 확인 할 수 있음
• html문서 뿐만 아닌 사용된 리소스 파일들까지도 확인 가능
  • 스타일시트(css), 자바스크립트(js), 이미지(jpg,png) 등등
• 작성된 페이지의 디렉토리 구조까지도 확인 가능
• 예시) 자바스크립트 문서와 이미지를 연결하여 html 문서 작성해보기
  • 자바스크립트 : 페이지 내 메시지 출력 (Test Message)
  • 이미지 : 페이지 내에 보여질 그림 (꼬부기)

/* javascript : test.js */
document.write("Test Message");

<!-- html : test.html -->

<!-- Call script file -->
<script src="test.js"></script>

<!-- Insert image file -->
<p>
<img src="test_img.png">

---

중지점(중단점, Breakpoint) 설정하기

• 중지점(breakpoint)을 이용하여 단위 테스트 디버깅
  • 중지점(중단점, breakpoint) : 의도적으로 멈추게 하는 장소를 가리키며 디버깅 목적으로 사용
• 예시) 의도적으로 alert 대화상자 출력 명령을 중지점으로 중단하기
  • alert 코드가 있는 부분에 중지점을 추가하면 해당 코드 실행 부분에서 중단 됨

<!-- html -->
<script>
function say_hello() {
	alert("Hello!");
}
</script>

<input type="button" onclick="say_hello()" value="hello">

 

• 중지점으로 인하여 alert 대화상자는 출력되지 않음

 

• 중지점 이 후 스크립트를 재시작 할 수 있음
  • 화면의 파란색 재개 버튼을 누르거나 단축키(F8, F10, F11)로 이 후 스크립트를 재실행
  • 중지점 이 후의 스크립트를 재시작하여 alert 대화상자 출력

---

부분 디버깅하기 (Unit Test)

• 중지점(breakpoint)으로 단위를 나누어 테스트를 할 수 있음
• 단위를 나누면 문제가 되는 부분을 좀 더 쉽게 파악 가능
• 부분 디버깅 방법
  • Step over next function call (단축키 F10)
    • 현재 실행해야 할 함수 전부를 실행
  • Step into next function call (단축키 F11)
    • 현재 실행해야 할 함수의 부분을 실행

---

예시) 디버깅 종류(단축키 F10, F11) 파악하기

html 파일 정의

<!-- html -->
<!-- 프로그램 실행 흐름 -->
<!-- 1. 버튼 클릭시 click_method 호출 -->
<!-- 2. click_method에서 1과 2의 값을 매개변수로 hap 호출 -->
<!-- 3. hap에서 전달받은 매개변수의 합을 alert 대화상자로 출력 -->

<script>
function click_method() {
   let a = 1;
   let b = 2;
   hap(a, b)
}

function hap(x, y) {
   alert( (x+y) );
}
</script>

<input type="button" onclick="click_method()" value="1+2=?">

---

예시 코드의 실행 순서

• 1. 버튼 클릭시 click_method 호출
• 2. click_method에서 1과 2의 값을 매개변수로 hap 호출
• 3. hap에서 전달받은 매개변수의 합을 alert 대화상자로 출력

---

중지점(breakpoint) 추가

• 함수 안의 함수가 호출되는 부분에 중지점 추가 후 디버깅
• 스크립트 실행 후 중지점 이후의 코드를 단축키 F10, F11을 이용하여 재시작해보기

 

단축키 F10 : 해당 지점의 함수 실행

• hap함수의 전체 코드 실행, alert 대화상자까지 출력되며 다시 click_method로 돌아옴

 

단축키 F11 : 해당 지점의 함수 부분 실행

• hap 함수에 매개변수 전달, hap 함수로 이동하여 다음 줄의 코드 실행(alert)

 

결론 : 단축키 F10은 블록 단위로 실행되지만, 단축키 F11은 한 줄 단위로 실행된다.

---

네트워크 활용하기 (Network)

응답 속도 확인하기

• 해당 페이지에서 사용자에게 넘어오는 모든 파일에 대한 응답 속도를 확인 할 수 있음
  • 이를 활용하여 API의 응답 속도도 어느정도 유추 가능
• 개발시에 특정 부분에서 느려지는 것 같다 싶을 때 네트워크를 활용하면 도움이 될 수 있음
  • 예시) 두 개의 페이지를 만들고, 페이지 이동시 새로운 페이지에 이미지 출력

/* javascript : test.js */
function movePage() {
	location.href="testOtherPage.html";
}

<!-- html : test.html -->

<!-- Call script file -->
<script src="test.js"></script>

<!-- Call move page(link) -->
<p>
<a href="javascript:movePage()"> 다음 페이지로 이동하기 </a>

<!-- html : testOtherPage.html -->
<img src="test_img.png">

 

• 첫번째 페이지 로딩
  • test.html 파일과 test.js 파일 응답

 

• 링크를 클릭하여 다음 페이지 로딩
  • testOtherPage.html 파일과 test_img.png 파일 응답

 

• 파일을 클릭하면 더욱 디테일하게 응답 시간을 확인 할 수 있음