[2019.01.22] npm, 크롬 디버깅

NPM (Node Package Module)

• Node Package Module
• 패키지 관리 및 서버관리
• npm start 하면 localhost를 통해 로컬 디렉토리에서 만든 웹페이지에 접속가능

npm install

npm start

크롬 브라우저를 이용해 브레이크 포인트 걸기

경로	코멘트
크롬 - F12 - Console	현재 브레이크 포인트에서 JS 이용 가능
크롬 - F12 - Sources	현재 페이지에서의 HTML, JS, CSS 등 각종 소스 확인 가능
크롬 - F12 - Sources - event listener breakpoint	브라우저를 실행하다 발생하는 이벤트에 브레이크 포인트를 걸 수 있음 (ex. 버튼 클릭)
크롬 - F12 - Sources - Filesystem	workspace, 브라우저를 개발하다가 filesystem에 브라우저에 사용한 소스 코드들을 올리면 디버깅하면서 실제 파일을 변경할 수 있음
크롬 - F12 - Settings - black boxing - add pattern - /.*jquery.*\.js$	브레이크 포인트에서 jquery에 걸리는 브레이크 포인트는 패스함
크롬 - F12 - Sources - XHR/fetch Breakpoints - add alpha-sharp	네트워크 요청하는 코드에서 바로 중단점 생성
크롬 - F12 - Elements - 원하는 태그에 우클릭 - Break on	DOM이 변경 되었을 때 중단점 생성