Written by

Avez-vous déjà eu affaire à un pro­jet à long terme, impli­quant l’intégration de nom­breuses dépen­dances (sou­vent cir­cu­laires), qui finit par prendre une jour­née entière à ins­tal­ler loca­le­ment, seule­ment pour débo­guer une petite fonc­tion­na­li­té ? Sans aucun doute ! Nous connais­sons tou·te·s le moment où vous pro­cras­ti­nez une ses­sion de débo­gage sim­ple­ment parce que vous ne vou­lez pas avoir à faire tour­ner l’environnement loca­le­ment.

Bonne nou­velle : il existe une autre solu­tion. Grâce au débo­gage à dis­tance, vous pou­vez exé­cu­ter votre envi­ron­ne­ment sur vos ser­veurs de sta­ging 1) et tra­vailler des­sus depuis votre IDE !

Les éco­sys­tèmes de déve­lop­pe­ment Web ont beau­coup évo­lué ces der­nières années. Pas seule­ment les fra­me­works et les outils, mais sou­vent des envi­ron­ne­ments entiers. Le chan­ge­ment le plus visible de ces der­niers mois a été l’adoption mas­sive par la plu­part des déve­lop­peurs Web de VSCode comme IDE prin­ci­pal. Basé sur JavaScript, sou­te­nu par les équipes Open Source de Microsoft, avec une sta­bi­li­té amé­lio­rée et un réel gain de per­for­mance, et sou­te­nu par une large com­mu­nau­té four­nis­sant beau­coup d’extensions : c’est pro­ba­ble­ment le meilleur choix pour votre outil quo­ti­dien.

L’équipe de déve­lop­pe­ment de Microsoft four­nit un ensemble d’extensions vous per­met­tant de tra­vailler sur des machines dis­tantes uti­li­sant dif­fé­rents pro­to­coles, comme le véné­rable SSH ! Grâce à notre pla­te­forme, qui vous offre un accès SSH par défaut, vous pou­vez exploi­ter ces exten­sions faci­le­ment.

Attachez vos cein­tures, voi­ci le guide com­plet !

Pré-requis

Tout d’abord, vous aurez besoin de VSCode (évi­dem­ment). Veuillez noter que les Remote Extensions ne peuvent fonc­tion­ner qu’avec la ver­sion offi­cielle, et non avec l’édition OSS, car celles-ci uti­lisent des com­po­sants non-libres. Installez-le en uti­li­sant votre ges­tion­naire de paquets habi­tuel (sous Linux), ou télé­char­gez la ver­sion cor­res­pon­dant à votre sys­tème d’exploitation.

Vous devrez éga­le­ment acti­ver l’accès SSH par clef sur votre compte always­da­ta. Vous pou­vez vous réfé­rer à la docu­men­ta­tion offi­cielle sur l’utilisation des clés SSH si vous n’êtes pas à l’aise avec le pro­ces­sus.

Nous vous recom­man­dons d’avoir un fichier de confi­gu­ra­tion SSH pour décla­rer vos hôtes, ce qui sera plus facile à uti­li­ser dans VSCode. Sur votre machine locale, créez un fichier $HOME/.ssh/config avec le conte­nu sui­vant :


Remplacez [ad-account] par le nom de votre compte always­da­ta, et défi­nis­sez le che­min d’accès à votre clé pri­vée SSH en fonc­tion de votre confi­gu­ra­tion locale.

Sous Windows, vous devrez peut-être vous réfé­rer à ce fichier de confi­gu­ra­tion dans la confi­gu­ra­tion de l’extension.

Assurez-vous que votre connexion SSH est prête en exé­cu­tant $ ssh alwaysdata dans votre ter­mi­nal. Si vous êtes connec­té aux ser­veurs d’alwaysdata, vous êtes prêt !

Sur le serveur, depuis votre canapé

Lancez VSCode et allez dans le ges­tion­naire d’extensions (Ctrl+Shift+X) et ins­tal­lez les exten­sions Remote – SSH et Remote – SSH : Editing Configuration Files.

À pré­sent, en uti­li­sant le ges­tion­naire à dis­tance, ou la Palette de com­mande > Remote-SSH : Connect to Host… (F1), acti­vez la connexion à l’hôte alwaysdata. Après un cer­tain temps 2), vous serez connec­té au ser­veur d’alwaysdata. Une noti­fi­ca­tion verte SSH : alwaysdata dans la Barre d’état vous le signale. Faisons un test et essayons la com­mande Fichier > Ouvrir… sur un fichier ou un dos­sier : votre explo­ra­teur devrait main­te­nant affi­cher votre envi­ron­ne­ment dis­tant ! Vous pou­vez éga­le­ment voir que la console (Ctrl+`) s’ouvre sur votre envi­ron­ne­ment dis­tant.

Félicitations ! Vous tra­vaillez main­te­nant depuis votre IDE local sur votre compte dis­tant always­da­ta, sans aucune dif­fé­rence ! Vous pou­vez main­te­nant com­men­cer votre ses­sion de débo­gage à dis­tance de votre appli­ca­tion.


Un petit mot avant de vous lan­cer : lorsque vous tra­vaillez à dis­tance sur nos ser­veurs avec l’extension Remote – SSH, VSCode consi­dère le dos­sier dis­tant que vous avez ouvert comme l’espace de tra­vail actuel (comme il le fait pour les pro­jets locaux). Pour ce faire, il enre­gistre ses fichiers de confi­gu­ra­tion dans le réper­toire caché habi­tuel .vscode à la racine de votre pro­jet. Nous vous recom­man­dons vive­ment d’ignorer ce dos­sier dans votre outil de ver­sion­ne­ment (comme .gitignore) et de ne pas le sup­pri­mer de votre envi­ron­ne­ment dis­tant.

Dans ce guide, lorsque nous fai­sons réfé­rence à cer­tains para­mètres, ils sont liés à l’espace de tra­vail et sont donc enre­gis­trés dans ce dos­sier sur le ser­veur. Le ges­tion­naire à dis­tance mémo­rise vos espaces de tra­vail dis­tants, ce qui vous per­met de les rou­vrir rapi­de­ment lorsque vous sou­hai­tez démar­rer une nou­velle ses­sion de débo­gage.


JavaScript : un langage pour les gouverner tous

Pour illus­trer ce guide, nous avons choi­si de nous concen­trer sur un seul lan­gage pour le back-end et le front-end. C’est ici uni­que­ment à titre d’exemple, et vous pou­vez tra­vailler sur n’importe quel type d’architecture. Il vous suf­fit d’installer le bon plu­gin de débo­gueur dans VSCode, et tout ira bien. Gardez à l’esprit qu’alwaysdata sup­porte tous les lan­gages que vous sou­hai­tez, n’hésitez pas à choi­sir celui qui cor­res­pon­dra le mieux à vos besoins !

Grâce à notre appli­thèque, vous pou­vez déployer un large éven­tail de fra­me­works Web direc­te­ment à par­tir de votre compte. Dans votre inter­face d’administration, allez à la sec­tion Web > Sites, cli­quez sur le bou­ton Installer une appli­ca­tion, choi­sis­sez Express.js en cli­quant sur la roue cran­tée, et sui­vez les ins­truc­tions de l’installateur.

Vous avez main­te­nant une appli­ca­tion Express.js dis­po­nible ! Cliquez sur son URL pour ouvrir une nou­velle fenêtre poin­tant vers votre tout nou­veau site, vous devriez voir le fameux mes­sage de bien­ve­nue Hello World!. Utilisons main­te­nant notre IDE local pour édi­ter ce pro­jet.

Il est à noter la façon dont la même base de code sera uti­li­sée dans dif­fé­rents contextes : déve­lop­pe­ment et pro­duc­tion. Le site auquel vous venez d’accéder tourne en ver­sion de pro­duc­tion. Nous tra­vaille­rons sur la même base de code mais nous l’utiliserons à par­tir de l’accès SSH, en mode déve­lop­pe­ment. Cela signi­fie que chaque modi­fi­ca­tion que nous appor­te­rons ne sera pas réper­cu­tée sur la ver­sion pro­duc­tion tant que vous n’aurez pas redé­mar­ré votre site depuis votre pan­neau d’administration.

Cette dis­tinc­tion pro­duc­tion vs déve­lop­pe­ment est valable uni­que­ment pour les lan­gages en pro­ces­sus per­sis­tants, comme Node.js, Python, Ruby… Les lan­gages à état tran­si­toires, comme PHP, sont sys­té­ma­ti­que­ment relan­cés à chaque requêtes, et vos chan­ge­ments seront donc immé­dia­te­ment appli­qués, sans qu’il soit néces­saire de relan­cer votre site.

Dans VSCode, ouvrez votre espace de tra­vail dis­tant en acti­vant la connexion alwaysdata et ouvrez le dos­sier qui vient d’être créé par l’installateur de l’applithéque. Vous êtes prêt à déve­lop­per !

Lançons notre appli­ca­tion en mode déve­lop­pe­ment : ouvrez le fichier package.json et ajou­tez un script de debug :


Notre appli­ca­tion s’attend à trou­ver la variable d’environnement PORT, exé­cu­tons-là à par­tir du ter­mi­nal inté­gré VSCode : PORT=3000 npm run debug. Vous devriez voir un mes­sage indi­quant que votre appli­ca­tion est prête. Mais vous ne pou­vez pas accé­der au port dis­tant depuis votre machine locale !

Heureusement, VSCode Remote Extension vous per­met de décla­rer un port local à rat­ta­cher 3) à votre envi­ron­ne­ment dis­tant. Dans le ges­tion­naire à dis­tance, ajou­tez un nou­veau port à la sec­tion Forwarded Ports. Entrez 3000. Maintenant, vous devriez pou­voir faire poin­ter votre navi­ga­teur sur http://localhost:3000, et accé­der à votre appli­ca­tion dis­tante en mode débo­gage !

Pour évi­ter d’entrer les ports trans­fé­rés à chaque fois que vous démar­rez une ses­sion, dans les pré­fé­rences locales des uti­li­sa­teurs, cochez la case Remote : Restore Forwarded Ports (ou ajou­tez "remote.restoreForwardedPorts": true dans votre fichier local User/settings.json).

Nous sommes main­te­nant en mesure d’exécuter notre appli­ca­tion à par­tir de VSCode et d’y accé­der loca­le­ment. Voyons main­te­nant com­ment la débo­guer !

Exécuter, échouer, puis exécuter à nouveau

Aller au-delà du code

Lançons notre appli­ca­tion atta­chée au débo­gueur VSCode. Elle vous per­met de défi­nir des points d’arrêt et d’inspecter call­stack, même à dis­tance ! Installez l’extension Debugger for Chrome. Nous allons éga­le­ment édi­ter notre script debug pour l’exécuter avec le mode d’inspection acti­vé :


Nous atta­chons l’inspecteur dans un port non-stan­dard pour évi­ter tout conflit, sur­tout avec la der­nière par­tie de ce guide. Ne vous pré­oc­cu­pez pas pour le moment.

Nous avons main­te­nant besoin d’une tâche de débo­gage qui fera tour­ner notre appli­ca­tion et y atta­che­ra le débo­gueur. Allez dans le ges­tion­naire d’exécution et de débo­gage (Ctrl+Shift+D), actuel­le­ment vide. Cliquez sur le lien create a launch.json, et sélec­tion­nez Node.js dans le pan­neau de choix. VSCode crée­ra un nou­veau fichier .vscode/launch.json dans votre envi­ron­ne­ment dis­tant (vous pou­vez le voir depuis votre explo­ra­teur). Remplissez-le avec la confi­gu­ra­tion sui­vante :


Nous y trou­vons :

  • runtimeExecutable : nous exé­cu­tons l’application par le biais de npm ;
  • runtimeArgs : voi­ci notre script debug ; nous ajou­tons éga­le­ment script-prepend-node-path pour évi­ter les aver­tis­se­ments dus au che­min vers l’exécutable node dans le sys­tème de fichiers, qui est spé­ci­fique à l’architecture always­da­ta ;
  • port : le port auquel nous avons choi­si d’attacher l’inspecteur node ;
  • env : les variables d’environnement pas­sées, ici le port sur lequel l’application Express.js va s’attacher.

Nous sommes main­te­nant prêts à faire fonc­tion­ner notre appli­ca­tion avec le débo­gueur. Lancez le débo­gueur avec la flèche verte dans le pan­neau d’exécution (ou appuyez sur F5). Votre script de débo­gage npm est exé­cu­té par VSCode, et vous pou­vez tou­jours accé­der à votre appli­ca­tion dans votre navi­ga­teur.

Maintenant, ouvrez le fichier app.js, et met­tez un point d’arrêt sur la ligne res.send (6) en cli­quant dans la gout­tière (ou appuyez sur F9 avec votre cur­seur sur la ligne). Rechargez votre navi­ga­teur. Votre appli­ca­tion devrait faire une pause juste avant d’exécuter l’instruction res.send et vous pou­vez ana­ly­ser et débo­guer votre appli­ca­tion depuis le Panneau d’exécution et de débo­gage !

Outils pratiques pour développeurs surbookés

Malheureusement, devoir relan­cer votre appli­ca­tion à chaque fois que vous modi­fiez les fichiers est plu­tôt fas­ti­dieux. Configurons le rechar­ge­ment à chaud côté ser­veur !

  1. Installez Nodemon sur votre pro­jet depuis le ter­mi­nal inté­gré : npm install --save-dev nodemon.
  2. Editez le script debug dans le fichier package.json pour lan­cer l’application avec nodemon : NODE_ENV=development nodemon --inspect=9321 --exitcrash app.js.
  3. Modifiez la confi­gu­ra­tion du débo­gueur dans le fichier launch.json en ajou­tant l’option "restart" : true, per­met­tant au débo­gueur de se réat­ta­cher à chaque fois que node­mon redé­marre l’application.

Exécutez à nou­veau la confi­gu­ra­tion du débo­gueur et rechar­gez votre navi­ga­teur : vous devriez être en mesure d’accéder à l’application. Modifiez la chaîne Hello World! et sau­ve­gar­dez le fichier. Votre appli­ca­tion est auto­ma­ti­que­ment rechar­gée et le débo­gueur ré-atta­ché. Rechargez votre navi­ga­teur : vous avez le nou­veau mes­sage !

En tant que déve­lop­peurs, nous sommes sou­vent pares­seux : confi­gu­rons le navi­ga­teur pour qu’il se recharge de lui-même lorsque l’application ser­veur est éga­le­ment rechar­gée :

  1. Installez live­re­load dans votre pro­jet : npm install --save-dev livereload connect-livereload.
  2. Votre appli­ca­tion doit ser­vir une page HTML valide pour pou­voir injec­ter le script live­re­load côté ser­veur. Ajoutons Pug comme moteur de tem­plates, et Helmet pour gérer les en-têtes de sécu­ri­té CORS des pages que nous ser­vons : npm install --save pug helmet
  3. Configurez votre appli­ca­tion pour uti­li­ser le moteur de tem­plates, et acti­vez LiveReload lorsque l’app est en mode déve­lop­pe­ment :
  4. Créez un fichier views/index.pug à la racine de votre pro­jet :
  5. Dans la sec­tion Forwarded Ports Section, ajou­tez un nou­veau port à trans­fé­rer : 35729, per­met­tant à votre navi­ga­teur d’accéder au ser­veur live­re­load.

Maintenant, exé­cu­tez à nou­veau la confi­gu­ra­tion du débo­gueur. Rechargez votre navi­ga­teur, il devrait acti­ver le mode LiveReload (vous ver­rez une requête WebSocket dans le Panneau Réseau). Modifiez le mes­sage envoyé au modèle. Lors de la sau­ve­garde, l’application sera redé­mar­rée, le débo­gueur y sera rat­ta­ché, et votre navi­ga­teur sera rechar­gé sans aucune action de votre part !

Débogueur à tous les étages

Tout en un

VSCode offre un large choix d’extensions, vous per­met­tant de béné­fi­cier d’une expé­rience tota­le­ment inté­grée. Alors pour­quoi ne pas exé­cu­ter et contrô­ler notre navi­ga­teur de test direc­te­ment depuis notre IDE ? Il est temps d’installer l’extension Browser pre­view.

Créons une confi­gu­ra­tion de débo­gage prête à exé­cu­ter le Browser Preview. Dans votre fichier launch.json, ajou­tez une nou­velle confi­gu­ra­tion après celle du Server Debug Mode :


De toute évi­dence, il est par­fai­te­ment inutile de lan­cer l’aperçu du navi­ga­teur sans lan­cer l’application en arrière-plan. C’est pour­quoi nous allons créer un Compound qui lan­ce­ra les deux à par­tir de notre débo­gueur. Toujours dans le fichier launch.json, ajou­tez une entrée compounds juste après celle des configurations :


Maintenant, dans votre Panneau d’exécution et de débo­gage, sélec­tion­nez la confi­gu­ra­tion Client/Server, et exé­cu­tez-la. Votre appli­ca­tion est lan­cée en mode déve­lop­pe­ment avec Nodemon et atta­chée au débo­gueur, et un Panneau de pré­vi­sua­li­sa­tion du navi­ga­teur devrait s’ouvrir, poin­tant sur l’adresse de l’application 4).

Go Go, Gadget !

Nous avons un pan­neau de pré­vi­sua­li­sa­tion du navi­ga­teur, atta­ché au débo­gueur interne. Voyons ce que nous pou­vons en faire !

  1. Créez un fichier static/js/main.js au niveau de la racine de votre pro­jet, avec le conte­nu sui­vant :
  2. Mettez à jour notre index.pug, char­gez un script main.js dans la page :
  3. Maintenant, édi­tez notre app.js pour ser­vir les fichiers sta­tiques :

Si vous lan­cez l’application main­te­nant, vous devriez pou­voir cli­quer sur le titre et voir la boîte d’alerte appa­raître dans les noti­fi­ca­tions VSCode. Mais vous ne pou­vez pas accé­der aux fichiers dans le débo­gueur, car il doit rat­ta­cher ces assets aux sources sur le ser­veur.

Modifiez l’entrée Browser Preview: Launch dans le fichier launch.json et ajou­tez le map­ping vers les fichiers :


Exécutez à nou­veau la tâche de débo­gage. Ajoutez un point d’arrêt dans le fichier main.js. Cliquez sur le titre. Votre script est mis en pause et vous pou­vez ins­pec­ter la call­stack à par­tir de l’inspecteur de débo­gage inté­gré !

Terminons en acti­vant éga­le­ment le rechar­ge­ment en direct des res­sources du fron­tend. Mettez à jour le fichier app.js en ajou­tant l’instruction LiveReload watch après avoir créé le livereloadServer :


Vous pou­vez main­te­nant édi­ter le fichier main.js voir votre navi­ga­teur se rechar­ger auto­ma­ti­que­ment !


C’était un long voyage et un long article juste pour vous don­ner seule­ment quelques bases du Débogage à dis­tance back et front. Il vous offre la pos­si­bi­li­té de conser­ver votre dépôt de code dans votre compte always­da­ta, libé­rant votre envi­ron­ne­ment local strate tech­nique com­plexe à main­te­nir.

Vous pou­vez exé­cu­ter votre code à dis­tance en mode de déve­lop­pe­ment, atta­cher le backend au débo­gueur local, exé­cu­ter votre appli­ca­tion Web dans un conte­neur de navi­ga­teur, et exé­cu­ter un second débo­gueur en paral­lèle, atta­ché à ce navi­ga­teur inté­gré !

Cela vous donne la pos­si­bi­li­té de tes­ter et de débo­guer dans un envi­ron­ne­ment de type pro­duc­tion avec tout l’outillage moderne que vous pou­vez attendre. Encore plus amu­sant : lorsque votre ses­sion de débo­gage est ter­mi­née, il vous suf­fit de redé­mar­rer votre Site depuis votre pan­neau d’administration always­da­ta et vos modi­fi­ca­tions sont en ligne !

Comme men­tion­né pré­cé­dem­ment, grâce à l’écosystème VSCode, des débo­gueurs sont dis­po­nibles pour de nom­breux lan­gages modernes comme Python, Ruby, PHP et bien d’autres encore. Pas besoin de s’en tenir à JS, vous pou­vez uti­li­ser ce guide avec n’importe quel type de lan­gage que vous héber­gez sur votre compte.

Nous espé­rons que cela vous aide­ra à amé­lio­rer votre flux de tra­vail quo­ti­dien. Vous vou­lez en savoir plus sur les cas d’utilisation avan­cés de votre compte always­da­ta ? Faites-nous part en com­men­taires de la façon dont nous pou­vons vous aider à déblo­quer de nou­veaux niveaux dans vos tâches quo­ti­diennes !

Notes   [ + ]

1. Peut-être four­ni par vos coéqui­piers DevOps.
2. Au cours de laquelle VSCode ins­talle les com­po­sants néces­saires à dis­tance et démarre un ser­veur de déve­lop­pe­ment à dis­tance en arrière-plan.
3. VSCode s’appuie sur SSH Port Forwarding et a besoin que le ser­veur SSH ait la direc­tive AllowTCPForwarding acti­vée. Chez always­da­ta, nous désac­ti­vons cette fonc­tion pour des rai­sons de sécu­ri­té, mais nous avons heu­reu­se­ment trou­vé un moyen de faire fonc­tion­ner le Port Forwarding pour VSCode sans com­pro­mettre la sécu­ri­té !
4. En rai­son de la façon dont les com­pounds sont exé­cu­tés, l’aperçu du navi­ga­teur peut poin­ter sur about:blank au lieu de http://localhost:3000. Il existe une solu­tion de contour­ne­ment liée à la pos­si­bi­li­té d’exécuter des pré-tâches (voir le ticket). En atten­dant un cor­rec­tif, vous pou­vez mettre à jour manuel­le­ment l’adresse pour char­ger votre appli­ca­tion dans le pan­neau de pré­vi­sua­li­sa­tion.