크롬 개발자 도구 - Console view에서의 search 기능

웹 애플리케이션의 view를 개발하다 보면 html 코드 안에서 javascript를 호출하는 function이 jsp 파일에 있는 것이 아닌 외부 js 파일에 존재하는 경우가 있다.

만약 호출되는 함수가 어떤 파일에 있는지를 안다면 바로 확인을 할 수 있겠지만 그게 아니라면 이클립스에서 문자열 검색을 통하여 사용하는 function이 어떤 파일에 존재하는지를 찾아야 할 것이다.

허나 이와 같이 javascript의 function을 찾아나가는 것은 손가락이 아프고 귀찮은 일이다.

이럴때 크롬 개발자 도구를 사용하면 쉽게 function을 찾을 수 있다.

먼저 크롬 브라우저에서 화면을 띄우자.

그런 후 테스트 하고자 하는 웹 페이지를 접속한 후 F12 키를 누른다.

Developer Tools 창이 뜨면 아래 빨간색 동그라미 영역의 버튼을 클릭한다.

주황색 영역이 노출이 될 것이고 Search 탭으로 이동하여 사용자 입력 창에 자신이 찾고자 하는 function 이름을 넣어주고 엔터를 치면 된다.

그럼 해당 function이 포함되어 있는 js 파일을 모두 보여주게 된다. 이렇게 찾아낸 function에 브레이크 포인트를 걸어서 디버깅을 할수도 있으니 크롬 개발자 도구는 UI 개발 시 꼭 필요한 툴인 것 같다.