디버그 노드.VSCode 디버거의 js Express API
왜?
우리가 소프트웨어를 만들 때, 우리는 오류가 거의 없다.API 생성은 이러한 사실을 무시할 수 없기 때문에 조만간 디버깅을 진행할 것입니다.JavaScript에서 디버그 작업의 첫 번째 사이트는 보통 컨트롤러에 로그인하지만, 디버그를 사용하면 우리에게 더욱 완전한 체험을 제공할 수 있다.
이 강좌에서 Visual Studio 코드 디버깅 Express-based API을 사용하는 방법을 배울 것입니다.
뭐 공부 해요?
Express은'Node.js의 최소한의 웹 프레임워크'입니다.이것은 우리가 함수를 API 단점에 직접 연결할 수 있도록 한다. 이것은 API를 구축하는 신속하고 간단한 방법이다.
Visual Studio Code은 "간소화된 코드 편집기로 디버깅, 작업 운행과 버전 제어 등 개발 작업을 지원합니다."
또한 cURL을 사용하여 API에 요청을 보냅니다.
어떻게
Express 프레임워크를 사용하여 간단한 API를 만들고 콘솔이 아닌 VSCodes 디버깅을 시도합니다.
API 설정
우선, 우리는 새로운 노드를 만듭니다.js 프로젝트와 우리의 의존 항목을 설치합니다.
$ mkdir api
$ cd api
$ npm init
$ npm i express body-parser
index.js 파일을 만듭니다.const express = require("express");
const bodyParser = require("body-parser");
const users = [{ id: 0, name: "admin" }];
const server = express();
server.use(bodyParser.json());
server.get("/users", (_, response) => response.send({ users }));
server.get("/users/:id", ({ params: { id } }, response) => {
const user = users[id];
response.send({ user });
});
server.post("/users", ({ body }, response) => {
const { user } = body;
user.id = users.length;
users.push(user);
response.send({ user });
});
server.listen(9999, () =>
console.log("API running on http://localhost:9999")
);
users 수조를 메모리의 데이터로 저장합니다.관리자 사용자가 초기화합니다.다음은 Express
server을 만들고 bodyParser 패키지의 JSON 중간부품을 사용합니다.POST HTTP 요청 바디에 저장된 JSON 문자열의 값에 액세스할 수 있습니다.그런 다음 세 개의 API 끝점을 만듭니다.두 개의
GET 노드가 있기 때문에 모든 사용자와 특정 사용자의 목록(ID별), 그리고 POST 노드를 요청하여 새 사용자를 만들 수 있습니다.다음 명령으로 API를 시작합니다!
$ node .
API running on http://localhost:9999
API 사용
현재 우리의 API가 시작되고 실행되었습니다. 우리는 cURL을 사용하여 그것을 조회할 수 있습니다.이를 위해서는 새 터미널 창을 열고 다음 명령을 실행해야 합니다.
사용자를 만들려면 다음과 같이 하십시오.
$ curl -H "Content-Type:application/json" -d '{"user":{"name": "kay"}}' localhost:9999/users
{"user":{"id":1,"name":"kay"}}
$ curl localhost:9999/users
{"users":[{"id":0,"name":"admin"},{"id":1,"name":"kay"}]}
$ curl localhost:9999/users/1
{"user":{"id":1,"name":"kay"}}
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
...
users이 아닌 user의 입력 오류가 발생했습니다.POST /users 노드에서 이 문제를 처리하지 않았기 때문에 Express는 HTML 형식의 오류만 응답했습니다.이것은 간단한 문제 예시로 쉽게 해결할 수 있지만, 실행할 때 어떤 문제가 발생했는지 직접 조사할 수 있도록 VSCodes 디버거를 시작합시다.
VSCodes 디버거 사용
디버그 노드.VSCode가 있는 JSAPI는 간단합니다.
우리는 디버깅할 단점을 검사하고 단점이 터치하는 함수 안에 단점을 설정합니다.이것은 왼쪽 단추로 줄 번호를 눌러서 완성한 것이다.15줄을 봅시다.
POST /users 단점 함수의 첫 줄일 것입니다.
그런 다음 위쪽 메뉴에서 디버그 -> 를 클릭하여 디버그를 시작하거나 F5 키를 눌러 디버거를 시작합니다.
VSCode는 응용 프로그램과 디버거를 시작합니다.그것은 또한 노드를 통해 둘을 연결할 것이다.js의 디버깅 프로토콜입니다.
그리고 우리는 cURL 오류를 초래한 요청을 다시 보내고 무슨 일이 일어났는지 찾아내려고 합니다.
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
POST /users의 함수에 연결되어 첫 줄의 단점에서 실행을 중지합니다.만약 우리가 코드 왼쪽의 사이드바를 본다면, 우리는 블록과 부분과 같은 각 피드 종류를 포함하는 변수 종류를 볼 수 있다.Local을 열어 안에 무엇이 있는지 봅시다.
보시다시피 우리는 두 가지 국부 변수가 있는데
body은 Object유형이고 response은 ServerResponse유형이다.F10의 다음 줄로 넘어가서 무슨 일이 일어날지 봅시다.
모든 것이 예상대로 진행되는 것 같다.
우리 다시 다음 줄로 넘어가자.
번영!
왠지 모르게 우리는 마침내 완전히 다른 코드 라이브러리에 들어갔습니까?
id 대상을 설정한 user을 통해 오류를 만든 것 같습니다. 어떻게 된 일입니까?index.js을 다시 열고 인터럽트를 16줄로 옮기고 F5를 누르면 디버거가 이벤트 순환의 끝까지 실행됩니다.그리고 cURL로 요청을 다시 보내서
user.id을 설정하기 전에 무슨 일이 일어났는지 보십시오.변수/블록 카테고리의 사이드바를 보면
user의 대상이 실제로는 undefined입니다!만약 우리가 변수/국부 종류를 열면, 우리도 원인을 볼 수 있다.
body에는 users의 속성이 있습니다. 그러나 15번째 줄에서 user 변수를 해체하려고 합니다. 이로 인해 16번째 줄에서 user.id을 쓰는 중 오류가 발생했습니다.이제 우리는 문제를 해결했다. 디버거를 멈추고 복구하자.
server.post("/users", ({ body }, response) => {
const { user } = body;
if (!(user instanceof Object))
return response.send({ error: '"user" object missing in JSON!' });
user.id = users.length;
users.push(user);
response.send({ user });
});
$ node .
API running on http://localhost:9999
$ curl -H "Content-Type:application/json" -d '{"users":{"name": "xing"}}' localhost:9999/users
{"error":"\"user\" object missing in JSON!"}
결론
디버그 노드.VSCodes 통합 디버거의 도움으로 js 기반 API는 직접적인 작업입니다.우리는 단지 하나의 단점을 설정할 수 있을 뿐, 추가 코드는 필요 없다.
이 솔루션은 다음과 같은 다양한 실행 시 권장 사항을 제공합니다.
최초로 www.moesif.com에 출판되었다
Reference
이 문제에 관하여(디버그 노드.VSCode 디버거의 js Express API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/moesif/debugging-a-node-js-express-api-in-vscode-debugger-2261텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
