Français
Français
Avec le développement rapide de la technologie Internet, de plus en plus de développeurs ont besoin d'un outil en ligne pratique pour déboguer et tester le code. En tant que langage de développement backend couramment utilisé, PHP fournit de nombreuses fonctions pour le traitement et le débogage du code. Cet article vous montrera comment utiliser PHP pour développer un simple outil de débogage en ligne, y compris la conception d'interface frontale, l'intégration de l'éditeur de code, la mise en œuvre de la fonction de débogage, etc.
Les fonctions principales des outils de débogage en ligne incluent: l'édition de code, la mise en évidence de la syntaxe, les entrées de débogage, la sortie de débogage, etc. Les utilisateurs peuvent exécuter le code et afficher les résultats de sortie en entrant le code PHP, en cliquant sur le bouton de débogage.
Afin d'améliorer l'expérience utilisateur, l'interface frontale adopte la conception HTML et CSS. Nous utilisons une balise TextArea comme une zone d'entrée de code et implémentons la fonction de l'éditeur de code en introduisant la bibliothèque CodeMirror open source. Voici un exemple de l'implémentation de l'éditeur de code:
<textarea id="code"></textarea>En introduisant les fichiers de style de CodeMirror et les fichiers JS, nous pouvons ajouter plus de fonctions à la boîte d'édition de code, telle que la mise en surbrillance de la syntaxe, l'affichage du numéro de ligne, etc. Voici le code qui introduit les styles et les fichiers JS:
<link rel="stylesheet" href="codemirror.css"> <script src="codemirror.js"></script>Ensuite, initialisez l'éditeur CodeMirror dans JS et définissez les paramètres pertinents:
var editor = CodeMirror(document.getElementById("editor"), { lineNumbers: true, mode: "text/html" });Dans le backend, nous utilisons PHP pour faire entrer le code par l'utilisateur et l'exécuter via la fonction EVAL. Voici un exemple d'obtention du code et de l'exécution:
$code = $_POST['code'];Exécutez le code d'entrée de l'utilisateur via la fonction EVAL et obtenez le résultat de sortie:
ob_start(); eval($code); $result = ob_get_contents(); ob_end_clean();Enfin, nous publions le résultat de l'exécution:
echo $result;Voici les exemples complets de code HTML, JavaScript et PHP:
<html><head><link rel="stylesheet" href="codemirror.css"><script src="codemirror.js"></script></head><body><div id="editor"></div><button onclick="debug()">courir</button><div id="output"></div><script>var editor = CodeMirror(document.getElementById("editor"), { lineNumbers: true, mode: "text/html" }); function debug() { var code = editor.getValue(); var xhr = new XMLHttpRequest(); xhr.open("POST", "debug.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("output").textContent = xhr.responseText; } }; xhr.send("code=" + encodeURIComponent(code)); }</script></body></html> <?php $code = $_POST['code']; ob_start(); eval($code); $result = ob_get_contents(); ob_end_clean(); echo $result; ?>Grâce aux étapes ci-dessus, nous avons créé avec succès un simple outil de débogage en ligne que les développeurs peuvent utiliser pour déboguer rapidement le code PHP. Cet outil peut être étendu en fonction des exigences, tels que l'ajout de prise en charge d'autres langages de programmation, l'amélioration des invites de code, etc. J'espère que ce tutoriel peut vous aider à mettre en œuvre vos propres outils de débogage en ligne et à améliorer l'efficacité du développement.
