제타마인드

웹 페이지에서 버튼에 걸린 이벤트 리스너 함수를 손쉽게 찾는 방법이다.

현재 맡은 업무의 프로젝트에서 굉장히 유용한 기능이다.

버튼에 onclick 속성이 있으면 자바스크립트 함수를 쉽게 따라 갈수 있지만, 이벤트 리스너가 걸려 있는 경우 id, name, class 등으로 검색해서 찾아야 하는데, 페이지에 여러 파일이 include 되어 있고 id, name이 여러군데에 중복되서 쓰이거나 함수 이름이 많이 중복될 경우 어떤 함수를 실행하는지 찾기가 어려운 경우가 있다. 이럴때 click하면 어떤 함수를 타는지 쉽게 찾을 수 있다.

버튼 요소 클릭 > 이벤트 리스너 > click
handler 우클릭 - 함수 정의 표시

하단의 { }  모양의 버튼에 커서를 대면 pretty 라는 주석이 뜬다. 이것을 클릭하면 소스가 예쁘게 정렬된다.

ajax 통신시 브레이크 포인트를 걸려면 우측의 XHR/가져오기 중단점에서 + 버튼을 눌러 추가한다. 모든 XHR 또는 가져오기를 추가할 수 있다.

크롬 요소 탭에서 추가할 DOM 요소를 우클릭 > 중단 위치 > 속성 수정 을 체크하면 오른쪽의 DOM 중단점 탭에 추가된다. 해당 요소의 속성이 변경될 경우 중단점을 걸 수 있다.

보통 크롬 구글 검색기록 및 자동완성 사용안하게 하는 방법을 검색해 보면 자신의 구글 계정 > 데이터 및 맞춤 설정 > 웹 및 앱 활동을 사용안함 으로 바꾸는 것이 나온다. 이것으로 대부분은 해결되지만 맹점이 하나 있다.

이렇게 조치를 취해도 크롬 브라우저가 열린 상태에서 상단 탭에서 + 버튼을 눌러 새탭이 생겼을때 크롬 검색어 부분을 클릭하면 자신이 검색했던 검색어 내역이 나온다. 이건 로컬 PC에 저장되서 나오는 거라고 한다.

여기에 대해서 한참을 해결책을 찾았지만 이걸 끄는 기능이 지원이 되지 않는다는 글이 많았는데, 우연히 어떤 댓글에서 해결책을 발견했다. 그리고 실제로 적용되는 것을 확인했다.

결론은 이 로컬 히스토리를 저장하는 파일을 읽기 전용으로 만드는 것이다.

1) 일단 현재 저장된 검색어를 삭제해야 한다. ctrl + shift + delete 를 눌러 인터넷 사용 기록을 삭제해준다.

2) 열려 있는 크롬 브라우저를 모두 닫는다. (중요)

3) 윈도우 탐색기를 열어 아래 경로로 이동한다. 

C:\Users\사용자명\AppData\Local\Google\Chrome\User Data\Default

(AppData 폴더는 숨겨져 있다. 탐색기의 보기 탭에서 숨긴 항목에 체크가 되어있어야 보인다.)

(구글 로그인 계정별로 동기화하여 관리할 경우 Default 폴더가 아닌 profile 1 , profile 2 ... 등의 폴더로 들어가야 한다.)

4) History 파일을 우클릭 한 뒤 속성 메뉴에 들어간다. '읽기 전용' 항목에 체크한 후 적용한다.

이제 크롬을 열어 새탭에서 구글 검색창을 클릭해도 검색내역이 나오지 않는다.

1) 개발자 도구의 우측 상단의 톱니바퀴를 클릭하여 설정 화면에 들어간다.

2) 소스 영역의 '익명 및 콘텐츠 스크립트에서 검색'을 체크한다.

3) ctrl + shift + F 를 누르면 하단에 검색 탭이 나타난다. 검색어를 입력하고 엔터를 누르면 해당되는 스크립트 소스들이 검색되어 나온다. 검색결과를 클릭하면 해당 파일이 열린다. (검색이 안될경우, 개발자 도구를 켜둔 채로 새로고침 후에 다시 검색해 보자)