Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Nội dung bài viết

Video học lập trình mỗi ngày

Debug node - Như anh em devjs cũng đã biết rồi, code javascript ngày càng phức tạp và tinh vi hơn chúng ta nghĩ. Và debug càng trở nên cần thiết trên browser hay nói cách khác là debug trên chính client. Với javascript thì hẳn nhiên ai cũng phải biết debug sử dụng console browser rồi. Nhưng với node thì sao? console browser rồi. Nhưng với node thì sao? 

Trong bài viết này, tôi sẽ giới thiệu cho những bạn chưa biết cách debug node như thế nào cho nhanh nhất. Có lẽ đây là một trong những chủ đề ít được viết trong lập tình vì khái niệm debug cũng khá lạ lẫm với những bạn mới học, nhưng khi quen rồi thì nó khá gây nghiện. Nhưng cũng phải nói qua, nhiều bạn sẻ dụng debug tạo cheat thì không nên, hoặc xong thì xoá nó đi. Vì một khi bạn cheat được thì đó chính là backdoor cho những devjs khác. Đừng tưởng mình biết mà người ta không biết.

Thật ra Node đã support lâu rồi từ năm 2016. Node đã quyết định sử dụng "Công cụ dành cho nhà phát triển" của Chrome làm công cụ gỡ lỗi chính thức, do đó, các tập lệnh Node cũng có thể được gỡ lỗi bằng console, tạo điều kiện thuận lợi cho các nhà phát triển như anh em chúng ta. Node đã support lâu rồi từ năm 2016. Node đã quyết định sử dụng "Công cụ dành cho nhà phát triển" của Chrome làm công cụ gỡ lỗi chính thức, do đó, các tập lệnh Node cũng có thể được gỡ lỗi bằng console, tạo điều kiện thuận lợi cho các nhà phát triển như anh em chúng ta.

Và trong bài này tôi và các bạn sẽ thử thực hiện debug node.debug node.

1 - Tạo project debug code

AnonyStick$ mkdir debug-node-demo
AnonyStick$ cd debug-node-demo/
AnonyStick$ npm init -y
AnonyStick$ npm i express --save

2 - Tạo file index.js

AnonyStick$ touch index.js

Tiếp theo lên homepage của Expressjs copy codehomepage của Expressjs copy code

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Xong, với một code đơn giản chúng ta đã một project chuẩn bị debug

3 - Run and debug

Bình thường thì chúng ta sẽ chạy như thế này:

AnonyStick$ node app.js

Nhưng giờ đây chúng ta muốn debug node nên thay đổi command một chút đó là thêm --inspect --inspect

AnonyStick$ node --inspect app.js

--inspect tham số được yêu cầu để bắt đầu chế độ gỡ lỗi (debug).  tham số được yêu cầu để bắt đầu chế độ gỡ lỗi (debug). 

Tại thời điểm này, hãy mở trình duyệt của bạn để truy cập http://127.0.0.1:3000 và bạn có thể thấy Hello Worldhttp://127.0.0.1:3000 và bạn có thể thấy Hello World

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Khi đã hiện thị rồi chúng ta có hai cách để mở công cụ gỡ lỗi, đầu tiên là trong thanh địa chỉ trình duyệt Chrome, gõ chrome://inspect hay about:inspect, chúng ta sẽ thấy giao diện sau:chrome://inspect hay about:inspect, chúng ta sẽ thấy giao diện sau:

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Các bạn thấy cái icon màu xanh quen quen chưa

Cách thứ hai mở console của chrome lên, bạn sẽ thấy một icon xanh ở đó. Và đừng quan đến đến cái dòng đỏ đỏ đấy :)console của chrome lên, bạn sẽ thấy một icon xanh ở đó. Và đừng quan đến đến cái dòng đỏ đỏ đấy :)

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Các nào cũng được miễn là khi click zô là nó ra hình ảnh như thế này.

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Trong đó gồm:

  • Connection
  • Console
  • Profile
  • Source
  • Memory

Tiếp đến click vào Source tìm file index.js. Bạn thấy file index.js như hình, giờ có thể quen thuộc rồi :D

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Giờ chúng ta cũng làm như debug javascript bình thường thôi, cick zô line muốn debug như hình

