Programing

Chrome 개발자 도구 : html 스크립트가 비어 있습니다 (소스에서) 디버깅 자습서

crosscheck 2020. 10. 22. 07:40
반응형

Chrome 개발자 도구 : html 스크립트가 비어 있습니다 (소스에서) 디버깅 자습서


NetBeans와 Google Chrome을 사용하여 C hrome 디버깅 자습서를 수행하고 있습니다. 확장을 포함한 모든 것이 올바르게 작동하는 것 같지만 섹션에 도달 Use the Debugger하면 중단 점을 삽입하는 html 코드를 볼 수 없습니다.

브라우저에서 팝업 검사를 선택하면 콘솔에서 열리 며 아무것도 표시되지 않고 Elements는 이미지가 추가 된 popup.html을 표시합니다. Sources로 이동하면 popup.html 파일을 열 수 있지만 Line 1 만 비어 있습니다. js 파일을 열면 js 파일이 있으며 편집 할 수 있습니다 (중단 지점).

미안합니다-아마도 기본적인 것 같지만 이것에 대해 그다지 경험이 없습니다. 나는 모든 것을 새로 고침하고 새로 고침을 시도했습니다.

후속 location.reload(true)조치 : 콘솔 프롬프트에 들어가면 popup.html 파일이 소스로 표시됩니다! 왜? 몰라요.

나는 이것이 내가 걸 으면서 보낸 하루 종일 누군가를 구하기를 바랍니다.


이것은 Chromium DevTools 알려진 문제보입니다 . 기본적으로 HTML 및 기타 스크립트가 아닌 콘텐츠는 DevTools가 열리기 전에 이미 플러시되었으며 다시 가져올 수있는 신뢰할 수있는 방법이 없습니다. DevTools로 페이지를 새로 고침하면 문제가 "수정"됩니다.


이 문제가 있었는데 Inspector 설정 창 (F1)에서 "Enable Javascript Source Maps"를 비활성화하면 문제가 해결된다는 것을 알았습니다.

js.map을 다시 만들고 설정을 다시 활성화했으며 소스를 계속 사용할 수있었습니다.

그래서 내 문제는 내가 최소화되지 않은 js (dev settings)를 제공하고 있었지만 맵 (프로덕션 설정 용으로 제작 됨)은 여전히 ​​거기에 있고 구식이라고 생각합니다.


제 경우에는 도움이 된 주문이

  1. 소스의 빈 탭 닫기
  2. 개발 도구 닫기
  3. 개발 도구 열기
  4. 소스에서 탭 열기 (여전히 비어 있음)
  5. 페이지 새로 고침

제 경우에는 탭에도 빈 페이지가 표시되어 콘솔에 액세스 할 수 없었습니다. 내 해결책은 빈 디버거 화면에 초점을 맞춘 상태에서 CTRL + SHIFT + I 조합을 사용한 다음 parent.location.reload(true)팝업 디버거의 콘솔에 입력 하는 것입니다.


제 경우에는 디버거가 디버거의 "도메인 없음"섹션 아래에 빈 인덱스 페이지를 제공하도록하는 크롬 확장이있었습니다. 크롬에서 필수가 아닌 모든 확장을 비활성화 한 후 디버거는 올바른 소스를 다시 표시했습니다.


나는 심각한 자바 스크립트 문제가 이와 같은 문제를 일으키는 것으로 나타났습니다. 제 경우에는 오타로 인해 전체 문서를 잘못 덮어 썼습니다.

Chromium WebTools 디버거에 빈 html 페이지가 표시되는 경우 자바 스크립트를 잘 살펴보고 이상한 일이 없는지 확인하세요.


명령 줄 인수 "--user-data-dir"과 함께 새로운 세션을 사용하고 "Javascript 소스 맵 활성화"를 비활성화하여 문제를 해결했습니다. 내 코드는 Firefox 디버거에서 잘 표시되므로 Chrome 버그로 인한 것 같습니다.


Dev Tools (F12)-> Inspector settings window (F1)-> Restore defaults and reload [맨 아래 버튼] 작동합니다!


나는 같은 문제가 있었다. 페이지 새로 고침도 작동하지 않았습니다.

가는 chrome://help나를 위해 일한 브라우저 + 다시 시작 새로 고침.

메뉴를 통해 Chrome을 업데이트 할 수도 있습니다.

여기에 이미지 설명 입력


제 경우에는 멀웨어에 감염되고 브라우저를 재설정 한 후 갑자기 발생했습니다 (캐시 / 앱 데이터 삭제).

해결책 : 제 경우에는 Js에 영향을 미칠 수있는 확장 프로그램 제거

아래 확장 프로그램을 제거 / 비활성화하고 https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje?hl=ko

이상하게도 그 애드온을 문제없이 씻기 전에 심장에 CPR과 같다고 생각하기 때문입니다. :)


제 경우에는 며칠 동안 browsersync가 실행되면서 꿀꺽 꿀꺽 거리는 소리가났습니다. 나는 꿀꺽 꿀꺽 마시고 내 문제를 해결했습니다.


거대한 자바 스크립트 파일이있을 때도이 문제가 발생했습니다.

                points.push({
                    location: new google.maps.LatLng(46.5376919, 4.5425704),
                    date : "5/8/2017 5:11:00 PM",
                    free : true
                });

주기적으로 3000 개 항목을 계산하여 스크립트에서 파일이 커지고 크롬 소스에서 파일이 비어 있습니다. (나는 약간의 제한에 도달했다고 생각합니다)

100 개의 항목을 제거하여 파일을 작게 만든 후에는 정상적으로 작동했습니다.

참고 URL : https://stackoverflow.com/questions/20196795/chrome-developer-tool-html-script-is-blank-in-source-debugging-tutorial

반응형