Mở đầu

Việc debug các ứng dụng dùng nodejs cần một số thao tác, mình trình bày cách để debug ứng dụng electron làm đại diện.

Một ứng dụng electron bao gồm 2 phía là renderer-process (như client) và main-process (như backend), renderer-process chạy trên nền V8 của google chrome nên có thể debug trực tiếp trên browser. Muốn debug được main-process riêng cũng như debug các ứng dụng nodejs nói chung cần một số thao tác cần thiết.

Muốn debug ứng dụng nodejs bằng google chrome, bạn cần nắm được quy trình như sau:

• Khởi chạy nodejs với lựa chọn có thể debug, lúc này nodejs sẽ lắng nghe trên một WebSocket. Google chrome cần kết nối vào websocket này để inspect.
• Mở google chrome và vào link chrome://inspect/#devices để kết nối vào Websocket phía trên.

Cách làm

Khởi chạy electron với lựa chọn có thể debug

Cũng như các ứng dụng dùng nodejs khác, muốn debug được main-process trong electron, bạn cần khởi chạy electron với chức năng có thể debug:

node_modules/.bin/electron . --inspect

Lúc này cổng mặc định để kết nối vào electron từ google chrome là 5858.

Nếu bạn muốn kết nối bằng cổng khác thì chạy lệnh:

node_modules/.bin/electron . --inspect=your_port

Chú ý: Nếu trong file package.json của bạn có config như sau:

"scripts": {
  "start": "electron ."
},

thì khi bạn chạy lệnh sau sẽ không khởi chạy được chức năng debug:

npm start --inspect

Nếu bạn muốn chạy được câu lệnh trên thì phải sửa package.json thành:

"scripts": {
  "start": "electron . --inspect"
},

Còn nếu bạn muốn custom lại để khi chạy npm start sẽ chạy bình thường, còn muốn chạy debug cùng với sử dụng nodemon bằng câu lệnh npm run dev thì sửa thành như sau:

"scripts": {
  "start": "electron .",
  "dev": "nodemon --config nodemon-config.json --exec electron . --inspect"
},

Kết nối google chrome để debug

Kết nối vào link chrome://inspect/#devices để thực hiện việc debug

Khi chưa khởi chạy chức năng debug trên nodejs thì link trên sẽ chưa hiển thị gì:

Sau khi khởi chạy chức năng debug trên nodejs thì link trên sẽ hiển thị link cho mình có thể inspect vào:

Click vào link inspect ở hình trên để vào cửa sổ debug, lần đầu bạn sẽ chưa thấy có source code nào để có thể đặt breakdown:

Ấn vào +Add folder to workspace để thêm source code main-process của bạn vào, sau khi thêm source code thì bạn có thể đặt breakdown như bình thường.

Link tham khảo:

https://nodejs.org/en/docs/guides/debugging-getting-started/

https://electronjs.org/docs/tutorial/debugging-main-process