디버깅을 통해 노드 효율 향상

소개하다.

이 자습서는 Visual Studio 코드를 사용하여 NodeJS express 응용 프로그램을 디버깅하는 방법을 보여 줍니다.당신은 노드 전문가가 되지 않아도 디버깅을 할 수 있으며, 초급 지식만 갖추면 됩니다.

왜 컨트롤러가 아닌 진정한 디버거를 사용해야 합니까?로그()

내가 아직 중급 엔지니어였을 때, 어떻게 디버거를 사용하는지 배워서 나의 업무 효율을 향상시켰다.나는 몇 시간 안에 아마도 하루가 걸려야만 완성할 수 있는 일을 완성할 수 있다.버그를 복구하고 구축하는 기능은 훨씬 쉽다.
나는 내가 작성하지 않은 익숙하지 않은 코드 라이브러리를 탐색할 때 디버깅이 특히 유용하다는 것을 발견했다.가장 복잡한 논리라도 그 결과는 이상한 방식으로 짜여진 것을 쉽게 볼 수 있다.한 줄 한 줄 그것을 운행할 수 있고, 일이 어떻게 변화하는지 볼 수 있을 때, 더욱 복잡하고 복잡한 논리를 추리하기 쉽다.
만약 console.log()을 사용하여 값을 컨트롤러에 인쇄한 적이 있다면, 복잡한 것들을 디버깅하려고 한다면, 얼마나 지루해질지 알 수 있습니다.이것은 한 번에 하나의 값을 인쇄합니다. 볼 값마다 console.log() 문장을 새로 작성해야 합니다.보고 있는 값이 변경되면 console.log()을 다시 입력해야 합니다.이것은 마치 눈을 가리거나 어둠 속에서 사방을 정탐하는 것 같다.
진정한 디버거에 대해서 이것들은 모두 필요한 것이 아니다.코드에 인터럽트를 설정하고 프로그램을 실행합니다.프로그램이 인터럽트를 설정한 줄에 도착했을 때, '디버깅' 옵션에서 범위 내의 모든 변수를 볼 수 있습니다.한 동작만 하면 한 번에 하나의 값만 보는 것이 아니라 모든 내용을 볼 수 있습니다.
나는 처음에는 단지 자신의 응용 프로그램 코드를 디버깅했을 뿐이지만 시간이 지날수록 나이가 많아졌다. 나는 디버깅 프레임워크 코드(예를 들어 express 자체의 코드)를 통해 좋은 통찰력을 얻을 수 있다는 것을 발견했다.나는 문서에 열거되지 않은 문제의 답안을 찾을 수 있다.

선결 조건

이 설명서에 Visual Studio Code 및 NodeJS을 설치해야 합니다.localhost이 아닌 공공 URL을 사용해서 프로그램을 실행하고 디버깅하려면 expose.sh이 필요합니다.

Example express 응용 프로그램

나는express 예시 프로그램을 사용할 것을 건의합니다. 전체 코드는 아래와 같습니다

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    const foo = "bar";
    const bar = "baz";
    const one = 1;
    const two = 2;
    const three = 2;
    const five = two + three;

    res.send('2 + 3 = ' + five);
});

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

장치의 어느 위치에 새 폴더를 만들고 이 코드를 복사해서 app.js이라는 파일에 붙여넣습니다.
항목을 설정하고 프롬프트에 따라 npm init을 사용합니다.
그리고 npm install --save express을 실행하여 express 의존항을 설치합니다.node app.js 실행 코드를 사용할 수 있습니다.브라우저에서 http://localhost:3000을 클릭하면 이 코드에 오류가 있는 것을 즉시 볼 수 있습니다. 출력이 정확하지 않기 때문입니다.

아직 다 못 고쳤어요.너는 이 숫자들을 보고 머릿속에서 문제의 소재를 찾아낼 수 있다.반대로, 우리는 디버깅을 사용하여 문제를 매우 쉽게 발견하고 당신의 뇌를 절약할 것입니다.
우선, Microsoft의 소스 IDE인 Visual Studio 코드 (vscode) 를 설정해야 합니다.아직 없으시면 code.visualstudio.com에서 무료 사본을 받으세요.Linux, Mac 및 Windows용 버전이 있습니다.

vscode 설정

VScode는 디버깅을 설정하기 가장 쉬운 IDE 중 하나입니다. 간단한 프로필로 제어되기 때문입니다.즉, 수동으로 설정하거나 다른 IDE를 사용하는 것처럼 여러 설정을 클릭할 필요 없이 이와 같은 설명서에서 구성을 복사하여 붙여넣을 수 있습니다..vscode이라는 폴더 만들기
그런 다음 파일 .vscode/launch.json을 만들고 다음을 붙여넣습니다.

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Express App",
            "program": "${workspaceFolder}/app.js",
            "request": "launch",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }
    ]
}

브레이크 설정

인터럽트는 국부 변수와 프로그램의 일반 상태를 검사할 수 있도록 코드에 설정된 프로그램이 멈추기를 원하는 위치입니다.vscode에서 중단점, 정지된 줄 번호 왼쪽에 빨간색 점이 있습니다.줄 번호 왼쪽의 영역을 클릭하기만 하면 단점을 설정할 수 있습니다.
몇몇 숫자가 잘못 추가된 것을 볼 수 있기 때문에 줄 번호 왼쪽 구역을 클릭하여 res.send('2 + 3 = ' + five) 줄에 단점을 설정합니다.클릭한 곳에는 다음과 같은 14번째 줄의 빨간색 점이 나타납니다.

우리는 왜 five의 값이 4이지 5이 아닌지 알고 싶다.

디버그를 통해 응용 프로그램 시작

vscode 창 왼쪽에 있는 디버깅 아이콘을 누르면 '실행 및 디버깅' 창을 열 수 있습니다.보아하니 이렇다.

왼쪽 창 상단에는 다음이 표시됩니다.

"Launch Express App"왼쪽에 있는 녹색 화살표 아이콘을 클릭합니다.
express 프로그램이 현재 vscode 내부에서 시작되며 전면적인 디버깅 지원을 제공합니다.vscode 창 밑에 있는 '디버그 컨트롤러' 창에서 시작하는 것을 볼 수 있습니다.

이 프로그램은 현재 vscode에서 실행 중이며 디버깅을 지원합니다.

터치 브레이크

vscode에서 프로그램을 실행한 후 브라우저에서 http://localhost:3000으로 이동합니다. (또는 이 링크를 누르십시오.)
그리고 단점을 명중시킨다.그것은 보기에 다음과 같다.

여기에 몇 가지 일이 있으니, 우리 아래에서 설명해 봅시다.RUN AND DEBUG의 왼쪽에서 국부 변수 목록을 볼 수 있습니다.req은expressrequest대상,res은expressresponse대상이다.응용 프로그램에 발표된 조회 매개 변수와 데이터를 보려면 이 정보를 보십시오.
중단점이 있는 줄에서 범위 내의 모든 부분 변수와 값을 볼 수 있습니다.console.log()을 사용하여 이 모든 정보를 보려면 변수마다 기록해야 합니다.디버거와 인터럽트를 통해 모든 내용을 즉시 볼 수 있습니다.res.send행 위에서 나는 몇 가지 기본적인 산술을 했다.국부 변수 목록에서 결과를 볼 수 있습니다.예를 들어 two의 값은 2이다.
지금 three의 값을 보세요.분명히 3이 아니라 2이어야 하기 때문에 오류가 존재한다.three의 값을 3으로 업데이트한 다음 애플리케이션을 중지하고 다시 시작하면 출력이 정확합니다.

공통 URL을 사용하여 디버깅

