[연습] 개발자도구 디버깅(클릭/submit 이벤트에 중단점 걸기)

- 개발자도구에서 파일명으로 검색 : ctrl + o

 

( 파일 수정 후 새로고침 없이 ) 디버깅하기(localhost/localserver 에서도 가능)

1) break point 라인 설정 (debugger; 입력 가능)   

2) js / html / css / img 코드 수정 

3) Ctrl + S ( 저장 시 파일명 앞에 에러 표시가 떠도 무방 )

4) 페이지 상에서 click 또는 input 칸 입력으로 변화주기 ( 새로고침 후에도 유지되려면 ... 하단 내용 참조 )

5) break point 가 걸려 있으므로 4) 과정을 수행하면, 2) 에서 수정된 코드로 디버깅 진행 가능 

 

1) break point 없더라도 2) 코드 수정 후 3) 저장하고 바로 4) 페이지 상에 변화를 주면 수정이 반영된 결과가 나타남.

 

2) EventListener가 'submit'일 경우 

Source > Event Listener Breakpoints > Mouse > click / mosuedown / mouseup 등으로는 잡히지 않는다.

Source > Event Listener Breakpoints > Control > submit 으로 break point 를 걸 수 있다.

 

ex) document.getElementById('messageForm').addEventListener('submit', function(e) {
    e.preventDefault();   ... 생략 ...

 

위의 Basic 예제에서는 라이브러리를 사용하지 않고 기본 JavaScript 코드로 구성했기 때문에 submit 이벤트를 검사할 때 정상적으로 소스에 중단점이 걸린 것을 확인할수 있다.

jQuery같은 라이브러리를 쓰면 상황이 좀 달라지는데  $(element).click()과 같은 코드는 이벤트 생성을 jQuery 라이브러리에 위임하고 실제로 jquery.-3.3.1.min.js 와 같은 파일에서 이벤트가 발생한다.

즉, 테스트를 위해 Event Listener중에 click이벤트에 중단점을 생성하자.

Source > Event Listener Breakpoints > Mouse > click / mosuedown / mouseup 

 

 

3) Add Conditional breakpoint... : (파랑) breakpoint 가 없는 Line의 숫자에서 우클릭 시 설정 가능

    ( switch 문의 조건 예시 : action.type == 'DELETE_TODO' )

 

 

 

( 파일 수정 후 새로고침 하면서 ) 디버깅하기(localhost/localserver 에서도 가능)

※ 엄밀하게는 새로고침한 효과를 (임시로 추가한) 버튼으로 주는 것이다.

1) js 파일을 수정한다. ex) alert( ' 디버깅 테스트 ! '); 추가

2) break point 설정한다.

3) console 창에 아래 코드를 입력한다. ( onClick에 디버깅이 필요한 이벤트 함수를 적는다 )

document.body.innerHTML = `<button onClick='deepCopy(object)'>버튼</button>`

4) 화면에 버튼이 바로 추가되고, 이 버튼을 통해 새로고침한 것처럼 디버깅을 수행할 수 있다.

 

 

1) Sources > Overrides > [+] Select folder for overrides > 적당한 경로에 폴더 생성 후 [선택]

    특정 js 파일을 수정 없이 저장할 경우 위 폴더에 새로운 js 파일이 생성되지 않는다.

     Sources > Page > 특정 js 파일 >  저장(ctrl+s)

2) Sources > Page > 특정 js 파일 > 저장(ctrl+s) > 위 폴더에 새로운 js 파일이 생성

    * 맵핑된 파일 아이콘에 연결되었다는 의미의 동그라미가 표시

    ** 새로고침을 하더라도 새로운 js 파일을 바라보기 때문에 수정된 코드로 디버깅 가능.

    *** 수정 시 js 파일의 특정 라인에 빨간 밑줄과 (x) 표시가 떠도 무방함.

 

 

 

 

 

 

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

크롬 개발자 도구를 이용한 자바스크립트 디버깅

 

https://pilot376.tistory.com/61

Chrome 개발자 모드 새로고침 시 변경내용 유지하기