JSP파일에 없는 코드가 관리자 개발도구에만 보이는 이유

JSP 페이지에서 특정 코드가 실제 페이지에는 보이지 않고, 관리자 개발도구(DevTools)에서만 보이는 경우가 있다. 이는 주로 코드가 클라이언트 사이드에서 동적으로 생성되거나 수정되기 때문!

관리자 개발도구는 실시간으로 페이지의 현재 상태를 반영하기 때문에, 동적으로 생성된 요소들도 포함하여 보여준다.

---

웹 개발에서의 동적 콘텐츠 생성

• 클라이언트 사이드 스크립트: 자바스크립트와 같은 클라이언트 사이드 스크립트를 사용하여 페이지가 로드된 후에 DOM 요소를 동적으로 생성하거나 수정할 수 있다. 이러한 변경사항은 HTML 소스 코드에는 반영되지 않지만, 개발자 도구에서는 확인가능 하다.
• 개발자 도구의 역할: 웹 브라우저의 개발자 도구는 현재 페이지의 DOM 구조, 스타일, 스크립트 등을 실시간으로 분석하고 표시하기에 동적으로 생성되거나 변경된 요소들도 포착하여 보여준다.

JSP와 클라이언트 사이드 스크립트의 상호작용

• 서버 사이드 vs 클라이언트 사이드: JSP는 서버 사이드에서 실행되어 최종적인 HTML을 생성합니다. 반면, 자바스크립트는 클라이언트 사이드에서 실행되어 이미 생성된 HTML을 동적으로 변경할 수 있다. 이 과정에서 추가되거나 변경된 요소들은 원본 JSP 파일에는 나타나지 않는다..
• 동적 요소의 확인: 개발자 도구를 사용하면, 자바스크립트에 의해 동적으로 생성되거나 변경된 요소들을 실시간으로 확인할 수 있습니다. 이는 디버깅이나 페이지 분석에 유용하다.

bootstrap을 사용한 datatable의 Search:라는 글자를 Search 로 바꾸기 위해 jsp를 보던도중

아무리 찾아봐도 저런 글자가 없길래 개발자도구를 확인해보니 개발자도구에는존재했다!
알고보니 저 Search: 라는 라벨은 js를 사용해 페이지 로드 후 DOM요소를 동적으로 생성한것!

 

datatabls.min.js 에서 저녀석을 찾을 수 있었다 !

와...하지만 템플릿의 js를 수정하기보단 
내가사용하는 jsp에서 추가적인 스크립트로 DOM요소를 조작하는 편이 좋을 것 같다..................