Configurer CodeLobster pour développer et déboguer un site Web

Il est possible de développer un site Web à l'aide d'un éditeur de texte simple comme NotePad++ ou PSPad. Par contre, si vous utilisez un environnement de développement plus évolué (IDE : Integrated Development Environment), vous bénéficierez de plusieurs avantages, dont :

  • Voir d'un coup d'oeil l'ensemble des fichiers du projet;
  • Coloration syntaxique et complétion de code;
  • Aperçu des couleurs correspondant aux codes RGB;
  • Possibilité de créer des « snippets » pour faciliter l'entrée de code souvent utilisé;
  • Accès à différents outils pour les programmeurs, comme par exemple la touche F12 pour atteindre la définition d'une fonction;
  • Possibilité de saisir une colonne sur plusieurs lignes (alt+sélectionner);
  • Mais le plus important est sans aucun doute la possibilité d'utiliser le débogueur pour exécuter le programme une ligne à la fois, pour consulter la valeur des variables, etc.

Mon IDE favori est de loin PhpStorm. Il est possible de l'obtenir gratuitement pour les maisons d'enseignement et pour les étudiants.

Si ce n'est pas votre cas et que vous ne désirez pas l'acheter, je vous propose un autre IDE, que j'ai moi-même utilisé pendant plusieurs années, et qui est gratuit : CodeLobster.

▼Publicité

Installer CodeLobster

CodeLobster

Pour installer CodeLobster :

  • Rendez-vous sur le site officiel de CodeLobster : http://www.codelobster.com/
  • Téléchargez la dernière version stable, édition PHP.
  • Suivez les instructions d'installation.

Créer un projet PHP pur ou un projet WordPress dans CodeLobster

CodeLobster peut être utilisé pour développer un projet PHP pur ou encore un projet WordPress.

La procédure pour créer le projet dépendra de la présence ou non du dossier initial du projet.

Généralement, pour débuter un projet PHP pur, on créera le projet dans CodeLobster puis on y copiera les fichiers sur lesquels on base notre projet. Avec WordPress, on fera souvent l'inverse : on installera WordPress puis on démarrera le projet dans CodeLobster.

Projet PHP pur

  • Fichier / Nouveau / Projet.
  • Dans la boîte de dialogue « Créer un projet », placez votre projet sous le dossier localweb situé dans le dossier d'installation d'EasyPHP.

    Ex : C:\Program Files (x86)\EasyPHP-DevServer-13.1VC11\data\localweb

  • Nommez votre projet en n'utilisant aucun espace ni caractère accentué.
  • Dans la zone « URL pour le débogage » (il se peut que vous ne voyiez que « URL pour le »), entrez l'URL de votre site Web. Cet URL sera  « http://127.0.0.1/ » suivi du nom de votre projet. 

  • N'oubliez pas de cocher « Créer un projet dans un nouveau dossier ».

    CodeLobster : nouveau projet PHP pur

Projet WordPress

  • Fichier / Nouveau / Projet.
  • Dans la boîte de dialogue « Créer un projet », placez votre projet sous le dossier localweb situé dans le dossier d'installation d'EasyPHP.

    Ex : C:\Program Files (x86)\EasyPHP-DevServer-13.1VC11\data\localweb

  • Comme nom du projet, vous pouvez choisir ce que vous désirez. Une bonne solution consiste à réutiliser le nom du dossier dans lequel votre site WordPress est placé.
  • Dans la zone « URL pour le débogage », entrez l'URL de votre site Web. Cet URL sera  « http://127.0.0.1/ » suivi du dossier dans lequel votre site Web est placé. 

  • Attention : NE PAS cocher « Créer un projet dans un nouveau dossier » puisque le dossier existe déjà.

    CodeLobster : nouveau projet WordPress

Vous pouvez désormais ouvrir votre projet WordPress par un double-clic sur le fichier .clpprj placé à la racine de votre dossier WordPress.

Configurer CodeLobster

Avant de pouvoir exécuter une page Web à partir de CodeLobster, vous devez vous assurer que tout soit correctement configuré.

  • Assurez-vous d'abord que EasyPHP soit démarré.

    Vérifier si EasyPHP est démarré

  • Dans CodeLobster, assurez-vous que vos options de débogage soient bien entrées en allant dans le menu Outils / Paramètres / Débogueur.

    Ces informations devraient être semblables à celles-ci :

    Options du débogueur dans CodeLobster

  • Cliquez sur « Installer le débogueur ».
  • Vous devez modifier les propriétés du projet afin d'entrer l'adresse du site comme URL de débogage. Dans CodeLobster, faites un clic droit sur le nom de votre projet puis choisissez « Modifier ». L'URL de votre site Web sera  « http://127.0.0.1/ » suivi du nom de votre projet. Entrez cet URL dans la zone « URL pour le débogage » puis dans la zone « URL d'accueil ».

    Propriétés du projet dans CodeLobster

Lancer une page Web à partir de CodeLobster

Une fois CodeLobster correctement configuré, vous pouvez afficher la page Web dans votre navigateur à l'aide des fonctionnalités de CodeLobster :

  • Cliquez sur l'icône «URL d'accueil de débogage » (la flèche vide bleue)

    Lancer un site Web avec CodeLobster

ou

  • Appuyez sur Maj+F8.

Déboguer une page Web à l'aide de CodeLobster

Une fois CodeLobster configuré, vous pouvez :

  • Ajouter un point d'arrêt en cliquant dans la marge grise vis-à-vis une ligne de code.
  • Lancer le site Web en cliquant sur le triangle bleu vide.
  • Lorsque le point d'arrêt est atteint, vous pouvez :
    • Connaître la valeur d'une variable en pointant la souris dessus.
    • Connaître la valeur de l'ensemble des variables à l'aide de l'onglet « Variables locales » au bas de l'écran.
    • Poursuivre le traitement une ligne à la fois en cliquant sur Avancer (F11) - pour voir les lignes de code des fonctions - ou sur Passer (F10) - pour que les fonctions soient exécutées d'un seul coup sans entrer dans leurs lignes de code.
    • Poursuivre le traitement jusqu'au prochain point d'arrêt en cliquant sur Débogage (F5).
    • etc.

Pour plus d'information

« PHP debugger ». Codelobster. http://www.codelobster.com/php_debugger.html

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories