Bun utilise le protocole WebKit Inspector. Pour activer le débogage lors de l'exécution de code avec Bun, utilisez l'option --inspect. À des fins de démonstration, considérez le serveur web simple suivant.
Bun.serve({
fetch(req) {
console.log(req.url);
return new Response("Hello, world!");
},
});Exécutons ce fichier avec l'option --inspect.
Cela démarre automatiquement un serveur WebSocket sur un port disponible qui peut être utilisé pour introspecter le processus Bun en cours d'exécution. Divers outils de débogage peuvent se connecter à ce serveur pour fournir une expérience de débogage interactive.
Bun héberge un débogueur basé sur le web à debug.bun.sh. Il s'agit d'une version modifiée de l'interface Web Inspector de WebKit, qui semblera familière aux utilisateurs de Safari.
bun --inspect server.ts------------------ Bun Inspector ------------------
Écoute sur :
ws://localhost:6499/0tqxs9exrgrm
Inspecter dans le navigateur :
https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------Ouvrez l'URL debug.bun.sh fournie dans votre navigateur pour démarrer une session de débogage. À partir de cette interface, vous pourrez afficher le code source du fichier en cours d'exécution, afficher et définir des points d'arrêt, et exécuter du code avec la console intégrée.
Définissons un point d'arrêt. Accédez à l'onglet Sources ; vous devriez voir le code vu précédemment. Cliquez sur le numéro de ligne 3 pour définir un point d'arrêt sur notre instruction console.log(req.url).
Ensuite, visitez http://localhost:3000 dans votre navigateur web. Cela enverra une requête HTTP à notre serveur web localhost. Il semblera que la page ne se charge pas. Pourquoi ? Parce que le programme a interrompu l'exécution au point d'arrêt que nous avons défini précédemment.
Notez comment l'interface utilisateur a changé.
À ce stade, nous pouvons faire beaucoup de choses pour introspecter l'environnement d'exécution actuel. Nous pouvons utiliser la console en bas pour exécuter du code arbitraire dans le contexte du programme, avec un accès complet aux variables dans la portée de notre point d'arrêt.
Sur le côté droit du volet Sources, nous pouvons voir toutes les variables locales actuellement dans la portée, et explorer pour voir leurs propriétés et méthodes. Ici, nous inspectons la variable req.
Dans la partie supérieure gauche du volet Sources, nous pouvons contrôler l'exécution du programme.
Voici un aide-mémoire expliquant les fonctions des boutons de contrôle de flux.
- Continuer l'exécution du script — continue l'exécution du programme jusqu'au prochain point d'arrêt ou exception.
- Step over (Exécuter) — Le programme continue à la ligne suivante.
- Step into (Pas à pas détaillé) — Si l'instruction actuelle contient un appel de fonction, le débogueur « entrera » dans la fonction appelée.
- Step out (Pas à pas vers l'extérieur) — Si l'instruction actuelle est un appel de fonction, le débogueur terminera l'exécution de l'appel, puis « sortira » de la fonction à l'endroit où elle a été appelée.