Cách gỡ lỗi các ứng dụng Node.js trong Visual Studio Code

Bản thân việc gỡ lỗi ứng dụng Node.js của bạn trong Visual Studio Code là có thể và đơn giản. Trình chỉnh sửa Mã VS đi kèm với trình gỡ lỗi tích hợp có khả năng gỡ lỗi bất kỳ ứng dụng nào nhắm mục tiêu thời gian chạy Node.js. Điều này có nghĩa là bạn có thể gỡ lỗi JavaScript hoặc bất kỳ ngôn ngữ nào khác biên dịch sang nó (ví dụ: TypeScript).

Bài viết này sẽ hướng dẫn bạn các bước để gỡ lỗi ứng dụng Node.js của bạn trong Mã VS. Bạn sẽ tìm hiểu cách bắt đầu phiên gỡ lỗi, chèn điểm dừng, đính kèm quy trình bên ngoài và gỡ lỗi mã TypeScript bằng bản đồ nguồn.

Những gì bạn cần để bắt đầu

Trước khi bắt đầu, hãy cài đặt cả Node.js và Mã VS trên máy cục bộ của bạn. Phiên bản mới nhất của Node.js hiện có trên trang web chính thức của Node.js. Tương tự, đối với Visual Studio Code, hãy tải xuống phiên bản mới nhất từ ​​trang web VS Code. Để biết hướng dẫn về cách thiết lập Mã VS trên Windows, hãy đọc hướng dẫn thiết lập của chúng tôi.

Bạn cũng cần một dự án Node.js. Bạn có thể tạo một ứng dụng Node.js đơn giản từ đầu hoặc sử dụng một ứng dụng hiện có.

Quá trình gỡ lỗi trong Mã VS

Bắt đầu phiên gỡ lỗi trong trình chỉnh sửa Mã VS khá đơn giản. Mở tệp bằng Mã VS và nhấp vào Chạy và gỡ lỗi trong thanh bên (hoặc nhấn Ctrl + Shift + D trên bàn phím của bạn). Tiếp theo, nhấp vào Chạy và gỡ lỗi để bắt đầu quá trình.

Theo mặc định, Node.js sẽ cố gắng tìm ra môi trường gỡ lỗi cho dự án của bạn. Nhưng nếu quá trình tự động phát hiện không thành công, nó sẽ nhắc bạn chọn đúng môi trường. Đối với hướng dẫn này, môi trường đó là Node.js.

Sau khi bạn đã chọn môi trường, Mã VS kích hoạt trình gỡ lỗi và gắn nó vào quy trình. Bạn có thể thấy đầu ra của mình trong BẢNG GỠ LỖI. Sử dụng thanh công cụ gỡ lỗi ở trên cùng, bạn có thể lặp qua mã, tạm dừng thực thi hoặc kết thúc phiên.

Bạn cũng có tùy chọn tạo tệp cấu hình. Các launch.json tệp cho phép bạn định cấu hình và thiết lập chi tiết gỡ lỗi. Nếu tập lệnh của bạn yêu cầu một đối số, hãy cung cấp các đối số này trong launch.json tài liệu. Nhiều tùy chọn có thể được đặt trên mỗi cấu hình:

 { 
 "version": "0.2.0", 
 "configurations": [ 
   { "type": "node", 
     "request": "launch", 
     "name": "Launch Program", 
     "skipFiles": [ "<node_internals>/**" ], 
     "program": "${workspaceFolder}\index.js" 
   } 
 ]
}
 

Bạn cũng sẽ nhận thấy năm bảng ở phía bên trái của trình chỉnh sửa. Những tấm này là BIẾN, ĐỒNG HỒ, CUỘC GỌI, TẢI ScriptVà ĐIỂM ĐỘT PHÁ:

Khi bạn hoàn tất việc thiết lập cấu hình, hãy chọn và thực hiện chương trình thông qua menu cấu hình.

Đính kèm quy trình bên ngoài

Một phương pháp khác để thiết lập phiên gỡ lỗi Node.js là đính kèm một quy trình bên ngoài. Khởi động chương trình bằng lệnh sau:

 node --inspect index.js
 

Chèn -brk cờ sau –quan sát nếu bạn muốn đính kèm nó trước khi chương trình bắt đầu chạy.

Tiếp theo, mở bộ chọn quy trình trong Mã VS. Điều này liệt kê tất cả các quy trình có sẵn trong môi trường Node.js. Để mở bộ chọn, nhấn Ctrl + Shift + P và tìm Gỡ lỗi: Đính kèm lệnh Node.js.

Nhấp vào lệnh và chọn tùy chọn phù hợp để bắt đầu quá trình gỡ lỗi.

Tạo điểm dừng

