대부분의 브라우저는 개발자 도구가 내장된 상태로 제공됩니다. 이러한 개발자 도구에는 일반적으로 콘솔이 포함되어 있습니다. 콘솔에는 현재 실행 중인 페이지에 관한 정보가 제공됩니다.
콘솔에 로깅되는 메시지는 페이지를 만든 웹 개발자나 브라우저 자체에서 제공됩니다.
모든 콘솔 메시지의 심각도 수준은 Verbose, Info, Warning, Error입니다.
Error 메시지는 페이지에 해결해야 할 문제가 있음을 의미합니다.
Lighthouse 브라우저 오류 감사 실패 방법
Lighthouse는 콘솔에 로깅된 모든 브라우저 오류에 플래그를 지정합니다.
브라우저 오류를 해결하는 방법
모든 사용자에게서 페이지가 예상대로 실행되도록 Lighthouse에서 보고하는 각 브라우저 오류를 수정합니다.
Chrome DevTools에는 오류의 원인을 추적하는 데 도움이 되는 몇 가지 도구가 포함되어 있습니다.
- 각 오류 텍스트 아래에는 문제가 있는 코드를 실행시킨 호출 스택이 표시됩니다.
- 각 오류의 오른쪽 상단에 있는 링크는 오류를 일으킨 코드를 보여줍니다.
예를 들어 다음 스크린샷은 두 가지 오류가 있는 페이지를 보여줍니다.
이 예에서 첫 번째 오류는 console.error() 호출에서 웹 개발자가 발생합니다.
두 번째 오류는 브라우저에서 발생하며 페이지의 스크립트 중 하나에 사용된 변수가 없음을 나타냅니다.
각 오류 텍스트 아래에 DevTools 콘솔에 오류가 있는 호출 스택이 표시됩니다.
예를 들어 첫 번째 오류의 경우 Console은 (anonymous) 함수가 doStuff 함수를 호출한 init 함수를 호출했음을 나타냅니다.
이 오류의 오른쪽 상단에 있는 pen.js:9 링크를 클릭하면 관련 코드가 표시됩니다.
이러한 방식으로 각 오류의 관련 코드를 검토하면 발생할 수 있는 문제를 식별하고 해결하는 데 도움이 될 수 있습니다.
오류의 원인을 알 수 없다면 검색엔진에 오류 텍스트를 입력해 보세요. 문제 해결 방법을 찾을 수 없으면 Stack Overflow에서 질문해 보세요.
오류를 수정할 수 없다면 try…catch 문으로 래핑하여 코드에 문제를 알고 있음을 명시적으로 나타내는 것이 좋습니다.
catch 블록을 사용하여 오류를 더 적절하게 처리할 수도 있습니다.