컴퓨터에서만 액세스할 수 있는 localhost URL을 사용하여 디버깅하는 법을 배웠습니다.expose을 사용하면 터미널 명령 하나만 있으면 로컬에서 실행되는express 프로그램에 공공 HTTPS URL을 제공하여 다른 사람과 공유할 수 있습니다.이 공용 URL의 모든 트래픽은 보안 터널을 통해 localhost으로 자동으로 라우팅됩니다.
왜 이러는 거야?응용 프로그램에 API를 구축하고 있다면, 전방 (예: React) 개발자와 협력하고 있으며, 이 개발자는 당신의 API와 통합될 것입니다.이것은 express의 매우 흔히 볼 수 있는 용례이다.
인터럽트를 설정한 다음에React 개발자가 응용 프로그램을 터치해서 API를 호출할 수 있도록 할 수 있습니다.그런 다음 요청을 검토하고 API를 업데이트하여 처리할 수 있습니다.
다른 용도는 웹훅이다.웹훅 통합이 필요하다면 웹훅 제공 프로그램에서 공공 URL을 설정하고 로컬에서 실행되는 프로그램에 요청을 할 수 있습니다. 이 프로그램은 vscode에서 디버깅을 하고 있습니다.
웹 훅 공급자가 무엇을 보내고 있는지, 그들의 문서를 읽을 필요조차 없다.이 요청을 이용하기 위해 어떤 코드를 작성해야 하는지 정확히 알고 있습니다.그들의 문서가 좋든 나쁘든 간에, 너는 지금 어떻게 해야 할지 안다.expose을 설치하려면 Installation Page으로 이동하여 지침을 따르십시오.Linux 및 Mac의 복제 붙여넣기 설치입니다.Windows는 exe을 다운로드할 수 있습니다.expose 3000을 실행하면 다음과 같은 출력이 표시됩니다.

$ expose 3000
http://mofgjp.expose.sh is forwarding to localhost:3000
https://mofgjp.expose.sh is forwarding to localhost:3000

현재 인터럽트가 설정되어 있고 vscode에서 프로그램이 실행 중인 상태에서 브라우저에 표시된 HTTPS URL로 이동합니다.localhost에 요청하신 것처럼 중단점이 명중됩니다.더 즐겁게 놀고 싶으면 다른 컴퓨터나 핸드폰에서 이 URL을 클릭해 보세요. 인터럽트는 여전히 클릭됩니다.
현재, 통합 중인 다른 개발자, 웹훅 공급자, 그리고 이 URL을 공유하고 싶은 사람들과 공유할 수 있습니다.

디버그 콘솔 사용

디버그 컨트롤러의 아주 좋은 작은 기능은 디버그 컨트롤러입니다.제목이 DEBUG CONSOLE인 창에서 디버깅을 시작하면 창 아래쪽에 열립니다.devtools에서 가장 좋아하는 웹 브라우저를 위해 컨트롤러를 사용한 적이 있다면, 백엔드 NodeJS 코드를 제외하고는 거의 같습니다.
코드를 수정하지 않은 상태에서 표현식을 시도하기를 원할 수도 있습니다.디버그 콘솔에서 one + three을 입력하십시오.결과 4이 콘솔에 나타납니다.

디버그 콘솔에서 JavaScript 코드를 실행할 수 있습니다.함수를 실행할 수도 있습니다.호출 중인 함수가 원하는 동작을 실행하지 않았다고 가정하십시오.디버그 컨트롤러에서 원하는 방식으로 실행될 때까지 다른 파라미터를 사용해서 코드를 업데이트할 수 있습니다.

다음 줄로 건너뛰기

const foo = "bar" 줄에 새 단점을 설정합니다.vscode에서express 프로그램을 시작하고 브라우저의 URL을 누르십시오.
단점이 명중될 것이다.디버거의 유용한 기능은 다음 줄로 실행할 수 있기 때문에 프로그램을 한 줄 한 줄 실행할 수 있습니다.
다음 줄로 건너뛰려면 건너뛰기 아이콘을 누르십시오:
만약 당신이 그것을 계속 눌렀다면, 프로그램은 현재 방법이 없는 더 많은 줄이 실행될 때까지 다음 줄로 실행될 것입니다.

결론

디버그는 NodeJS 개발자로서 업무 효율을 높일 수 있습니다.오류를 더 빨리 복구하고 익숙하지 않은 코드를 찾아내는 데 더 적은 시간을 들일 수 있습니다.console.log을 사용하여 기록된 값과 달리 디버깅을 통해 모든 내용을 한 번에 볼 수 있습니다.
디버깅을 습득하면 더 이상 console.log을 사용하여 디버깅을 할 필요가 없다.
즐거운 코딩!