크롬 브라우저 개발자 모드 활용ㆍ 소스 파일에 있는 특정 단어를 검색해 파일 찾기
웹 프로그래밍 관련 작업을 진행하면서 특정 소스 코드 파일을 찾기 쉽지 않은 경우가 있습니다. 물론 소스를 열어서 직접 소스 구문을 확인하며 첨부된 파일들을 찾을 수 있지만 첨부된 파일이 많은 경우나 소스 코드가 복잡하게 작성된 경우 찾기 쉽지 않은 경우도 꽤 있습니다.
소스 코드 파일의 특정 단어를 검색해 해당 파일을 찾으시려면 크롬 브라우저에서 F12를 눌러 개발자 모드를 열어 주시면 됩니다.
아래 이미지와 같이 크롬 브라우저의 개발자 모드에서 Sources 메뉴를 선택하시고 구름 모양의 아이콘에 현재 웹페이지의 주소가 나오는 부분을 마우스 오른쪽 버튼으로 선택해 주시면 Search in all files 팝업이 하나 나오니 해당 팝업을 선택하시면 됩니다.
그럼 아래 이미지와 같이 단어를 검색할 수 있는 창이 나오게 되고 화살표 방향에 표시된 부분에 특정 단어를 입력하시고 엔터를 눌러 주시면 검색된 결과가 표시됩니다.
검색된 결과를 보시면 해당 파일의 이름과 소스 몇 번째 라인에서 해당 단어를 사용하는지 검색된 결과가 나오게 됩니다.
검색된 결과 중 소스 코드 라인 번호가 표시된 영역을 마우스로 선택하시면 해당 소스 구문 창이 열리게 됩니다.
아래 이미지와 같이 크롬 브라우저의 개발자 모드를 활용하여 특정 단어로 검색한 내용이 소스 파일에 어디에서 사용되었는지 쉽게 찾으실 수 있습니다.
크롬 브라우저의 개발자 모드를 활용해 특정 단어로 검색한 부분을 어떤 파일들에서 사용되고 있는지 확인하실 때 활용 하시면 좋을 듯합니다.
웹 프로그래밍 관련 일을 하면서 한눈에 들어오지 않는 파일을 찾을 때 주석이나 태그 아이디나 기억나는 단어를 활용하여 유용하게 소스 파일의 위치를 찾아냈던 기억이 있어 작성하게 되었으며 도움이 되는 정보가 되었기를 바랍니다.
