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