- vừa được xem lúc

Blog#34: Nodejs Express Debug trên VSCode - [Express Tutorial - Part 7/10] 😊 (Series: Bí kíp Javascript - PHẦN 29)

0 0 13

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😉. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😊.

Việc debug một ứng dụng NodeJS nhỏ hoặc một function nghi ngờ là có vấn đề có thể dễ dàng debug bằng các phương pháp đơn giản. Tuy nhiên, trong một ứng dụng Express, khi sự cố không thể được định vị cho một function hoặc khối đơn lẻ, chúng ta có thể dễ dàng debug end-to-end bằng cách sử dụng trình debug VSCode.

Các điều kiện tiên quyết để thực hành được ví dụ trong bài viết này là:

  1. Có sẵn một Express application
  2. Postman để kích hoạt request
  3. Đã cài đặt Nodemon
  4. typescript được sử dụng trong ví dụ, nên ts-node cũng phải được cài đặt.

Code được sử dụng trong ví dụ dưới đây có thể được tìm thấy ở đây .

Nói qua về Logic của ví dụ này

Đối với mỗi user, ngày xác nhận sẽ có trong dữ liệu. Nếu status của user đã được yêu cầu, ứng dụng sẽ trả về "Active" nếu ngày xác nhận của user là trong vòng 365 ngày qua, nếu không status sẽ được trả về là "Inactive".

Request: GET/user-status/:userId

Thiết lập VSCode Debugger

Tất cả các configure được thiết lập trên VSCode Debugger sẽ có trong .vscode/launch.json. Bạn có thể tự động tạo tệp khởi chạy này bằng cách sử dụng “create a launch.json file” được đánh dấu trong hình ảnh bên dưới và chọn configure Node-Js mà bạn có thể thay thế sau này hoặc tự tạo tệp khởi launch.json và thêm code bên dưới.

Tự động tạo tệp launcher.json

// Hoặc bạn có thể tự tạo tệp với configure trống
{ "configurations": []
}

Configure là một mảng các đối tượng. Bạn có thể thêm nhiều configure như debug Unit Test, Debug Chrome cho giao diện user, v.v. Đối với ví dụ của chúng ta, chúng ta sẽ sử dụng Node.js: Nodemon Setup.

Chọn Cài đặt Nodemon sẽ thêm configure bên dưới.

{ "configurations": [{ "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "Debug Express", "program": "${workspaceFolder}/app.ts", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" }]
}

Đôi khi trong dự án file app.ts này cũng sẽ nằm vị trí khác lúc đó bạn cũng sẽ config lại cho phụ hợp nhé.

{
.... "program": "${workspaceFolder}/src/app.ts",
....
}

Hãy bắt đầu debug nào

Hiện mình đã thiết lập một breakpoint tại tệp app.ts như hình bên dưới và trình debug được khởi động bằng cách nhấn vào nút màu xanh lụcDebug panel. Khi trình debug đã sẵn sàng, hãy kích hoạt request GET từ Postman. Trình debug bây giờ sẽ đến breakpoint của chúng ta.

Debug

Như bạn có thể nhận thấy, di chuột qua userId sẽ hiển thị value của nó. Ngoài ra, thêm nó vào WATCH ở phía bên trái sẽ hiển thị value miễn là nó nằm trong phạm vi của ngữ cảnh hiện tại.

Nhấp vào mũi tên xuống (tùy chọn thứ 3) trong các điều khiển Debug, sẽ đưa chúng ta vào function getUserStatus. Sau khi vào, chúng ta nhận được thông tin user và giả sử chúng ta phải thay đổi ngày xác nhận thành một ngày khác để tái hiện Bug hoặc chỉ đơn giản là muốn test thử.v.v. Chúng ta có thể dễ dàng làm như vậy bằng cách chọn “Set Value” trong menu chuột phải của trường.

Khi quá trình debug hoàn tất, nhấp vào Play trong điều khiển debug sẽ đưa bạn đến breakpoint tiếp theo nếu có, nếu không, bạn sẽ nhận được response trong Postman.

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tổng hợp các VS Code Extension bá đạo bạn nên có

Giới thiệu. Hiện tại, mình mới làm quen với VS code. Qua 1 thời gian tìm hiểu, mình thấy VS code khá là mạnh, nhất là về khoản có thể cài thêm ứng dụng mở rộng (extension). Dracula Official Theme.

0 0 50

- vừa được xem lúc

Là lập trình viên, bạn đã từng nghe nói đến .editorconfig?

Hôm kia tình cờ lân la lên thư viện PaperCSS trên GitHub, mình phát hiện ra project của họ có sử dụng file .editorconfig. Tò mò vì chả biết đó là gì, mình bắt đầu tìm hiểu thử và thực sự bất ngờ về công dụng của nó. Và tìm hiểu .

0 0 29

- vừa được xem lúc

Swift Development with Visual Studio Code

Visual Studio Code (VSCode) là một trình soạn thảo văn bản và mã nguồn mở đa nền tảng của Microsoft. Đây là một trong những dự án nguồn mở thú vị nhất hiện nay, với các bản cập nhật thường xuyên từ hàng trăm cộng tác viên.

0 0 34

- vừa được xem lúc

JSON Server 04 - Gọi API trực tiếp trong VSCode với Rest Client extension ?

Quá xịn với extension của VSCode giúp mình có thể gọi và xem kết quả của rest api ngay trực tiếp trong VSCode hehe . . #json_server. #rest_api.

0 0 35

- vừa được xem lúc

JSON Server 12 - Hướng dẫn đẩy code lên github lần đầu ?

Cùng mình tạo repository mới trên github và đẩy code lên github lần đầu nhé . . #json_server. #github.

0 0 42

- vừa được xem lúc

Những Tính Năng Hay Trong Visual Studio Code (VSCode)

Giới thiệu. Visual Studio Code là một trong những công cụ soạn thảo văn bản lập trình tốt nhất.

0 0 35