댓글 검색 목록

[javascript] 무엇이든 디버깅 : 기본

페이지 정보

작성자 운영자 작성일 20-05-11 12:02 조회 865 댓글 0

앞으로 몇 주 안에 전문적인 방법으로 JavaScript 및 TypeScript 코드를 디버깅 하는 방법을 살펴 보겠습니다.

'console.log'를 뿌려 놓는 대신 Visual Studio Code에 내장 된 디버거를 사용하는 방법을 배웁니다.

https://charlesagile.com/debug-series-nodejs-browser-javascript

디버거를 사용하면 프로그램이 실행되는 동안 프로그램을 열고 상태, 변수를 보고 데이터 흐름을 단계별로 일시 중지하고 관찰 할 수 있습니다.

코드 스니펫을 실행하고 런타임 환경에서 아이디어를 시도 할 수도 있습니다. 중지하지 않고 코드를 변경하고 (console.log 추가) 다시 시작하지 않아도 됩니다. 디버거를 사용하면 문제를 해결하고 코드베이스를 훨씬 빠르게 이해할 수 있습니다.

우리는 의심스러운 간단한 Node.js 코드로 시작하고 앞으로는 브라우저 앱, Express 서버, GraphQL, TypeScript, 서버리스, Jest 테스트, 스토리 북 디버깅을 살펴볼 것입니다.

하지만 기본 사항을 먼저 정리하겠습니다! 서버 측 Node.js에 관심이 없더라도 이 소개를 계속 진행하는 것이 좋습니다.

코드 받기

이 시리즈의 Git 저장소 : https://github.com/thekarel/debug-anything

첫 번째 세션의 코드는 매우 간단합니다. 계속해서 빈 폴더의 index.js에 복사하여 붙여 넣습니다.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const server = http.createServer((req, res) => {
  const name = 'World'

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`Hello, ${name}!\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});

이제 VS Code에서 폴더를 여십시오.

지금까지 모든 것이 제대로 작동하도록 하려면 다음을 실행하십시오.

node index.js

... 및 http://127.0.0.1:3456을 방문하십시오-Hello, World!가 표시됩니다.

지금 node index.js 명령을 중지해야 합니다. 그렇지 않으면 추악한 오류가 발생합니다. 곧 EADDRINUSE 오류를 수신하십시오.?

코드 자체는 간단합니다. HTTP 서버를 실행하고 "Hello, World!"로 모든 요청에 응답합니다. 인상적입니까? 그러나 이 간단한 코드는 디버깅의 기본 개념을 배우기에 충분합니다.

새로운 기능 추가

서버에 기능을 추가해 보겠습니다. 하드 코딩 된 메시지 "Hello, World!"를 반환하는 대신 쿼리에서 이름을 선택하므로 http://127.0.0.1:3456?name=Coco가 응답합니다. 안녕하세요! Coco!

또한 어떻게 해야 할지 모른다고 가정 해 봅시다.;) 서버를 실행하고, 요청을 보내고, Coco라는 이름이 나타나는 곳을 보는 것이 좋지 않습니까? 한번 해보자. 디버거를 시작하자!

디버거를 시작하십시오

index.js가 VS Code에서 열려 있는지 확인하고 디버거 아이콘을 클릭하고 실행 및 디버그를 클릭 한 다음 Node.js를 클릭하십시오.

서버가 이제 디버그 모드에서 실행 중입니다! http://127.0.0.1:3456?name=Coco를 방문하십시오. 차이는 없지만 기본 메시지가 계속 표시됩니다.

다음으로 서버에 다음에 도달 할 때 실행을 일시 중지하는 중단 점을 코드에 추가하겠습니다. 편집기의 왼쪽 여백에서 줄 번호를 클릭하면 됩니다.

http://127.0.0.1:3456?name=Coco-VS 코드를 방문하여 서버를 일시 중지하고 다음을 방문하십시오.

쿼리에서 이름이 끝나는 위치를 찾아서 친절한 인사말을 반환 할 수 있습니다. 왼쪽 사이드 바를 확인하십시오. 변수 섹션이 나타납니다. 로컬에서 IDE는 함수의 로컬 범위에 있는 모든 변수를 보여줍니다. 유망 해 보이는 것이 있습니다 : req :

요청 쿼리 문자열이 req.url에 있다는 것을 알았으므로 약간의 도움을 받아 스크립트를 다음과 같이 변경할 수 있습니다.

const http = require('http');
const url = require('url'); // ?

const hostname = '127.0.0.1';
const port = 3456;
const serverUrl = `http://${hostname}:${port}`

const server = http.createServer((req, res) => {
  const {name} = url.parse(req.url, true).query;  // ?

  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end(`Hello, ${name}!\n`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at ${serverUrl}`);
});