Mari kita bincangkan tentang kemahiran penggunaan debugger dalam vscode

Pembelajaran nodejs Apakah perkara yang paling penting? Mungkin setiap orang ada jawapan tersendiri.

Saya rasa selain menguasai API asas dan beberapa pakej yang biasa digunakan semasa mempelajari nodej, keupayaan yang paling penting ialah belajar menggunakan penyahpepijat. Kerana apabila prosesnya rumit, penyahpepijatan titik putus boleh membantu anda menjelaskan logik dengan lebih baik, dan apabila terdapat pepijat, anda juga boleh mencari masalah dengan lebih cepat. [Pembelajaran yang disyorkan: "tutorial nodejs", "tutorial vscode"]

Pakcik Wolf berkata sama ada anda boleh menggunakan penyahpepijat adalah perkara yang paling penting untuk membezakan pengaturcaraan logo tahap nodejs.

Artikel ini berkongsi prinsip penyahpepijat dan kemahiran penggunaan vscode penyahpepijat.

Prinsip penyahpepijat

Apabila menjalankan kod nodejs, jika anda membawa --inspect (boleh memecahkan mata) atau --inspect-brk (boleh memecahkan mata, dan (memecah masuk baris pertama), maka ia akan dimulakan dalam mod nyahpepijat:

Seperti yang anda lihat, nod memulakan pelayan soket web, alamatnya ialah: ws ://127.0 .0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

Mengapakah penyahpepijat memulakan pelayan soket web?

Maksud nyahpepijat ialah berhenti di suatu tempat, anda boleh menjalankannya dalam satu langkah dan melihat pembolehubah dalam persekitaran. Jadi cara untuk menetapkan titik putus dan mendedahkan pembolehubah konteks semasa adalah dengan memulakan pelayan soket web Pada masa ini, anda hanya perlu memulakan klien websocket dan menyambung ke pelayan untuk menyahpepijat kod nodejs.

protokol nyahpepijat v8

Selepas menyambung, bagaimanakah pelayan penyahpepijat dan klien penyahpepijat berkomunikasi? Ini melibatkan protokol nyahpepijat v8.

Berkomunikasi melalui format yang boleh dikenali oleh kedua-dua pihak, seperti:

Tetapkan titik putus pada baris 100 ujian.js:

{
    "seq":118,
    "type":"request",
    "command":"setbreakpoint",
    "arguments":{
        "type":"script",
        "target":"test.js",
        "line":100
    }
}

dan kemudian lihat semasa Pembolehubah skop:

{
    "seq":117,
    "type":"request",
    "command":"scope"
}

Laksanakan ungkapan:

{
    "seq":118,
    "type":"request",
    "command":"evaluate",
    "arguments":{
        "expression":"a()"
    }
}

dan kemudian teruskan berjalan:

{
    "seq":117,
    "type":"request",
    "command":"continue"
}

Dengan cara ini, pelanggan boleh memberitahu pelayan penyahpepijat bagaimana untuk Melaksanakan kod.

klien penyahpepijat

Klien penyahpepijat biasanya mempunyai ui (sudah tentu, dalam baris arahan Menyahpepijat melalui arahan juga boleh dilakukan, tetapi secara amnya tidak dilakukan). Pelanggan js debugger biasa termasuk chrome devtools dan vscode debugger.

Kami menulis skrip js mudah dan menjalankannya melalui nod --inspect-brk:

Anda boleh melihat bahawa ia bermula pada port 9229,

Kemudian, kami menyambung kepadanya melalui dua pelanggan masing-masing.

chrome devtools

Masukkan chrome://inspect dalam bar alamat chrome, dan kemudian klik configure untuk mengkonfigurasi port sasaran:

Isi port 9229 tadi:

Kemudian anda boleh melihat bahawa chrome mengimbas sasaran, klik inspect untuk menyambung Pelayan penyahpepijat ini.

Selepas itu, anda boleh menetapkan titik putus, pelaksanaan satu langkah, melaksanakan ungkapan, melihat pembolehubah skop, dsb., fungsi ini ialah semua melalui Ini dilaksanakan menggunakan protokol nyahpepijat v8.

vscode debugger

Menulis kod dalam vscode, debugging dalam chrome devtools lebih menyusahkan, vscode juga menyokong debugger, anda boleh terus Gunakan vscode untuk nyahpepijat.

Cara untuk menggunakan keupayaan penyahpepijatan vscode adalah dengan mengubah suai konfigurasi .vscode/launch.json dalam direktori akar projek.

lampirkan

Klik butang di penjuru kanan sebelah bawah untuk menambah item konfigurasi. Di sini pilih lampiran nodej:

Oleh kerana pelayan penyahpepijat soket web telah dimulakan melalui nod --inspect-brk, maka anda hanya perlu memulakan klien websocket, dan kemudian lampirkan pada port 9229. .

点击左侧的按钮，就可以连上 debugger server 开始调试：

launch

这样先通过 node --inspect-brk 启动 debugger server，然后再添加 vscode debug 配置来连接上太麻烦了，能不能把这两步合并呢？

当然可以，只要添加一个 launch 的配置：

这里的 type 是 launch，就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js，还可以设置 stopOnEntry 来在首行断住。

点击调试，就可以看到能够成功的调试该 js 文件。

vscode 会启动 debugger server，然后启动 debugger client 自动连接上该 server，这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。

vscode debugger 进阶

debugger client 中我们最常用的还是 vscode，这里着重讲一下 vscode debugger 的各种场景下的配置。

sourcemap

如果调试 ts 代码，肯定不能调试编译后的代码，要能够映射回源码，这个是 sourcemap 做的事情。调试工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

这样当调试 index.js的时候，如果它是 ts 编译的出来的，就会自动找到对应的 ts。

当然，如果调试配置里面直接指定了 ts，那么要能够调试需要再配置 outFiles，告诉 vscode 去哪里找 sourcemap。

这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。

多进程调试

当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。

比如 vscode，它是基于 electron，需要启动一个主进程，一些渲染进程。主进程是通过 launch 启动的，而渲染进程则是后来 attach 的。

主进程启动的时候，通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。

outFiles 来指定 sourcemap 的位置，这样才可以直接调试 ts 源码。runtimeExecutable 是用 vscode 的运行时替代掉了 nodejs（一般不需要设置）。

然后渲染进程是后面启动的，我们通过参数配置了会启动在 9222 端口，那么只要 attach 到那个端口就可以调试该进程了。

vscode 支持多 target 调试，也就是可以在 vscode 里面同时启动 多个 debugger。可以切换不同的 debugger 来调试不同的进程。

彩蛋

debugger 只能打断点么，不是的，它还可以这么用，加日志，不污染源码。

总结

debugger 的使用是一项很重要的能力，对于 nodejs 水平的提升很有帮助。

nodejs debugger 的原理是 js 引擎会启动 debugger server（websocket），等待客户端连接，我们可以通过各种 debugger client 连上来进行调试，比如 chrome devtools、vscode debugger。

Untuk nyahpepijat kod nodejs, vscode debugger lebih biasa digunakan (sudah tentu, kadangkala chrome devtools turut digunakan untuk debugging dan analisis memori berdasarkan memori chrome devtools sangat membantu apabila mengesan masalah kebocoran memori).

Penggunaan penyahpepijat vscode adalah terutamanya untuk menambah konfigurasi penyahpepijatan dalam .vscode/launch.json.

Konfigurasi penyahpepijatan dibahagikan kepada pelancaran dan lampirkan:

• pelancaran akan memulakan pelayan penyahpepijat dan menyambungkannya dengan klien penyahpepijat
• lampiran baru sahaja bermula klien penyahpepijat dan sambung kepadanya, jadi anda perlu menentukan port

Item konfigurasi khusus yang biasa digunakan ialah:

• outFiles menentukan lokasi peta sumber , yang digunakan untuk menyahpepijat kod sumber ts dan kod lain yang perlu disusun
• stopOntry Stop
• args pada baris pertama untuk menentukan beberapa parameter baris arahan
• runtimeExecutable. perlu ditentukan apabila masa jalan bukan nodej, seperti vscode atau beberapa masa jalan lain

Berdasarkan konfigurasi ini, kami boleh nyahpepijat kod nodej dalam pelbagai senario, yang perlu disusun atau berbilang proses .

Tidak keterlaluan untuk mengatakan bahawa jika anda sudah biasa dengan penggunaan penyahpepijat, ia akan menjadi lebih mudah untuk memahami pelbagai kod nodejs. Saya harap artikel ini dapat membantu semua orang memahami prinsip penyahpepijat dan boleh menggunakan alat chrome devtools atau debugger vscode untuk menyahpepijat kod nodejs. Ketahui cara menyahpepijat dengan peta sumber dan pelbagai proses.

Alamat asal: https://juejin.cn/post/6981820158046109703

Penulis: zxg_God berkata akan ada cahaya

Lebih banyak pengaturcaraan pengetahuan, sila layari: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang kemahiran penggunaan debugger dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!