Chrome 개발자 도구로 JavaScript 함수 정의 찾기
Google Chrome에서 웹 페이지에 포함된 JavaScript 함수의 정의를 찾으려면 브라우저에 내장된 개발자 도구(Developer Tools)를 활용하면 됩니다. 별도의 확장 프로그램이나 외부 도구 없이 몇 번의 키 입력만으로 원하는 함수를 빠르게 검색할 수 있습니다.
1단계: 개발자 도구 열기
먼저 Chrome으로 해당 웹 페이지를 연 다음 F12 키를 눌러 개발자 도구를 엽니다.
또는 Ctrl + Shift + I(Windows) 또는 Cmd + Option + I(Mac) 단축키를 사용하거나, 페이지에서 마우스 오른쪽 버튼을 클릭한 후 검사 메뉴를 선택해도 동일하게 실행할 수 있습니다.
2단계: 전체 검색 패널 열기
개발자 도구가 열리면 Ctrl + Shift + F를 누릅니다. 이 단축키는 현재 로드된 모든 소스 파일(HTML, CSS, JavaScript)을 대상으로 전역 검색을 수행하는 검색(Search) 패널을 열어 줍니다.
3단계: 정규식 옵션 활성화
검색 입력창 아래에 있는 정규식(Regular Expression) 체크박스를 선택합니다. 정규식을 활성화하면 단순 문자열 검색보다 훨씬 유연하고 정교한 패턴 검색이 가능합니다.
4단계: 함수 검색하기
검색어 입력란에 function을 입력하면 소스 코드 내의 모든 함수 선언이 결과 목록에 표시됩니다. 특정 함수만 찾고 싶다면 function 함수이름처럼 함수 이름을 함께 입력하거나, function\s+함수이름과 같은 정규식 패턴을 사용하면 더욱 정확한 결과를 얻을 수 있습니다.
검색 결과 항목을 클릭하면 해당 코드 위치로 바로 이동하므로, 함수가 정의된 파일명과 줄 번호를 손쉽게 확인할 수 있습니다. 이 방법은 압축(minified)된 스크립트나 대형 프로젝트에서 특정 로직을 추적할 때 특히 유용합니다.