chrome 개발자 도구(developer tool) freeze/pause screen (debug/breakpoint)

FE에서 dom element가 hover 같은 이벤트에 의해 동적으로 변경될 때가 있다.

이때 개발자 도구에서 뭔가 확인하기 위해서 마우스를 이동하면 element가 원래대로 돌아가서

마우스를 움직일 수가 없다

 

element > 우클릭 > break on > 을 통해서 breakpoint를 걸 수도 있지만,

event 발생시 변경되는 element가 동적으로 생성되는 경우, 이 방법은 통하지 않는다...

 

 

대신 `F8`(window) / `Fn + F8`(mac)을 누르면 debugger가 pause 된다.

당연히 화면도 멈추니, 이 상태에서 개발자 도구로 이동해서 열심히 탐색(?)하면 된다.