크롬개발자도구 (1) 썸네일형 리스트형 20. chrome 개발자 도구 디버깅 방법 꼭 사용해야 하는 건 아니지만, chrome 개발자 도구를 잘 알아두면 디버깅에 많은 도움이 된다.‘Sources’ 패널Chrome을 사용해 페이지를 연다.F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 연다.Sources 탭을 클릭 패널(panel)을 연다.Open file을 클릭 해당하는 파일을 클릭한다.토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열된다.파일 목록에서 디버깅 하려는 js 파일을 클릭Sources 패널은 크게 세 개의 영역으로 구성된다.파일 탐색 영역 – 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여준다.Chrome 익스텐션도 여기에 표시된다 코드 에디터 영역 – .. 이전 1 다음
