Javascript - 관리자 도구를 활용한 사용된 js 함수 찾기 디버깅

이미 작업이 끝난 페이지가 오류가 발생하거나 분석을 위해 찾다보면 사용한 함수 -> 함수 형태로 찾을일이 많은데,

웹에서 디버깅은 관리자도구만 잘 사용하면 빠르게 디버깅이 가능하고 위치를 찾아서 분석하고 수정을 할 수 있습니다.

 

예를 들어 함수가 JSP에도 정의되어 있고 따로 빼놓은 js에도 있고, include처리된 jsp에도 있고 그 jsp를 물고 있는 js에도 정의 되어있고... 직접 짠사람이라면 금방 알고 수정하겠지만, 처음보거나 다른사람이 보면 정의된 내용을 찾는게 여간 고역이 아닙니다. 여러사람이 개발하면서 제대로 된 개발 약속이 없다면 이런식으로 중구난방으로 막 들어가 있을텐데 관리자도구를 사용하면 해당 함수가 어디 있는지 바로바로 찾을 수 있습니다.

 

관리자 도구를 통해 함수가 적용된 페이지 찾기

1. F12버튼을 누르고 관리자도구를 열어줍니다.

 

2. 관리자도구 Console창에 해당하는 함수명을 입력합니다.

function test() {
    console.log("저를 찾았나요?");
}

라는 내용의 test함수를 찾을 경우 "test"만 입력합니다.

 

함수명만 입력

 

3. 그럼 관리자도구는 해당 함수가 존재할 경우 타입이 무엇인지 정의된 내용이 무엇인지 간단하게 알려줍니다.

이때 출력된 함수 내용을 클릭해주면 해당하는 페이지로 관리자 도구가 이동을 시켜줍니다.