developer tip

Chrome 개발자 도구 콘솔이 이미지 404 오류를 기록하지 못하도록 할 수 있나요?

optionbox 2020. 12. 2. 08:31
반응형

Chrome 개발자 도구 콘솔이 이미지 404 오류를 기록하지 못하도록 할 수 있나요?


Chrome 개발자 도구 콘솔은 페이지 자산 (이미지 포함)을 찾을 수 없을 때마다 오류를 기록합니다 (예 : 404 반환).

제 작업에서 저는 제 3자가 이미지를 제공하고 개발 중에는 사용할 수없는 사이트에서 자주 작업합니다. 누락 된 각 이미지가 콘솔에 오류로 표시되면 다른 더 중요한 오류 (예 : JavaScript 오류)를 알아 채기가 더 어려워집니다.

발견되지 않은 이미지를 오류로 로깅하는 콘솔을 중지하는 설정이 있습니까?

아니면 네트워크 탭에서 요청을 필터링 할 수있는 것과 동일한 기준으로 콘솔 메시지를 필터링하는 방법이 있습니까?

(예 : http://chromium.googlecode.com/issues/attachment?aid=1337330000000&name=Screenshot-Google%2B+-+Google+Chrome.png&token=1F05er8uKjAQEEBrUITFjsIGJ2A%3A1358867878658&inline=1 참조 )


Chromium 팀이 이에 대한 작업을 '시작'했습니다. https://code.google.com/p/chromium/issues/detail?id=96212

업데이트 : 기능 요청이 2013 년 3 월 18 일에 마감되었습니다.이 기능이 처음 등장한 Chrome 버전은 확실하지 않지만 Chrome v33.0.1750.152 (Linux)에서 콘솔 필터링 옵션을 확인할 수 있습니다.

업데이트 2 : 현재 필터 (일반 텍스트 또는 정규 표현식)를 입력하면 메시지 텍스트 (예 :) GET http://example.com/foobar 404 (Not Found)와 오른쪽 링크의 텍스트 (예 :)에 대해 테스트 test.html:65됩니다. ( 이를 추적하기 위해 Chromium에 문제제출했습니다 .)

해결 방법으로 다음과 같은 정규식 필터를 사용하십시오.

^(?!.* 404 \(Not Found\))(?!.*[file name])

[file name]오른쪽 링크의 파일 이름은 어디에 있습니까 ?

내 페이지 인 경우 예를 들어 test.html, 다음 ^(?!.* 404 \(Not Found\))(?!.*test\.html)작동합니다.

참고 : 이렇게하면 메시지 텍스트에 파일 이름이있는 메시지도 필터링됩니다. 현재로서는이 문제를 해결할 방법이 있는지 잘 모르겠습니다.

업데이트 (2019-06-05) : 이 표현식은 현재 Chrome 버전 (75.0.3770.80)에서 404를 필터링합니다.

-/404\s\(Not\sFound\)$/

필터링은 각 토큰을 처리하기 전에 먼저 필터 문자열을 공백으로 분할하는 것처럼 보이지만 정규 표현식 내부의 공백도 분할하므로 \s's가 필요합니다.

기술적으로 이것은 메시지를 포함하여 (대소 문자를 구분하지 않는) 문자열 "404 (Not Found)"로 끝나는 모든 메시지를 필터링 console.log합니다.


크롬 개발자 도구에서 오른쪽 상단의 기어를 클릭 한 다음 아래로 스크롤하여 콘솔 섹션으로 이동하면 "네트워크 메시지 숨기기 설정"이 있습니다.

업데이트 : 이제 "콘솔"탭 아래에 있습니다. "필터"를 클릭하면 필터 행에 확인란 ( @elado )으로 표시 됩니다.


대안으로 개발자 서버에서 문제가되는 이미지의 src 속성을 변경하기 위해 약간의 자바 스크립트를 실행할 수 있습니다 (프로덕션 환경에 게시하지 않도록 확인하세요!).

실제로 페이지에 자바 스크립트를 추가하고 싶지 않다면 (이해할 수 있지만) 크롬 플러그인을 통해 페이지로드시 스크립트를 실행할 수 있습니다 (아마도 greasemonkey chrome clone-tampermonkey).

nb 피드백을 보내 주셔서 감사합니다. 특히이 기능이 작동하려면 dom이 준비된 후 이미지가로드되기 전에 이벤트 내에 있어야합니다.


404 이미지를 서버에 넣고 기본 404 이미지를 표시하지 않는 경우 파일이 존재하는지 서버 측에서 확인하는 것이 가장 좋습니다.

문안 인사


앱의 'catch'문 .. 'console.warn'아래에 예외를 기록합니다. .. 방화범과 함께 작동한다는 것을 알고 있습니다. Firebug에서는 '경고'탭에서 이러한 '오류'를 찾을 수 있습니다. Chrome 개발자 도구도 마찬가지라고 생각합니다.

실제로 비슷한 일을 했어요 .. 내 앱이 오류로 인해 중지되므로 대신 'try'및 'catch'블록을 사용했습니다. 내 캐치는 다음과 같습니다. catch (e) {console.warn (e); }

참고 URL : https://stackoverflow.com/questions/14337351/can-i-prevent-the-chrome-developer-tools-console-from-logging-image-404-errors

반응형