크롬을 활용한 프론트엔드 디버깅

크롬 개발자 도구

• 브라우저가 대부분의 과정을 투명하게 개발자가 분석 가능한 수준으로 공개되어있다.
  → 개발자가 개발중 발생하는 문제의 원인을 더 빨리 찾을 수 있다.
• HTTP 통신과정, HTML 구조, CSS 스타일, JAVA Script 디버깅, 프로파일링, 성능진단 가능

---

구성

1. Elements

   HTML과 CSS가 잘 렌더링되었는지 확인할 때
   기능 테스트
   속성 변경

2. Network

   서버와 클라이언트간 데이터를 제대로 송수신 했는지 확인

3. Source

   소스 디버깅

4. Timeline

   어느 시간동안 일어나는 일을 확인

5. Console

   Break Point를 걸어 코드를 테스트 가능

---

Elements

Elements Tab은 실제 브라우저의 Rendering 결과를 보여준다.
또한 HTML 구조, CSS 속성등을 추가, 삭제, 수정이 가능하다.

실습

웹에서 개발자도구를 열고, Element Tab에서 Inspect Button(왼쪽 상단)을 클릭하여
수정하고자 하는 영역을 선택한다.

---

Console

Java Script 코드를 작성할 수 있다.
Elements 또는 Network 아래에서 Console탭을 활용해 코드를 작성할 수 있다.
→ ESC키로 어디서든!
디버깅 과정에서 유용하게 사용할 수 있다.

• 예시

console.log(1)

>> 1

function myname(){ //Function 정의
    console.log("Park");
}

myname(); //Function 호출
>> Park

var a = 3; //Shift + Enter: Enter를 누르면 실행되기 때문에
b = 3;
>> 3

$ //변수 출력
>>ƒ (a,b){return new n.fn.init(a,b)}

console.time("start");

for(var i=0; i<1000; i++){
    i = i * 1000;
}

console.timeEnd("start");

>>start: 1.38720703125 ms

---

Source

Java Script 실행중에 BreakPoint를 걸어 그 시점의 Scope 내 변수를 확인 가능

[DOM 변경]

• 어떤 동작을 하거나 입력을 할 때, 하이라트되는 부분에 Breakpoint를 건다.
  (마우스 우클릭 -> Break On -> Subtree Modification 또는 Attribute Modification) : 속성을 수정했을 때 Break

[XHR 통신]

• Ajax 통신 -> XHR Breakpoint
  (XHR Breakpoints -> ‘+’ -> 입력없이 Enter -> Any XHR or fetch
  어떤 내용이 추가로 보일 때 서버에서 데이터를 갖고 오면 Break

BreakPoints가 걸리면 watch 또는 console 탭을 통해 그 시점에 변수를 확인하거나 디버깅할 수 있다.

---

Network

HTTP 통신과정을 들여다 볼 수 있다.
브라우저와 서버간에 통신과정에 문제를 확인할 수 있다.
클라이언트 성능 개선 시점을 분석하는데 활용 가능
초단위, ms단위로 확인하면서 어느 시점에 어느 화면이 보이는지 확인 가능
→ 사용자들에게 시각적으로 보여지는 것이 중요한 부분