Nếu bạn muốn tạm dừng tại các điểm cụ thể trong chương trình của mình để kiểm tra mã, hãy đặt các điểm dừng tại đó. Bạn có thể đặt điểm dừng ở hầu hết mọi nơi trong mã của mình. Điều này bao gồm khai báo biến, biểu thức và nhận xét. Nhưng bạn không thể đặt điểm dừng trong khai báo hàm.

Tạo một điểm dừng khá đơn giản. Khi bạn di chuột sang phía bên trái của số dòng, một vòng tròn màu đỏ sẽ xuất hiện trên mỗi dòng. Xác định số dòng trong mã của bạn nơi bạn muốn chèn điểm dừng. Sau đó nhấp vào dòng đó để thêm điểm dừng:

bên trong ĐIỂM ĐỘT PHÁ ngăn, bạn sẽ tìm thấy tất cả các điểm ngắt được kích hoạt trong dự án của mình. Đây là nơi bạn sẽ quản lý, chỉnh sửa và vô hiệu hóa các điểm dừng. Bạn cũng có thể tạm dừng mã khi ném ngoại lệ hoặc trong trường hợp ngoại lệ chưa được phát hiện. Điều này cho phép bạn kiểm tra sự cố trước khi thoát khỏi quy trình.

Hãy xem các điểm dừng trong hành động. Nhấn vào Phóng để bắt đầu phiên gỡ lỗi. Chương trình sẽ tạm dừng tại breakpoint đầu tiên và đưa ra giá trị để kiểm tra:

Bạn có thể nhấp vào Tiếp tục biểu tượng (hoặc nhấn F5) để chuyển chương trình đến điểm ngắt tiếp theo. Điều này sẽ tiếp tục cho đến khi bạn đến cuối chương trình.

Gỡ lỗi TypeScript với Bản đồ nguồn

Khi TypeScript tiếp tục trở nên phổ biến hơn, số lượng dự án Node.js được viết bằng TypeScript chắc chắn sẽ tăng lên. May mắn thay, bạn cũng có thể gỡ lỗi các dự án dựa trên TypeScript bằng Mã VS.

Đầu tiên, tạo một tsconfig.json tệp trong thư mục gốc của dự án của bạn (nếu nó chưa được tạo) và bật bản đồ nguồn:

 { "compilerOptions": { "sourceMaps": true }}
 

Tiếp theo, hãy đính kèm quy trình đang chạy và đặt các điểm dừng trong tệp TypeScript của bạn. Visual Studio Code sẽ tìm các bản đồ nguồn và sử dụng chúng.

Bạn có thể thông báo rõ ràng cho Mã VS nơi tìm bản đồ nguồn. Để làm điều này, thêm một outFiles thuộc tính trong tệp cấu hình khởi chạy của bạn và trỏ nó đến vị trí chính xác của bản đồ nguồn của bạn:

 { 
 "version": "0.2.0", 
 "configurations": [ { 
   "type": "node", 
   "request": "launch", 
   "name": "Launch Program", 
   "skipFiles": [ "<node_internals>/**" ], 
   "program": "${workspaceFolder}\index.js", 
   "outFiles": "${workspaceFolder}\index.js", 
   } 
 ]
}
 

Nếu bạn đang sử dụng nút ts để chạy dự án của bạn mà không cần bước xây dựng, hãy sử dụng cấu hình này thay vì cấu hình ở trên:

 { 
 "version": "0.2.0", 
 "configurations": [ { 
   "type": "pwa-node", 
   "request": "launch", 
   "name": "Launch Server", 
   "skipFiles": [ "<node_internals>/**" ], 
   "runtimeArgs": [ "-r", "ts-node/register" ], 
   "args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}
 

Vì không có thuộc tính chương trình, thời gian chạy tranh luận đăng ký nút ts làm trình xử lý cho các tệp TypeScript. Đối số đầu tiên để tranh luận là tập tin đầu vào cho chương trình. Bây giờ bạn có thể bắt đầu phiên gỡ lỗi của mình. Nếu bạn đang phát triển với vanilla JavaScript hoặc khung giao diện người dùng, bạn cũng có thể gỡ lỗi mã JavaScript trong trình duyệt.

Các tính năng khác trong Visual Studio Code

Visual Studio Code là một trình chỉnh sửa mã nguồn mạnh mẽ được tích hợp nhiều tính năng tuyệt vời. Chúng tôi đã đề cập đến công cụ gỡ lỗi tích hợp của VS Code. Chúng tôi cũng đã trình bày cách bạn có thể sử dụng nó để gỡ lỗi ứng dụng Node.js của mình.

Nhưng có rất nhiều tính năng tiện dụng khác trong VS Code. Trong khi bạn có thể quen thuộc với một số trong số họ, một số có thể hoàn toàn mới đối với bạn. Trong trường hợp đó, bạn có thể muốn tìm hiểu về các tính năng này và cách sử dụng chúng.