Mari kita bincangkan tentang dua cara untuk menyahpepijat kod Node.js

Bagaimana untuk menyahpepijat kod Nod anda? Artikel berikut akan memperkenalkan kepada anda dua cara biasa untuk menyahpepijat Node.js Ia mempunyai nilai rujukan tertentu dan saya harap ia akan membantu anda.

Banyak kali, saya bimbang tentang penyahpepijatan Node.js dan hanya menggunakan kaedah mengganggu console.log, tetapi sebenarnya Node.js juga boleh semudah penyahpepijatan pelayar.

Persekitaran artikel ini:

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

Contoh artikel ini

Contoh artikel ini menggunakan model bawang yang telah diterokai sebelum ini. yang index.js dalam direktori akar Seperti berikut:

const Koa = require('koa');

const app = new Koa();
console.log('test')

// 中间件1
app.use((ctx, next) => {
  console.log(1);
  next();
  console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000, () => {
    console.log(`Server is starting`);
});

Protokol Pemeriksa V8 Chrome DevTools

Protokol Pemeriksa v8 ialah protokol penyahpepijatan yang baru ditambah dalam nodejs v6.3 . Ia berinteraksi dengan Klien/IDE melalui soket web dan berdasarkan alat penyemak imbas Chrome /Chromium menyediakan antara muka penyahpepijatan grafik.

Kami memasuki direktori akar projek dan melaksanakan (perhatikan port 8888, yang akan digunakan kemudian):

node --inspect=8888 index.js

Hasilnya adalah seperti berikut:

Hasilnya ialah pautan——ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d. Pautan ini ialah alamat websocket yang Node.js dan Chrome gunakan untuk berkomunikasi sebelum ini Melalui komunikasi websocket, kita boleh melihat hasil Node.js dalam Chrome dalam masa nyata.

Cara untuk memasuki antara muka penyahpepijatan Chrome

Cara pertama (cuba sendiri tetapi tidak berhasil)

Buka http://localhost:8888/json/list, di mana 8888 ialah parameter --inspect di atas.

[
    {
        "description": "node.js instance",
        "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico",
        "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "title": "index.js",
        "type": "node",
        "url": "file:///Users/gpingfeng/Documents/Personal/Test/test-onion/index.js",
        "webSocketDebuggerUrl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d"
    }
]

Banyak maklumat mengatakan bahawa anda boleh mengaksesnya terus melalui devtoolsFrontendUrl, tetapi saya mencubanya dan ia tidak berjaya. [Mungkin berkaitan dengan persekitaran saya]

Kaedah kedua

Saya menyemak maklumat dan menemui penyelesaian yang sepadan dalam stackoverflow, seperti berikut:

devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d

di mana devtools://devtools/bundled/inspector.html?experiments=true ditetapkan dan parameter ws sepadan dengan alamat soket web.

Anda boleh melihat antara muka seperti berikut:

Kaedah ketiga

Pelayar Chrome membuka mendengar HTTP antara muka Halaman, buka alat dev, selepas melaksanakan node --inspect=8888 index.js anda boleh melihat ikon ini, klik:

dan halaman penyahpepijatan yang sama seperti penyemak imbas akan muncul, seperti Sumber Skrip Panel View, prestasi pemantauan Panel Profil dan banyak lagi.

Selain itu, anda boleh melawati chrome://inspect/#devices untuk melihat semua pemeriksaan yang sedang dipantau oleh penyemak imbas.

Penyahpepijatan Vscode

Selain penyemak imbas, semua IDE utama menyokong penyahpepijatan Node.js Artikel ini menggunakan Vscode sebagai contoh.

Konfigurasi Pelancaran

Buka halaman penyahpepijatan dan tambahkan konfigurasi pelancaran pada projek Node kami:

Pilih Node.js

Ini akan menjana fail yang sepadan .vscode/launch.json dalam direktori akar projek (sudah tentu anda juga boleh menciptanya secara manual), di mana program merujuk kepada kemasukan fail, dan ${workspaceFolder} merujuk kepada direktori akar.

{
  // 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": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

Tekan F5, atau klik butang berikut:

Keputusan:

Ya Seperti yang anda lihat, nilai skop semasa, timbunan panggilan dan maklumat lain boleh dipaparkan di sebelah kiri, dan fungsi seperti penyahpepijatan langkah demi langkah dan memulakan semula juga boleh digunakan di sebelah kanan atas, iaitu sangat berkuasa.

Lampirkan pada Tindakan Proses Nod

Dengan Lampirkan pada Tindakan Proses Nod, kami boleh menyahpepijat terus proses Node.js yang sedang berjalan.

Sebagai contoh, mari kita mulakan projek dahulu——npm run start.

Kemudian command shift p (tetingkap Ctrl Shift p), masukkan Attach to Node Process Action, tekan Enter, kemudian pilih proses berjalan dan tekan Enter, anda boleh nyahpepijat kod seperti yang dikonfigurasikan di atas.

Ringkasan

Artikel ini meringkaskan dua cara biasa untuk nyahpepijat Node.js. Node.js pertama menghantar maklumat ke penyemak imbas Chrome melalui soket web dan kami nyahpepijat terus dalam Chrome. Yang kedua ialah menyahpepijat melalui Konfigurasi Pelancaran Vscode dan konfigurasi tersuai. Melalui Lampirkan pada Tindakan Proses Nod, anda boleh menyahpepijat kod Node.js yang sedang berjalan tanpa konfigurasi.

Untuk lebih banyak pengetahuan berkaitan nod, sila lawati: tutorial nodejs! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang dua cara untuk menyahpepijat kod Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!