JavaScript를 쓰고 브라우저에서 움직여보세요.
어라? 움직이지 않니? ? 오류가 발생합니까?

···에러의 내용을 모르는 orz

그런 경우 Chrome의 개발자 도구를 시작해보십시오 .

이 기사에서 배우는 것

JavaScript에서 발생한 오류 및 경고를 확인하는 방법

오류 및 경고가 발생하는 JavaScript를 식별하는 방법

1. 자바스크립트 오류/경고가 있는지 확인

먼저 F12 키를 눌러 Chrome의 개발자 도구를 시작합니다.
샘플 페이지로서, Qiita의 유저 일람 페이지(미로그인 상태)를 사용했습니다.
이 이미지에서 빨간색 화살표 끝에 있는 아이콘을 확인합니다.

※프라이버시 보호(?)를 위해서, 아이콘이나 유저 ID는 숨겨져 있습니다.

확대하면 이런 느낌.

빨간색이 오류이고 노란색이 경고입니다.
각각 오른쪽 옆의 숫자는 오류 및 경고 수를 나타냅니다.
여기에 아무것도 표시되지 않으면 오류나 경고가 없습니다.

2. 어디에서 오류 및 경고가 발생하는지 확인

두 가지 방법으로 확인할 수 있습니다.
둘 다 똑같은 내용이지만 페이지를 보는 방법이 다릅니다.

2-1. 콘솔 탭 열기

요전날 소개했다 【Chrome Developer Tools】실례로 배우는 console 탭으로 할 수 있는 것～JavaScript 디버그편
에 있는 대로입니다.
콘솔 탭에는 console.log 출력뿐만 아니라 JavaScript 오류 및 경고도 표시됩니다
오류 출력 상태 샘플은 여기


조금 보기 어렵습니다만, url_name 라고 하는 변수가 null 이므로 읽을 수 없다고 말하고 있군요・・・.

2-2. 오류 및 경고 아이콘을 클릭합니다.

방금 확인한 이 아이콘.

여기에 마우스 커서를 놓으면 클릭할 수 있습니다.
클릭 한 결과가 여기


앞서 보이는 방법이 바뀌고 있습니다.
콘솔 탭만 독립적으로 또 하나 표시되었습니다!
그러나 경고 표시 를 클릭해도 경고가 표시되지 않습니다.
console의 마지막 행이 표시됩니다.
개인적으로는 작고 보기 힘들기 때문에 2-1의 방법을 취하는 경우가 많습니다.

어떤 때에 사용하면 좋을까

JavaScript가 생각대로 움직이지 않을 때 오류 및 경고 표시를 찾아보십시오.
JavaScript는 컴파일 언어가 아니기 때문에 사전에 문법 실수 등을 찾기 어렵습니다.
그래서, 우선 F12를 눌러 에러·경고의 마크가 있을지 어떨지를 보는 것만으로, 훨씬 해결에 가까워집니다.

요약

자바스크립트가 생각한 대로 움직이지 않을 때는 F12를 눌러 에러·경고 아이콘의 유무를 확인한다.

그럼, 좋은 자바 스크립트 라이프를