브라우저 개발자 도구에서 깨진 소스의 근원을 알아내는 방법?

Question

페이지를 열면 오류 404 또는 기타로 인해 일부 리소스가로드되지 않아 페이지가 깨졌습니다.

그러나 이러한 리소스가 요청 된 곳을 아는 방법은 무엇입니까? 나는 그것을 클릭하면

, 나는

즉 얻을 :

예를 들어, 나는 크롬 콘솔에서 다음과 같은 문제가 자원을 어떤 단서도없는 빈 창.

요청하신 다른 리소스 (HTML, 자바 스크립트 등)를 찾을 수 있습니까?

질문은 Chrome에만 적용되는 것이 아니라 모든 브라우저에 적용됩니다. 목표는 깨진 자원의 "개시 자"또는 "기원"을 찾는 것입니다.

Answer 1

Chrome 개발자 도구의 네트워크 패널에서 초 기자를 볼 수 있지만 먼저 페이지를 새로 고침해야합니다. 아래의 스크린 샷을 YouTube 페이지에서 보았습니다 (adblocker가 켜져 있고 일부 요청이 UBlock Origin에 의해 차단됨). 이 기자의 열에서 값을 클릭하면

는, 파일에 소스 패널을 엽니 다. 일반적으로 Initiator는 doXHRequest()과 같은 일부 일반 기능입니다. 그 자체로 많은 것을 알려주지는 않습니다. 중단 점을 지정하고 호출 시점과 대상을 관찰해야합니다.

코드가 축소되면 그다지 도움이되지 않을 수도 있습니다.