Chrome debugging 하기 (Javascript)

 

1. 개발자 도구

F12를 누르고 소스패널로 가면,

이런 화면이 나온다

만약 아래와 같은 화면이 나오지 않는다면

소스패널 바로 밑부분에 화살표 아이콘을 눌러보기!

그러면 왼쪽 탭이 뿅하고 등장한다.

디버깅을 설정하고 싶은 줄번호를 클릭하면

설정 완료!

 

소스 패널에서 설정하기가 번거로우면,

코드상에서 디버깅 설정을 해두는 방법도 있다.

 

원하는 위치에

debugger; 명령어를

입력해주면 끄~읕!

 

---

console.log()

>> 원하는 것을 콘솔에 입력할 수 있다.

 

console.log('기본');

console.info('정보');

console.warn('경고');

console.error('에러');

 

console.log는 참조를 로깅하기 때문에,

객체와 같이 내용물이 변할 수 있는 것들은

실시간으로 바뀐다.

 

객체를 로깅할 때는 객체의 내용 변경 사항이

실시간으로 업데이트 된다.

이 문제를 겪지 않으려면 객체를 깊은 복사해서 로깅하거나,

또는 

객체가 아닌 값을 로깅하면 되지만

깊은 복사는 돈이 많이 드니까

객체가 아닌 값을 로깅한다.

 

- 로그

로그는 서비스 동작 상태를 파악하고, 

장애를 파악하며 알람을 위한 목적으로 사용한다.

 

---

alert로 확인해도 되지 않느냐..?

삐~!

alert는 object, 즉 객체의 내용을 출력하지 못한다.

console.log => 콘솔에 로그를 출력하라.

변수에 담긴 값 다 출력!

 

그러나 사용시 주의해야할 점!

개발자도구를 지원하지 않는 IE 하위버전에서는 스크립트 에러가 발생

따라서 console 객체가 있는지를 먼저 확인하고,

존재할 경우 출력하기!

 

if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {

    console.log('콘솔 로그 테스트');
    
    var img = document.getElementById('testimg'); 
    console.log(img);

    var $img = $('#testimg');
    console.log($img);
 
}

---

출처

m.blog.naver.com/PostView.nhn?blogId=artoflight&logNo=220454231172&proxyReferer=https:%2F%2Fwww.google.com%2F

javascript console 활용하기

ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기