웹 개발을 하다 보면 방대한 코드 속에서 특정 JavaScript 함수가 어디에 정의되어 있는지 찾아야 할 때가 많습니다. 구글 크롬의 개발자 도구를 활용하면 몇 가지 간단한 단계만으로 함수 정의 위치를 빠르게 확인할 수 있습니다.
1. 개발자 도구 열기
먼저 구글 크롬 브라우저를 실행한 후 F12 키를 눌러 개발자 도구(Developer Tools)를 엽니다. 또는 페이지에서 마우스 오른쪽 버튼을 클릭한 뒤 '검사(Inspect)'를 선택해도 같은 결과를 얻을 수 있습니다.
2. 전체 검색 기능 실행
개발자 도구가 열리면 Ctrl + Shift + F 단축키를 누릅니다. 이 검색 기능은 현재 로드된 모든 소스 파일을 대상으로 문자열을 검색할 수 있는 강력한 도구입니다.
3. 정규식(Regular Expression) 옵션 활성화
검색창 아래에 있는 '정규식(Regular expression)' 체크박스를 선택합니다. 이 옵션을 켜면 단순 문자열뿐만 아니라 패턴 기반의 정교한 검색이 가능해집니다.
4. 함수 검색하기
검색어 입력란에 function이라고 입력하면 해당 페이지의 모든 스크립트에서 function 키워드가 포함된 위치가 목록으로 표시됩니다. 원하는 함수 이름을 함께 입력하면 더욱 정확하게 정의 위치를 좁혀 나갈 수 있습니다.
예를 들어 function\s+myFunc처럼 정규식 패턴을 사용하면 'myFunc'라는 이름의 함수 선언부만 필터링하여 찾을 수 있습니다.
검색 결과를 클릭하면 해당 소스 파일의 정확한 라인으로 바로 이동하므로, 함수의 정의와 내용을 즉시 확인할 수 있습니다.