html에 html나 jsp가 중첩된 소스 디버깅 방법

개요

html 안에 여러 html이나 jsp 파일을  겹쳐서 개발을 할 때 가 있습니다. 이때 우리는 디버깅을 하기 위해서 "debugger;" 명령을 사용해서 디버깅을 합니다.  하지만 다른 분이 개발을 한 것을 디버깅할 때는 해당 파일을 찾을 때까지 디버깅을 못하는 경우가 있습니다. 이럴 때 사용하면 좋은 방법을 알려 드립니다.

 

방법

1. 크롬에서 개발자 도구를 엽니다.

2. 내가 알려고 하는 함수의 이름을 console 창에 입력합니다. 만약 함수 이름이 test(); 이면 함수뒤 전달인자는 때고 "test;"처럼 함수 명만 입력합니다. 그리고 엔터키를 누릅니다.

3. console 창에 함수에 관련된 내용이 표시가 됩니다.

4. 출력된 결과 물을 클릭합니다.

5. 해당 파일이 VM+숫자 모양으로 디버깅할수 있게 텝에 생성이 됩니다.

6. break를 걸어 디버깅하면됩니다.

 

반응형

예시

Test1.html
...
$("#test").append("./test2.html")
...


Test2.html

...
$("#test").append("./test3.html")
...


Test3.html
...
Function placeholderCssProcess(){

A = A + 1;

}
...

 

반응형

 

콘솔에서 아래와 같이 함수 이름만 placeholderCssProcess; 만 입력(1)하고 엔터를 치면 해당 함수 설명이 나옵니다. 해당내용(2)을 클릭하면  해당 함수가 포함되어 이는 파일을 가상함수(3)로 열어 줍니다.

그러면 디버깅을 편하게 할 수 있습니다.

 

파일 찾아가는 순서