Parlons des compétences d'utilisation du débogueur dans vscode

Apprendre nodejs Quelle est la chose la plus importante ? Peut-être que chacun a sa propre réponse.

Je pense qu'en plus de maîtriser l'API de base et certains packages couramment utilisés lors de l'apprentissage de nodejs, la capacité la plus importante est d'apprendre à utiliser le débogueur. Parce que lorsque le processus est complexe, le débogage des points d'arrêt peut vous aider à mieux clarifier la logique, et lorsqu'il y a des bugs, vous pouvez également localiser le problème plus rapidement. [Apprentissage recommandé : "tutoriel nodejs", "tutoriel vscode"]

Oncle Wolf a dit que la possibilité d'utiliser le débogueur est un indicateur important pour distinguer le niveau nodejs d'un programmeur.

Cet article partage les principes du débogueur et les compétences d'utilisation du débogueur vscode.

Principe du débogueur

Lors de l'exécution du code nodejs, si vous apportez le paramètre --inspect（可以打断点） 或者 --inspect-brk (vous pouvez casser le point et casser sur la première ligne), il démarrera en mode débogueur :

Oui Voir, nœud démarré un serveur web socket, l'adresse est : ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

Pourquoi le débogueur démarre-t-il un serveur websocket ?

La signification du débogueur est de s'arrêter quelque part, vous pouvez l'exécuter en une seule étape et visualiser les variables de l'environnement. Alors, comment définir des points d'arrêt et exposer les variables du contexte actuel consiste à démarrer un serveur websocket. À ce stade, il vous suffit de démarrer un client websocket et de vous connecter au serveur pour déboguer le code nodejs.

Protocole de débogage v8

Après la connexion, comment le serveur du débogueur et le client du débogueur communiquent-ils ? Cela implique le protocole de débogage v8.

Communiquez via un format reconnu par les deux parties, tel que :

Définissez un point d'arrêt sur la ligne 100 de test.js :

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

Visualisez ensuite les variables dans la portée actuelle :

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

Après avoir exécuté une expression :

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

Continuer à fonctionner :

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

De cette façon, le client peut indiquer au serveur du débogueur comment exécuter le code.

client debugger

le client debugger a généralement une interface utilisateur (bien sûr, vous pouvez également déboguer via des commandes dans la ligne de commande, mais cela n'est généralement pas fait). Les clients courants du débogueur js incluent les outils de développement Chrome et le débogueur vscode.

Nous écrivons un simple script js et l'exécutons via node --inspect-brk :

Vous pouvez voir qu'il démarre sur le port 9229,

Ensuite, nous nous y connectons via deux clients respectivement.

chrome devtools

Entrez chrome://inspect dans la barre d'adresse chrome, puis cliquez sur configurer pour configurer le port cible :

Remplissez le port 9229 tout à l'heure :

Ensuite, vous pouvez voir que Chrome a analysé la cible, cliquez sur inspecter pour vous connecter au serveur du débogueur.

Après cela, vous pouvez définir des points d'arrêt, une exécution en une seule étape, exécuter des expressions, afficher les variables de portée, etc. Ces fonctions sont toutes implémentées via le protocole de débogage v8.

débogueur vscode

Écrire du code dans vscode, le débogage dans les outils de développement Chrome est plus gênant, vscode prend également en charge le débogueur, vous pouvez utiliser vscode pour déboguer directement.

La façon d'utiliser les capacités de débogage de vscode consiste à modifier la configuration .vscode/launch.json dans le répertoire racine du projet.

attacher

Cliquez sur le bouton dans le coin inférieur droit pour ajouter un élément de configuration. Choisissez nodejs attach ici :

Étant donné que le serveur de débogage websocket a été démarré via node --inspect-brk, il vous suffit de démarrer le client websocket, puis de vous connecter au 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。

Pour déboguer le code nodejs, il est préférable d'utiliser le débogueur vscode (bien sûr, parfois les outils de développement Chrome sont également utilisés pour le débogage, et l'analyse de la mémoire basée sur la mémoire des outils de développement Chrome est très utile pour localiser les problèmes de fuite de mémoire).

L'utilisation du débogueur vscode consiste principalement à ajouter une configuration de débogage dans .vscode/launch.json.

La configuration du débogage est divisée en lancement et attachement :

• le lancement démarrera le serveur du débogueur et s'y connectera avec le client du débogueur
• attacher démarre simplement le client du débogueur pour se connecter au serveur du débogueur existant, vous devez donc spécifier le port

configuration spécifique Les éléments couramment utilisés sont :

• outFiles spécifie l'emplacement du sourcemap, utilisé pour déboguer le code source ts et d'autres codes qui doivent être compilés
• stopOnEntry s'arrête sur la première ligne
• args pour spécifier une commande paramètres de ligne
• runtimeExecutable lors de l'exécution n'est pas nodejs Parfois, vous devez spécifier, comme vscode ou d'autres environnements d'exécution

Sur la base de ces configurations, nous pouvons déboguer le code nodejs dans divers scénarios, qui doit être compilé, ou plusieurs processus.

Il n'est pas exagéré de dire que si vous êtes familier avec l'utilisation du débogueur, il sera beaucoup plus facile de comprendre les différents codes nodejs. J'espère que cet article pourra aider tout le monde à comprendre le principe du débogueur et à pouvoir utiliser les outils de développement Chrome ou le débogueur vscode pour déboguer le code nodejs. Savoir comment déboguer avec sourcemap et plusieurs processus.

Adresse originale : https://juejin.cn/post/6981820158046109703

Auteur : zxg_God a dit qu'il devait y avoir de la lumière

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!