[F12] 크롬 개발자도구

 

어느 개발자도구나 비슷하지만 대부분 크롬 개발자도구를 사용합니다. 

인터넷창에서 F12 를 누르면 개발자도구가 열립니다.

 

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

 

 

원하는 코드 위치찾기

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

 

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

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

 

이렇게 원하는 부분을 찾을 수도 있지만  주로 console창을 이용하기 위해 개발자도구를 사용합니다.

1. alert();
2. console.log();
3. script란에서 debugger실행
4. 그 외 몇가지 팁

주로 이 세가지 용도로 사용하고 있습니다.

---

1. alert();

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

---

2. console.log();

인터넷창에 있는 자바스크립트 실행란이라고 볼 수 있습니다.

개발자 도구의 Source 탭 부분에 id="ibx_test1" 은 var로 선언되어 있지만 ibx_test2는 가져오지 않았습니다.

하지만 console에서 선언한 후 console.log()로 적어 메세지로 확인 할 수 있습니다.

그 외에도 간단한 코드들을 콘솔에서 적어 확인할 수 있습니다.

---

3. script란에서 debugger실행

생각보다 script에서 data 처리가 많이 일어나 코드가 복잡한 경우가 많습니다.

이 때 이클립스같은 에디터에서 script 원하는 부분에 debugger; 를 적으면 스크립트에서도 디버깅이 가능합니다.

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

스크립트가 예상한대로 코드가 흘러가지 않을 때 디버깅을 통해 한줄 씩 실행해봅니다.
이 때 console창을 같이 활용하면 더 좋구요
참고로 sourcetab에서 console창이 안 보일 때는 ESC를 누르면 됩니다.

---

4. 그 외 몇가지 팁

console에 적었던 내용을 다시 적고싶다면 방향키를 눌러보세요. 전에 적었던 내용이 보입니다.

console창을 비우고 다시 비우고 싶다면 console 메시지부분을 우클릭하면 창을 비우거나 기록을 지울 수 있습니다.