Edit tham số, hoặc check data các kiểu tuỳ thuộc các bạn. Sau đó save lại và click vào nút Tiếp tục trên thanh công cụ trên cùng.

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Sau đó refesh lại chúng ta đã thấy không cần restart lại node commancd mà vẫn có thể debug một cách ngon lành.

Kết luận

Đây là một trò vui debug dành cho bạn nào yêu thích và tìm hiểu. Mọi khiếu nại or phàn nàn vui lòng comment trên fanpage.

Thanks for readding!

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Đã đăng vào thg 12 8, 2021 3:30 SA 3 phút đọc 3 phút đọc

Debug nodejs app với Visual Studio Code

Trong bài viết này mình sẽ hướng dẫn debug nodejs app với framework ExpressJS. Đối với các framework, ngôn ngữ khác các bạn có thể tìm hiểu và config tương tự

1. Chuẩn bị môi trường

a. Express app

  • Cấu trúc thư mục của mình như sau:

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

  • Thư viện cần cài đăt: express. Để cài đặt thư viện các bạn vào terminal của thư mục hiện tại và thực hiện lệnhexpress. Để cài đặt thư viện các bạn vào terminal của thư mục hiện tại và thực hiện lệnh

    npm i express
    
  • Mã nguồn file index.js

    const express = require('express')
    const app = express()
    const port = 3000
    
    app.get('/', (req, res) => {
      const message = 'Hello World'
      res.send(message)
    })
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`)
    })
    
  • Mình lấy ví dụ getting started trên trang chủ của Express. Các bạn có thể tham khảo thêm tại đây.getting started trên trang chủ của Express. Các bạn có thể tham khảo thêm tại đây.

b. Thêm cấu hình debug

  • Để thực hiện debug, chúng ta vào phần Run and Debug trên VSCode -> chọn create a launch.json file -> Chọn Nodejscreate a launch.json file -> Chọn Nodejs

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

  • VSCode sẽ tự sinh cho chúng ta một file là launch.json bao gồm các khai báo cho việc debug. Nội dung file như sau
    {
      // Use IntelliSense to learn about possible attributes.
      // Hover to view descriptions of existing attributes.
      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
        {
          "type": "pwa-node",
          "request": "launch",
          "name": "Launch Program",
          "skipFiles": [
            "/**"
          ],
          "program": "${workspaceFolder}\\index.js"
        }
      ]
    }
    
  • Một số thông tin quan trọng:
    • "type": "pwa-node" -> sử dụng Javascript Debugger
    • "name": "Launch program" -> Tên của luồng chạy debug. Có thể đổi tên thành debug nodejs cho dễ hiểu 😀debug nodejs cho dễ hiểu 😀
    • "program": "${workspaceFolder}\index.js". -> khai báo đầu vào của luồng debug. Ở đây chương trình của mình chạy đầu vào ở file index.js nên sẽ khai báo như trên. workspaceFolder trỏ đến thư mục làm việc hiện tại của chương trình.

2. Thực hiện debug

a. Chọn breakpoint

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

  • Như hình trên, mình chọn breakpoint ở dòng số 6 để kiểm tra giá trị của biến message khi thực hiện debug

b. Thực hiện debug

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

  • Chọn biểu tượng phần debug
  • Chọn tác vụ debug có tên trùng với phần name đã khai báo trong file launch.json
  • Nhấn vào biểu tượng debug(hình tam giác màu xanh) để thực hiện debug
  • Bây giờ chúng ta có thể vào trình duyệt, gõ địa chỉ
    AnonyStick$ touch index.js
    0
  • Chương trình sẽ được gọi và dừng lại tại điểm breakpoint đã đặt trước
  • Giờ chúng ta có thể nhấn F10 để chạy qua dòng khai báo giá trị của biến
    AnonyStick$ touch index.js
    1 và xem giá trị của biến là Hello World! khi trỏ vào cũng như bảng giá trị local ở bên cạnhHello World! khi trỏ vào cũng như bảng giá trị local ở bên cạnh

Hướng dẫn nodejs debugger - trình gỡ lỗi nodejs

Các thao tác debug khác như

AnonyStick$ touch index.js
2, hay như các config khác các bạn có thể tham khảo thêm trên document của visual code tại đây!

All rights reserved