콘솔 사용을 중지합니다.log`, 당신의 개발 도구를 사용하기 시작합니다🛠️

많은 상황에서 우리는 원본 코드를 바꾸지 않은 상황에서 코드에 무슨 문제가 생겼는지 보고 다시 변경을 추진하기를 희망한다. 우리가 사용하는 것이 로컬 환경이든 생산 환경이든.대부분의 사람들은 전체 코드 라이브러리에서 console.log 문장을 작성한 다음에 오류가 발생한 곳을 한 걸음 한 걸음 찾는다.초보자에게는 가능하다. 만약 당신이 원본 코드에 접근할 수 있다면. 그러나 이렇게 많은 시간을 낭비하고 싶지 않거나, 심지어는 원본 코드에 접근할 권한도 없다.

개발자 도구

오늘날 모든 주류 브라우저에는 개발 도구(DevTools)가 있다.우리 네트워크 개발자들에게 그것들을 이해하는 것은 매우 중요하다. 왜냐하면 우리는 그것들을 일상적인 드라이버로 우리의 응용 프로그램을 테스트하고, 그것들이 배치된 후의 외관을 볼 뿐만 아니라, 문제가 발생할 때, 우리는 그것들을 효율적으로 찾기를 원하기 때문이다.
비결을 알면 개발 도구가 매우 편리할 것이다.DevTools에는 많은 기능이 있다.제 글Chrome DevTools can do that?과 FireFox DevTools can do that?을 참고하여 그 중 일부를 알아보세요.그러나 본고에서 우리는 디버깅 체험에만 주목한다.

벌레.

공통점을 가지기 위해서, 우리는 버그를 복구해야 한다.나는 this demo 을 만들었고, Glitch 에서 일할 것이다.이 프레젠테이션에서 날짜를 선택한 다음 '나이 계산' 단추를 누르십시오.그것은 너의 나이를 계산해서 밑에 나타낼 것이다.
그러나 때로는 나이를 실제 나이보다 1년 높게 계산하는 오류가 있다.우리는 이 문제를 어떻게 해결하는지 연구할 것이다.

DevTools 디버거

크롬과 Firefox는 모두 디버거 부분이 있는데, 우리는 본문에서 사용할 것이다.나는 엣지를 입지 않을 것이다. 왜냐하면 그것은 크롬과 같기 때문이다.

크롬

Windows에서 Ctrl + Shift + J 또는 Ctrl + Option + J를 사용하여 Chrome에서 개발 도구를 열 수 있습니다.
를 연 다음 소스 탭으로 이동합니다.페이지에서 사용할 파일을 확인할 수 있는 파일 탐색기 창이 왼쪽에 표시됩니다.그 다음은 중간 편집기 창입니다. 내비게이션 창에서 파일을 눌러서 내용을 보고 브라우저에서 로컬로 편집할 수 있습니다.마지막으로 JavaScript 디버그 창을 볼 수 있습니다. 이 기능 세트는 곧 알게 될 것입니다.

💡 If you resize the DevTools you might see these panes in different positions.

불여우

Firefox에서는 Windows에서 Ctrl + Shift + I 또는 Ctrl + Option + I를 사용하여 웹 개발자 도구를 열어야 합니다.
열고 debugger 옵션을 누르십시오. 이것은 이전에 보았던 것과 매우 비슷합니다.왼쪽에는 탐색 창이 표시되고, 옆에는 편집기 창이 표시되며, 왼쪽 (또는 아래, 열린 DevTools의 너비에 따라) 은 디버그 창입니다.

브레이크 설정

디버깅에 있어서 흔히 볼 수 있는 방법은 전체 코드 라이브러리에서 console.log 문장을 사용하는 것이다. 이것은 때때로 남용될 수 있다.

const yo = document.querySelector('#yo');

function getAge() {
    console.log('Getting the date of birth value');
    const dateString = document.querySelector('#age').value;
    console.log(`date of birth is ${dateString}`);
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    console.log(`age is ${age}`);
    var m = today.getMonth() - birthDate.getMonth();
    console.log(`Birth month is ${m}`);
    if (m < 0 || (m = 0 && today.getDate() < birthDate.getDate())) {
      console.log('The birth month is negative or is zero, we need to reduce the age by one year');
      age--;
      console.log(`Real age is ${age}`);
    }
   yo.textContent = age;
}

그리고 컨트롤러를 보고 버그가 어디에 있는지 확인하세요.그러나 이 과정은 매우 느려서 당신의 업무 효율에 큰 영향을 미친다.단점이 어떻게 우리가 관건에 빨리 도달할 수 있도록 도와주는지 봅시다.console.log 문장에 비해 단점은 실시간적인 장점을 가지고 있습니다. 이 문장에서 코드의 배치를 기다리고 컨트롤러를 검사해야 합니다.이외에 console.log 문장에 대해 원하는 값을 명시적으로 언급해야 하며, 인터럽트 디버거에 모든 값을 표시합니다.
이제 단점의 위치를 어떻게 찾는지 한 걸음 뒤로 물러서자.이런 상황에서 당신은 나이가 때로는 옳다고 생각하고, 다른 상황에서는 달에 달려 있다.따라서 파일을 찾아서 브레이크를 if 조건이 있는 위치에 설정할 수 있습니다.
다른 경우 코드 라이브러리가 더 크거나 팀의 초보일 수도 있고 페이지의 절차를 따르는 것이 의미가 있습니다.우리의 예에서 사용자는 날짜를 선택한 다음 나이 계산 단추를 눌렀다.
배후의 논리는 클릭 아래에서 발생하는데, 우리는 클릭 이벤트 감청기에 단점을 설정하는 것이 가장 좋다.사건 탐지기의 단점은 바로 이를 위해 설계된 것이다.

크롬

Chrome의 디버그 페이지에서 이벤트 탐지기 중단점을 클릭하고 섹션을 확장합니다.그런 다음 마우스 범주를 찾아 클릭 이벤트를 선택합니다.

calculate age 단추를 누르면 이벤트 탐지기가 실행될 때 DevTools가 정지됩니다.복구 스크립트 실행을 눌러야 할 수도 있습니다
만약 당신이 Glitch와 같은 플랫폼을 사용한다면 당신의 응용 프로그램은 필요 없습니다.인터럽트가 HTML의 단추에 도착했을 때, 단행으로 함수 를 누르면 우리의 함수 getAge 에 들어갑니다.일단 당신이 원하는 기능에 들어가면, "스텝"단추를 누르거나 F10을 누르면 한 줄씩 걸을 수 있습니다.

불여우

같은 방법으로 Firefox에서 이벤트 탐지기 인터럽트를 마우스로 누르면 디버거 창에서 이벤트 탐지기 인터럽트 부분을 펼친 다음 마우스를 펼치고 이벤트를 선택할 수 있습니다.

사용하면 앞에서 설명한 절차에 따라 조작할 수 있습니다.우선calculate age(나이 계산) 단추를 누르면 디버거가 첫 번째 함수를 호출할 때 자동으로 정지됩니다.Glitch 또는 CodePen 같은 플랫폼을 사용하는 경우 이를 수행할 필요가 없으므로 Resume를 누르기만 하면 됩니다.
단추를 누르면 단점이 getAge 함수에서 멈추는 것을 볼 수 있습니다.그런 다음 단계 버튼을 클릭하거나 F11 키를 눌러 기능에 액세스합니다.이 기능에 들어가면 Step over 버튼이나 F11을 눌러 한 줄 한 줄 이동할 수 있습니다.

와이어 브레이크

줄 인터럽트는 오류의 실제 위치를 줄이는 데 주로 사용됩니다.우리의 예에서 우리가 getAge 함수를 통과했을 때 우리는 나이가 연도에 근거하여 계산된 것을 보았고 그 다음에if조건이 하나 있다. 만약에 달이 현재 달보다 작으면 출생월을 줄이고 나이를 1로 줄이는 것을 책임진다.
그래서 만약에 나이가 어떤 상황에서는 정확하고 다른 상황에서는 틀렸다면if조건은 우리가 선단점을 설정해야 하는 곳이라는 것을 대체적으로 알 수 있다.
DevTools에서는 두 가지 방법이 있는데 하나는 위에서 설명한 사건 탐지기의 단점 흐름을 따르는 것이다.그러나 파일 이름을 미리 알았으면 편집기 창에서 파일을 열고 원하는 줄에 도달할 때까지 스크롤하기만 하면 된다.
도착하면 줄 번호를 누르면 줄 끊기 아이콘이 줄 위에 놓여 단점의 설정 위치를 알 수 있습니다.브레이크를 다시 클릭하면 브레이크가 삭제됩니다.

현재, "나이 계산"단추를 누르면, 프로그램은if 조건에서 정지됩니다.이 섹션은 Chrome과 Firefox에서 동일합니다.

변수 값 확인

if 조건에서 중지할 때 변수의 값을 보려면 Chrome의 디버거 창의 Scope 섹션이나 Firefox의 Scopes 섹션을 보십시오.

크롬

불여우

벌레를 발견하다

이제 잘못이 어디에 있는지, 그리고 그것을 어떻게 복구하는지 봅시다.만약 당신이 If 조건을 더욱 자세히 관찰한다면, 그 중 두 가지 주요 부분을 발견할 수 있을 것이다.첫 번째는m < 0월이 0보다 작은지, 두 번째는m = 0 && today.getDate() < birthDate.getDate()월이 0인지, 오늘이 생일보다 작은지 검사한다.
지금 우리는 누군가가 등호 연산자가 아니라 등호를 사용했다는 것을 알고 있는데, 이것이 이 오류를 초래했다.=로 바꾸고===Ctrl+s를 누르면 변경 사항을 저장할 수 있습니다.인터럽트를 남기거나, 인터럽트를 삭제하고, 오류가 복구되었는지 확인하기 위해 날짜를 테스트할 수 있습니다.그러나 몇 가지 테스트를 통해 우리는 이 오류가 이미 복구되었다는 것을 알았다.이 함수를 위해 테스트를 작성할 때가 되었다. 그러면 너는 다시는 같은 오류를 만나지 않을 것이다😁.

콘솔 창

브라우저의 콘솔 창에서 표현식을 계산할 수 있다는 것을 잊지 마십시오.예를 들어, 당신은 간단하게 당신의 상황을 컨트롤러에 놓고 되돌아오는 true 인지 되돌아오는 false 인지 볼 수 있다.

또 뭐 있어요?

또한 조건true이 지정된 경우에만 트리거되는 조건부 중단, 캡처 및 캡처 예외가 없는 중단, URL이 설정한 하위 문자열과 일치할 때 트리거하는 XHR 중단과 같은 다양한 중단점을 사용할 수 있습니다.에서 XHR 브레이크를 시도해 보겠습니다. DevTools를 열고 debug 창으로 이동하여 XHR 브레이크 부분을 엽니다.상자를 누르면 줄을 추가하고 raw 을 입력하고 enter 키를 누르십시오.페이지를 새로 고치면 요청을 할 때 인터럽트가 발생합니다.현재, 당신은 우리가 앞에서 본 것과 같은 기술을 사용하여 코드를 삽입하고, 유사한 단점을 설정하여 디버깅을 진행할 수 있습니다.

작은 올가미

주의해야 할 점은 DevTools를 사용하면 디버깅 중인 함수가 기교가 필요한 범위 내에 있는지 확인해야 한다는 것이다.이 함수를 실행하려면 함수가 역할 영역의 어느 위치에 줄 인터럽트를 설정한 다음 코드가 줄 인터럽트에서 일시 정지될 때 인터럽트를 터치하고 DevTools 컨트롤러에서 호출해야 합니다. debug()

(function () {
  function hello() {
    console.log('hello');
  }
  function world() {
    console.log(' world');
  }
  hello(yo); // This works.
  world();
})();
debug(hello); // This doesn't work. hey() is out of scope.

요약

우리는 DevTools의 강력한 기능과 코드의 오류를 발견하고 복구하는 데 도움을 줄 수 있는 것을 보았다.따라서 사용을 중지console.log하면 당신의 개발 도구를 더욱 잘 이해할 수 있습니다.즐거움❤️.