[F12] 크롬 개발자도구

 

어느 개발자도구나 비슷하지만 저는 크롬 개발자도구를 사용합니다. 
인터넷창에서 F12 를 누르면 개발자도구가 열립니다.

 

 

X의 옆 점 3개를 클릭하면 개발자도구 창 위치를 변경 또는 현재창과 분리할 수 있습니다.

 

---

먼저 Console탭 활용 알아보겠습니다.

 

 

원하는 코드 위치찾기

 

현재 창에서 검색란이 코드 어디에 위치하는 지 보고싶다면 이 버튼을 클릭합니다.

 

검색하고 싶은 부분을 클릭합니다.

 

그러면 Elements 탭에서 검색란이 어느 코드에 위치해 있는 지 알 수 있습니다.

 

---

 

alert();

 

경고창입니다. 로그인할 때 '비밀번호가 잘못되었습니다.' 같은 창이 뜰 때 많이들 볼 수 있죠.
console에 alert("보고싶은 내용"); 을 적으면 바로 띄워볼 수 있습니다.
❗ 하지만 디버깅용으로 비추천...합니다.

 

---

 

console.log();

 

1. 개발자 도구의 Source 탭 부분에 id="ibx_test1" 은 var로 선언되어 있지만 ibx_test2는 가져오지 않았습니다.
   
   
2. 하지만 console에서 선언한 후 console.log()로 적어 메세지로 확인 할 수 있습니다.
   
   
3. 그 외에도 간단한 코드들을 콘솔에서 적어 확인할 수 있습니다.

 

---

debugger;

 

생각보다 script에서 data 처리가 많이 일어나 코드가 복잡한 경우가 많습니다.
이 때 이클립스같은 에디터에서 script 원하는 부분에 debugger; 를 적으면 스크립트에서도 디버깅이 가능합니다.

 

 

이렇게 debugger; 가 적힌 곳부터 실행되구요. 오른쪽 상단에 재생/멈춤 버튼과 다음줄을 실행하는 버튼 존재.

 

스크립트가 예상한대로 코드가 흘러가지 않을 때 디버깅을 통해 한줄 씩 실행해봅니다.
이 때 console창을 같이 활용하면 더 좋구요

※ 참고로 sourcetab에서 console창이 안 보일 때는 ESC를 누르면 됩니다.

 

---

 

그 외 몇가지 팁

 

 

console에 적었던 내용을 다시 적고싶다면 키보드 방향키를 눌러보세요. 전에 적었던 내용이 보입니다.
console창을 비우고 다시 비우고 싶다면 console 메시지부분을 우클릭하면 창을 비우거나 기록을 지울 수 있습니다.

 

---

 

이 부분은 유튜브에서 아래 영상을 보고 정리해봤습니다.
Network와 Source 탭을 활용한 내용입니다.
https://youtu.be/C4poqiG8ulM?si=_fn4trMjb76R-L9-

 

Network

 

• 회원 찾기 화면을 열었을 때 화면입니다.

  

  
  

  

•  호출된 내용들이 네트워크에서 보입니다.
  • findOne
    
    
  • jquery
    
    
    
• 상태 status
  • 2XX → 정상작동
    
    
  • 4XX → 에러
    
    
    
• 검색을 해보았습니다.
  이름을 클릭하면 아래와 같은 내용들이 보입니다.
  

  

  
  
  • 헤더 Header
    → 내가 호출한 url에 대한 정보.
    
    
  • 페이로드 Payload
    → url에 어떤 쿼리 값을 넣었는 지 확인 가능.
    

    

  • 응답 Response
    → 전달받은 데이터.

    

    
    
  • 미리보기 Preview
    → 전달받은 데이터를 좀 더 보기 쉽게 보여줍니다.
    

    

    
    

---

 

Source

 

 

• 소스 source탭을 클릭하면 해당 view단 모든 코드가 보입니다.
  

  

• 디버깅하고 싶은 부분을 클릭하면 Break point 이런 파란 줄이 생깁니다.
  

  

• 검색 또는 새로고침 시 자동으로 디버거가 실행되니다.
  

  

• 범위 Scope
  → 디버깅하면서 데이터들을 확인할 수 있습니다.
  

  

• Break point를 꺼두고싶으면 체크박스를 해제하면됩니다.