Chrome 크롬 개발자 도구 활용팁

다음 과정의 일부 내용

    >> Tacademy > "Javascript 디버깅 및 테스트 방법" 과정 > [2강] 크롬 개발자 도구를 이용한 디버깅

 

 

 

Console > Console settings > Preserve log

화면을 이동하거나 새로고침시 로그가 사라지지 않게 해준다

 

 

Console > Console settings > Group similar

유사한 로그는 그룹핑하여 보여준다

 

 

Sources > Event Listener Breakpoints > Control

특정 이벤트에 대한 breakpoint 가 가능하다

가령 서버로 데이터를 전송하는 모든 submit 동작에 대한 break

 

 

Sources > Pause on exceptions 버튼

웹페이지에서 exception이 발생하면 console에 에러를 출력하기만 하지 않고 해당 exception이 발생한 라인에서 break가 걸리게 해준다

버튼은 개발자도구 탭메뉴 바로 아래 라인 영역의 우측끝에 위치해 있다

 

 

선택적 break

source 라인에서 마우스 우클릭하고 add conditional breakpoint 를 선택하면 된다

 

 

Console > Settings > Blackboxing

compressed하여 one line으로 작성된 소스코드에서 내가 보고싶은 코드에서만 break하고 싶다면

skip하고 싶은 code들의 패턴을 넣어서 원하는 위치전까지의 코드들은 skip하게 할 수 있다