HTML, DevTools Sources에 안 보이는 문제 해결 (sourceURL 사용)

개발자 모드에서 디버깅이 필요한데, 소스코드가 보이지 않는 문제가 있었다.

 

🚀 요약

HTML 내부 <script>의 마지막에 다음을 추가

//# sourceURL={파일명지정}.js

---

 

📌 1. 문제 상황

서버 렌더링 방식으로 HTML을 반환하는 구조에서,
Chrome DevTools의 Sources 탭에 스크립트가 보이지 않는 문제가 발생.

 

- 에러 메시지

• content unavailable. resource was not cached
• 요청이 리디렉션되었기 때문에 사용 가능한 콘텐츠가 없습니다.

---

📌 2. 현재 구조

- 컨트롤러 (서버 렌더링)

@RequestMapping(value = "/openPage.do") 
public ModelAndView openPage(...) {
    ModelAndView mv = setPledgeStatusViewParams(request);
    mv.setViewName(baseUrl + "/page");
    return mv;
}

👉 요청 시 서버에서 page.html을 렌더링하여 반환한다.

 

📌 3. 원인 분석

📌 3-1. inline script는 “파일”이 아니다

HTML 내부에 다음과 같은 <script>가 있다고 가정한다.

<script>

    // JS 코드

</script>

이 스크립트는:

• 별도의 JS 파일이 아님
• URL(경로)이 없음
• 브라우저가 파일로 식별할 수 없음

👉 즉, DevTools 기준에서는 “파일이 아닌 익명 스크립트”이다.

 

📌 3-2. Chrome의 처리 방식 (VM 파일)

브라우저는 이름 없는 스크립트를 다음과 같이 처리한다.

VM123

VM456

👉 임시 가상 파일(VM)로 생성한다.

이 때문에:

• Sources 탭 트리에 안 보이거나
• 어디 코드인지 찾기 어려움
• 브레이크포인트 유지 불가

 

📌 3-3. window.open + redirect 환경 영향

• 서버 렌더링 과정에서 redirect 발생 가능
• 캐시가 없는 상태

이 경우 DevTools는:

• 원본 리소스를 정확히 추적하지 못함
• 파일 기반으로 매핑 실패

---

📌 4. 해결 방법: sourceURL 사용

📌 4-1. 적용 코드

sourceURL은 브라우저에게 "이 스크립트의 이름은 이것이다” 라는 정보를 제공한다.

 

HTML 내부 <script>의 마지막(</script> 윗줄)에 다음을 추가한다.

//# sourceURL=workplace-page.js

 

 

workplace-page.js라는 이름으로 소스탭에서 파일 확인이 가능하다.

👉 즉, inline script를 파일처럼 다룰 수 있게 된다.

• DevTools에 고정된 파일명으로 표시됨
• Sources 트리에 노출됨
• 브레이크포인트 가능

---

📌 5. 실무 주의사항

📌 5-1. inline script는 최소화한다

가능하면 외부 JS 파일로 분리하는 것이 가장 안정적이다.

<script src="/js/workplace-listPledgeStatus.js"></script>

 

📌 5-2. 동적 실행 환경에서는 디버깅 문제가 발생하기 쉽다

다음 조건이 겹치면 문제가 잘 발생한다.

• inline script
• window.open
• redirect
• 캐시 없음

👉 이 경우 sourceURL이 매우 유용하다.