코드에는 오류가 발생하기 쉽습니다. 실수할 가능성이 크죠… 아, 무슨 말을 하는 걸까요? 적어도 당신이 로봇이 아니라 인간이라면 당신은 반드시 실수를 하게 될 것입니다.
그러나 브라우저에서는 기본적으로 사용자에게 오류가 표시되지 않습니다. 따라서 스크립트에 문제가 발생하면 무엇이 손상되었는지 확인할 수 없으며 수정할 수도 없습니다.
오류를 확인하고 스크립트에 대한 기타 유용한 정보를 많이 얻을 수 있도록 "개발자 도구"가 브라우저에 내장되어 있습니다.
대부분의 개발자는 개발을 위해 Chrome이나 Firefox에 의지합니다. 이러한 브라우저에는 최고의 개발자 도구가 있기 때문입니다. 다른 브라우저도 개발자 도구를 제공하며 때로는 특수 기능도 제공하지만 일반적으로 Chrome이나 Firefox를 '따라잡기'합니다. 따라서 대부분의 개발자는 "선호하는" 브라우저를 갖고 있으며 문제가 브라우저와 관련된 경우 다른 브라우저로 전환합니다.
개발자 도구는 강력합니다. 그들은 많은 기능을 가지고 있습니다. 시작하려면 파일을 열고, 오류를 확인하고, JavaScript 명령을 실행하는 방법을 알아보세요.
bug.html 페이지를 엽니다.
JavaScript 코드에 오류가 있습니다. 일반 방문자의 눈에는 숨겨져 있으므로 개발자 도구를 열어서 살펴보겠습니다.
F12를 누르거나, Mac을 사용하는 경우 Cmd + Opt + J를 누르세요.
개발자 도구는 기본적으로 콘솔 탭에서 열립니다.
다음과 같이 보입니다.
개발자 도구의 정확한 모양은 Chrome 버전에 따라 다릅니다. 수시로 바뀌지만 비슷해야 합니다.
여기서 빨간색 오류 메시지를 볼 수 있습니다. 이 경우 스크립트에는 알 수 없는 "lalala" 명령이 포함되어 있습니다.
오른쪽에는 오류가 발생한 줄 번호가 포함된 소스 bug.html:12 에 대한 클릭 가능한 링크가 있습니다.
오류 메시지 아래에는 파란색 > 기호가 있습니다. 이는 JavaScript 명령을 입력할 수 있는 "명령줄"을 표시합니다. Enter 키를 눌러 실행하세요.
이제 우리는 오류를 볼 수 있으며 시작하기에 충분합니다. 나중에 개발자 도구로 돌아와서 브라우저에서 디버깅 장에서 디버깅에 대해 더 자세히 다룰 것입니다.
다중 라인 입력
일반적으로 콘솔에 코드 한 줄을 입력한 다음 Enter 키를 누르면 실행됩니다.
여러 줄을 삽입하려면 Shift + Enter를 누르세요. 이렇게 하면 JavaScript 코드의 긴 조각을 입력할 수 있습니다.
대부분의 다른 브라우저에서는 F12를 사용하여 개발자 도구를 엽니다.
그들의 모양과 느낌은 매우 유사합니다. 이러한 도구 중 하나를 사용하는 방법을 알고 나면(Chrome으로 시작할 수 있음) 다른 도구로 쉽게 전환할 수 있습니다.
Safari(Mac 브라우저, Windows/Linux에서는 지원되지 않음)는 여기에서 조금 특별합니다. 먼저 “개발 메뉴”를 활성화해야 합니다.
기본 설정을 열고 “고급” 창으로 이동합니다. 하단에 체크박스가 있습니다.
이제 Cmd + Opt + C를 사용하여 콘솔을 전환할 수 있습니다. 또한 "개발"이라는 새로운 최상위 메뉴 항목이 나타났습니다. 여기에는 많은 명령과 옵션이 있습니다.
개발자 도구를 사용하면 오류 확인, 명령 실행, 변수 검사 등의 작업을 수행할 수 있습니다.
대부분의 Windows 브라우저에서는 F12를 사용하여 열 수 있습니다. Mac용 Chrome에는 Cmd + Opt + J , Safari: Cmd + Opt + C가 필요합니다(먼저 활성화해야 함).
이제 환경이 준비되었습니다. 다음 섹션에서는 JavaScript에 대해 살펴보겠습니다.