Chrome에서 디버깅하기
더 복잡한 코드를 작성하기 전에 디버깅에 대해 이야기 해 봅시다.
최신의 모든 브라우저와 대부분의 다른 환경은 "디버깅"을 지원합니다.이 도구는 오류를 훨씬 쉽게 찾고 수정할 수 있도록 해주는 개발자 도구의 특수 UI입니다.
Chrome은 이 기능면에서 가장 기능이 풍부하기 때문에 여기에서 사용하게 될 것입니다.
Chrome 버전은 조금 다르게 보일 수 있습니다.
· Chrome을 엽니다 .
· 개발자 도구를 사용 설정합니다 F12(Mac :) .Cmd+Opt+I
· sources창을 선택하십시오 .
처음으로 할 일이 있습니다.
토글러 버튼 파일이 있는 탭을 엽니다.
그것을 클릭하고를 선택 index.html하고 hello.js트리뷰에서. 표시되는 내용은 다음과 같습니다.
여기서 우리는 세 개의 영역을 볼 수 있습니다 :
1. 자원 영역은 HTML, 자바 스크립트, CSS 및 페이지에 첨부 된 이미지를 포함한 다른 파일을 나열합니다. Chrome 확장 프로그램이 여기에도 표시 될 수 있습니다.
2. 소스 영역은 소스 코드를 보여줍니다.
3. 정보 및 제어 영역은 우리가 곧 살펴볼 것입니다, 디버깅을 위한 것입니다.
이제 동일한 토글러를 클릭 할 수 있습니다. 다시 자원 목록을 숨기고 코드에 약간의 공간을 둡니다.
버튼을 누르면 Esc콘솔이 열립니다. 우리는 거기에 명령을 입력하고를 눌러 Enter실행할 수 있습니다.
명령문이 실행 된 후 그 결과가 아래에 표시됩니다.
예를 들어, 여기 1+2에서 발생 3하고 hello("debugger")아무 것도 반환하지 않습니다, 그래서 결과는 undefined:
예제 페이지 의 코드에서 어떤 일이 일어나는지 살펴 보겠습니다 . 에서 hello.js,
Add breakpoint 4. 코드가 아니라 숫자가 표시됩니다.
중단 점을 설정했습니다. 전화 번호를 클릭하십시오 8.
다음과 같이 표시되어야 합니다 (파란색은 클릭해야 함).
중단 점 : 디버거가 자동으로 자바 스크립트의 실행을 일시 중지 코드의 포인트입니다.
코드가 일시 중지 된 동안 현재 변수를 검사하고 콘솔에서 명령을 실행할 수 있습니다. 즉, 디버깅 할 수 있습니다.
우리는 항상 오른쪽 창에서 중단 점 목록을 찾을 수 있습니다. 이는 다양한 파일에 많은 중단 점이 있을 때 유용합니다.
아래 것을 할수 있습니다.
· 코드의 중단 점으로 빠르게 이동 (오른쪽 창에서 클릭).
· 중단 점을 선택 취소하여 일시적으로 사용 중지합니다.
· 마우스 오른쪽 버튼을 클릭하고 (remove breakpoint)제거를 선택하여 중단 점을 제거하십시오.
· …등등.
조건부 중단 점
줄 번호를 마우스 오른쪽 버튼으로 클릭 하면 조건부 중단 점(add conditional breakpoint) 을 만들 수 있습니다 . 주어진 표현이 true 일 때만 트리거합니다.
이는 특정 변수 값이나 특정 함수 매개 변수에 대해서만 중지해야 할 때 유용합니다.
다음 debugger과 같이 명령 을 사용하여 코드를 일시 중지 할 수도 있습니다 .
function hello(name) {
let phrase = `Hello, ${name}!`;
debugger; // <-- the debugger stops here
say(phrase);
}
이는 코드 편집기에 있을 때 브라우저로 전환하고 개발자 도구에서 스크립트를 찾아 중단 점을 설정하고 싶지 않을 때 매우 편리합니다.
이 예에서는 hello()페이지로드 중에 호출되므로 디버거를 활성화하는 가장 쉬운 방법은 페이지를 다시로드하는 것입니다. 그럼 F5(Windows, Linux) 또는 (Mac)을 누르십시오 .Cmd+R
중단 점이 설정되면 실행은 네 번째 줄에서 일시 중지됩니다.
오른쪽에 정보 드롭 다운을 열어주십시오 (화살표로 표시). 이 코드를 사용하면 현재 코드 상태를 검사 할 수 있습니다.
1. Watch - 모든 표현 식의 현재 값을 표시합니다.
더하기를 클릭하고 +표현 식을 입력 할 수 있습니다 . 디버거는 언제든지 실행 중 값을 자동으로 다시 계산하여 값을 표시합니다.
2. Call Stack - 중첩 된 호출 체인을 표시합니다.
현재 디버거는 내부 hello()호출이며 스크립트가 호출됩니다 index.html(함수가 없으므로 "익명"(anonymous)이라고 함).
스택 항목을 클릭하면 디버거가 해당 코드로 점프하고 모든 변수를 검사 할 수 있습니다.
3. Scope - 현재 변수.
Local지역 함수 변수를 보여줍니다. 소스 값 바로 위에서 강조 표시된 값을 볼 수도 있습니다.
Global 함수 밖의 전역 변수가 있습니다.
this
이제 스크립트 를 추적 할 차례 입니다.
오른쪽 창 상단에 버튼이 있습니다.
-
실행을 다시 시작합니다. 추가 중단 점이 없으면 실행이 계속되고 디버거가 제어를 잃습니다.
실행이 다시 시작되어 내부의 다른 중단 점 say()에 도달하여 일시 중지되었습니다. 오른쪽에 있는 "콜 스택"을 살펴보십시오.
한 번만 더 호출하면 됩니다. 우리는 지금 say().안에 있어요
-
지금 클릭하면 alert표시됩니다. 중요한 것은 alert모든 함수 가 될 수 있다는 것입니다 . 실행은 함수 내부를 건너 뛰어 "단계를 밟습니다".
-
이전과 같지만 중첩 된 함수로 "들어가는"단계. 이 버튼을 클릭하면 모든 스크립트 동작이 단계별로 진행됩니다.
-
실행은 현재 함수의 마지막 행에서 중지됩니다. 우리가 실수로 중첩 호출을 사용하여 그러나 우리에게 관심이 없기 때문에 우리는 최대한 빨리 끝내기를 원합니다.
-
이 버튼은 실행을 이동시키지 않습니다. 중단 점에 대한 대량 온 / 오프.
-
사용 설정되고 개발자 도구가 열려 있으면 스크립트 오류로 인해 자동으로 실행이 일시 중지됩니다. 그런 다음 변수를 분석하여 무엇이 잘못되었는지 확인할 수 있습니다. 따라서 스크립트가 오류로 인해 죽는다면 디버거를 열고 이 옵션을 활성화하고 페이지를 다시로드하여 어디서 죽고 그 시점에서 컨텍스트가 무엇인지 확인할 수 있습니다.
여기까지 계속(Continue to here)
코드 줄을 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴가 열리고 "여기까지 계속"(Continue to here)이라는 훌륭한 옵션이 표시됩니다.
여러 단계를 앞으로 나아가고 싶을 때 유용하지만 브레이크 포인트를 설정하기에는 너무 게으른 편입니다.
로깅
콘솔에 뭔가를 출력하려면, console.log기능이 있습니다.
예를 들어,이 값은 0to 4에서 console로 출력 됩니다.
// open console to see
for (let i = 0; i < 5; i++) {
console.log("value", i);
}
일반 사용자는 출력을 볼 수 없으며 콘솔에 있습니다. 이를 확인하려면 개발자 도구의 콘솔 탭을 열거 나 Esc다른 탭에서을 (를) 누르면 콘솔이 하단에 열립니다.
코드에 충분한 로깅이 있으면 디버거없이 레코드에서 무슨 일이 일어나는지 알 수 있습니다.
스크립트를 일시 중지하는 주요 방법은 세 가지가 있습니다.
1. 중단 점.
2. The debugger statements.
3.
오류 (dev 도구가 열려 있고 단추가 "켜짐"
그런 다음 변수를 검사하고 실행이 잘못된 부분을 확인합니다.
개발자 도구에는 여기에서 다루는 것보다 더 많은 옵션이 있습니다.
전체 설명서는 https://developers.google.com/web/tools/chrome-devtools에 있습니다.
이 장의 정보는 디버깅을 시작하기에 충분하지만 나중에 특히 많은 브라우저를 사용하는 경우에는 개발자 도구의 고급 기능을 살펴보십시오.
아, 그리고 개발자 도구의 여러 곳을 클릭하면 나타나는 내용을 볼 수 있습니다. 아마도 dev 도구를 배우는 가장 빠른 길 일 것입니다.
오른쪽 클릭에 대해서도 잊지 마세요!
