개발자로서 당신은 종종 코드를 디버깅하고 싶을 것입니다. 이미 console.log을 사용했을 수도 있습니다. 일부 과제에서는 디버깅하는 가장 간단한 방법입니다.
이 글에서는 브라우저의 기본 디버그 도구를 사용하여 디버깅하는 가장 멋진 방법 중 일부를 알려드리겠습니다.
FreeCodeCamp 코드 편집기에 대한 간략한 정보:
디버깅을 시작하기 전에 멋진 코드 검사 엔진에 대한 몇 가지 비밀 사실을 유출해 보겠습니다. FCC에서.
우리는 코드 편집기로 사용자 정의된 CodeMirror를 사용합니다. eval() 함수는 편집기에서 문자열로 표시되는 JavaScript 코드를 평가하는 데 사용됩니다. eval()일 때 호출되면 브라우저는 기본적으로 코드를 실행합니다. 이 글의 뒷부분에서 이 비밀이 왜 중요한지 더 자세히 알아볼 것입니다.
이제 트릭으로 넘어갑니다:
Google Chrome은 V8이라는 JavaScript 엔진이 내장된 가장 인기 있는 브라우저 중 하나이며 Chrome DevTools라는 개발자를 위한 훌륭한 도구 세트를 제공합니다. 완전한 JavaScript 디버깅 가이드를 방문하는 것이 좋습니다.
1 :DevTools의 기본
Chrome DevTools 실행
F12를 누르세요
. 또는
를 누를 수도 있습니다.
Ctrl + Shift + I
Windows 및 Linux에서 또는
Cmd + Shift + I
Mac에서는 또는 마우스를 좋아한다면 Menu > More Tools > Developer Tools로 이동하세요. .
Sources 알아보기 그리고 console 탭.
이 두 탭은 디버깅하는 동안 아마도 가장 친한 친구가 될 것입니다. Sources 탭을 사용하면 방문 중인 웹페이지에 있는 모든 스크립트를 시각화할 수 있습니다. 이 탭에는 코드 창, 파일 트리, 호출 스택 및 감시 창 등에 대한 섹션이 있습니다.
console 탭은 모든 로그 출력이 진행되는 곳입니다. 또한 콘솔 탭의 프롬프트를 사용하여 JavaScript 코드를 실행할 수 있습니다. Windows의 명령 프롬프트 또는 Linux의 터미널과 동의어입니다.
팁:Esc를 사용하여 DevTools에서 언제든지 콘솔을 전환하세요. 키.
2 :일반적인 단축키 및 기능
전체 단축키 목록을 방문할 수 있지만 가장 많이 사용되는 단축키는 다음과 같습니다.
기능 Windows, Linux Mac
키워드를 검색하면 정규식이 지원됩니다. Ctrl +F``Cmd +F
Ctrl 파일 검색 및 열기 +P``Cmd +P
Ctrl 줄로 이동 +G +:line_no``Cmd +G +:line_no
중단점 Ctrl 추가 +B , 또는 라인 번호 Cmd를 클릭하세요. +B , 또는 라인 번호를 클릭하세요.
스크립트 실행 일시 중지/재개 F8 F8
다음 함수 호출 F10 건너뛰기 F10
다음 함수 호출 F11로 들어갑니다. F11
3:코드에 소스 맵 사용
여러분이 좋아할 가장 멋진 기능 중 하나는 소스 맵을 통해 즉석에서 동적 스크립트를 디버깅하는 것입니다.
모든 스크립트는 DevTools의 Source 탭에서 시각화할 수 있습니다. 소스 탭에는 모든 JavaScript 소스 파일이 있습니다. 그러나 코드 편집기의 코드는 eval()를 통해 실행됩니다. 브라우저 프로세스 내의 단순히 가상 머신(VM)이라고 불리는 컨테이너에 있습니다.
지금쯤 짐작하셨겠지만 우리 코드는 실제로 파일 이름이 없는 스크립트입니다. 따라서 소스 탭에는 해당 항목이 표시되지 않습니다.
해킹이 시작됩니다!
Source Maps을 활용해야 합니다. 편집기에서 JavaScript에 이름을 지정합니다. 매우 간단합니다:
우리가 Factorialize 챌린지에 참여하고 있고 코드는 다음과 같다고 가정해 보겠습니다.
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
//# sourceURL=factorialize.js를 추가하기만 하면 됩니다. 코드 상단, 즉 첫 번째 줄:
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
그리고 유레카가 바로 그것입니다!
이제 DevTools를 열고 파일 이름을 검색하세요. 중단점을 추가하고 디버그하여 즐겨보세요!
디버깅에 대한 추가 정보:
- 버그 퇴치를 위한 초보자 가이드
- 초보자를 위한 디버깅 팁과 요령
- 브라우저의 디버깅 콘솔을 최대한 활용하는 방법
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요