크롬으로 디버깅 하기

1.   소스에서 F12 눌러서 창 누르면 디버깅 창이뜸

 

2. 하단 그림에 표기된 버튼을 누르면 디버깅 창을 팝업으로 띄워서 디버깅 할 수 있음.

3. 소스탭을 열면 

원하는 포인트에 디버깅 브레이크 포인트를 잡아서 데이터를 볼수 있고

 

4. 디버깅중 원하는 데이터를 Console 에 입력하면 해당 변수가 출력하는 결과물을 확인 할 수있다.

 

5. 디버깅을 진행할때

 

• 디버깅 한단계씩 돌리는 단축키  : (눈모양) 클릭, F10
• 디버깅 다음 브레이크 포인트까지 돌리는 단축키: (화살표 모양)  클릭, F8

 

+ 간혹 디버깅하다가 소스가 안나올때가 있는데

로그인 이 풀렷다거나 하는 경우에  에러난 fail을 눌러 처리한다음

다시 열면 소스가 다시 보이는것을 확인 할 수있다.

 

+ 각 탭별별 간단한 설명

elements	html , css 분석 및 수정 요소를 실시간으로 수정 할 수 있음. style 에서 css 속성을 실시간으로 수정 해볼 수있음 단 저장 안됨. event listeners 에서 해당  태그에서 생성되는 event 를 확인 할 수있다. (Ancestort 체크후 framework listeners 체크의 경우)
console	자바스크립트/제이쿼리 등 코드 실행 및 결과 확인 다른 탭에서도 ESC키를 누르면 콘솔창이 나옴 console.log();를 찍으면 나오는곳이 여기
source	디버깅  현재 페이지에 로드된 모든 파일의 도메일을 볼 수 있음 코드가 한줄로  minify 되어 나올경우 { } 를 눌러 편하게 볼 수 있음
network	통신상태 모니터링 빨간색 버튼 클릭후 리로드 하면  확인 가능 오른쪽 마우스 클릭해서 method 등 다양한 기능 추가 가능 하다
performance	성능 튜닝 느려 질때 성능 테스트 할 수있음 빨간색 버튼을 누르고 기능 실행(클릭) -> stop 을 누르면 분석정보가 뜸 빨간색 구간은 심각하게 느린구간 드래그해서 해당구간을 선택 할 수있고 하단에 상세 정보 를 확인하고 summery 등에서 해당소스로 이동도 가능하다