디버깅.Debugging.VSC.VisualStudioCode.연동

# 참고 : https://subicura.com/2018/02/14/javascript-debugging.html

 

 

1. 이벤트 Break Point	1) Debug Mode . Sources . 우측 Event Listener Breakpoints  2-1) 마우스 클릭 이벤트 > Mouse . Click 을 클릭 2-2) Submit 버튼 이벤트 > Submit 을 클릭
2. JQuery Break Point	1) Debug Mode . Sources . 우측 Event Listener Breakpoints  2) Source 코드창 바로 아래 { } 을 클릭하면, minified 된 코드가 beautifer 된다. 3) JQuery Code 를 디버깅 할게 아니라서, JQuery Code 는 제외하자 . Settings . BlackBoxing . Add Pattern . " /.*jquery.*\.js$ " 따옴표 안 내용 추가 4) 추가하면 JQuery 에는 더이상 BreakPoint 가 잡히지 않는다 .
3. Fetch Break Point	Ex> github 에 네트워크 요청이 있을때 1) Debug Mode . Sources . 우측 XHR/fetch Breakpoints 2) + 를 누른다 . 3) URL contains 'github' 를 기록
4. Dom Change Break Point	1) Elements 메뉴에서 소스상 원하는 위치에서 오른쪽 클릭 2) Break On.subtree modifications 3)
5. React Example	static/bundle.js 이 직접 디버깅이 안됨. bundle.js 파일 최하단에 적힌 //# sourceMappingURL=bundle.js.map 파일을 열어보면, sources 파일 목록확인이 가능하다 . ( 하지만 복잡해서 힘들 듯 ) https://web.dev/learn/