Débogage simultané de JavaScript et PHP en utilisant phpstorm

Utilisez le débogueur phpstorm pour les mises à jour inter – pages. Si une chaîne de corruption de cache est ajoutée à l’URL dans l’étiquette du script, le débogueur Chrome n’enregistre pas les points d’arrêt entre les charges de page. La suppression de chaînes aléatoires et \/ ou la mise en place d’une carte source pour un script vous aideront à le faire, mais cela n’est pas toujours possible.
Enfin, le plus grand avantage du débogueur JavaScript phpstorm est son intégration avec le débogueur PHP Xdebug. Nous verrons bientôt que JavaScript et PHP peuvent être débogués dans la même session. La première chose que vous devez faire est de voir la documentation JetBrains sur la configuration du débogueur JavaScript. Examinez les principales étapes nécessaires au bon fonctionnement des choses. Ensuite, assurez – vous d’utiliser un navigateur Web Chrome. Bien qu’il existe également une configuration Firefox, chrome semble fonctionner mieux. Ensuite, vous devez installer l’extension JetBrains Chrome afin que chrome et phpstorm puissent communiquer entre eux.
Dans cet article, nous examinerons le débogage à distance parce que mes sites de développement local utilisent des domaines locaux séparés qui sont « distants » sur phpstorm. C’est un peu déroutant, mais selon les instructions du serveur distant, j’ai eu le plus grand succès. Pour activer le débogage JavaScript à distance, vous devez créer une configuration de débogage permanente. Pour ce faire, cliquez sur exécuter dans la barre de menu supérieure, puis cliquez sur modifier la configuration. Nous allons d’abord cliquer sur le bouton \
De plus, si l’URL correspond
De au projet phpsstorm que vous ouvrez actuellement, il devrait être tout ce dont vous avez besoin pour commencer à travailler! Sinon, vous pouvez utiliser la section URL distante de la configuration de débogage pour cartographier le domaine ou l’URL au projet courant. Débogage si tout se passe bien, nous devrions tous être prêts à déboguer JavaScript maintenant. Nous devrons utiliser certains points d’arrêt pour faire le travail. Une chose très importante à noter ici est que le point d’arrêt doit être inséré dans le fichier javascript téléchargé par le navigateur. Si vous n’utilisez pas d’outils de construction dans votre flux de travail, vous êtes prêt.
Cependant, si vous utilisez des outils de construction tels que Grunt, gulp ou webpack, vous devez vous assurer que le point d’arrêt se trouve dans le fichier généré par le processus de construction. Par conséquent, si vous avez un dossier \/ Dist pour stocker des ressources, assurez – vous que les points d’arrêt sont dans ces fichiers et non dans le fichier JS source. Il est important de noter que vous voulez éviter de minimiser les fichiers compilés localement pendant le développement et enregistrer la minimisation jusqu’à l’étape finale de construction. Alternativement, si la cartographie des sources est activée pendant le processus de construction, vous pouvez ajouter des points d’arrêt directement au fichier javascript source. Il y a un problème avec la cartographie des sources en ligne webstorm \/ phpstorm et browserify, mais il existe une solution de rechange.
Dans notre exemple, lorsque WordPress script _ debug est activé, nous pouvons charger des fichiers compilés non compacts. Ça pourrait aussi être ton choix. Je dois également mentionner que phpstorm contrôle essentiellement la console du développeur Chrome pendant le débogage. Cela signifie que si vous ouvrez la console Chrome sur l’onglet exécuter le Code, le débogueur ne fonctionnera pas. Pas de problème, mais il m’a attrapé plusieurs fois. Polyuréthane
Horloge intégrée pour phpstorm. Il vous permet de définir l’élément à surveiller dans votre code, ce qui signifie que le débogueur affichera la valeur de cet élément dans le panneau de surveillance. Ceci est utile pour ce qui est normalement émis par un appel de console. Log parce qu’il est essentiellement ce qu’il fait, il émet la valeur de la variable observée lorsque le point d’arrêt est activé. Ceci est utile parce qu’il vous permet d’économiser du temps en suivant les variables dans le panneau de débogage chaque fois que vous redémarrez le débogueur.
Dans l’exemple ci – dessus, j’ai examiné la variable globale wpmdb afin que vous puissiez y accéder rapidement lorsque vous ouvrez un point d’arrêt. Une autre astuce que j’utilise souvent avec le débogueur phpstorm est l’outil d’expression de calcul. Cet outil vous permet de vérifier et de calculer les valeurs en fonction du Code actuellement en pause. Dans l’exemple ci – dessus, j’a i vu un appel Ajax renvoyer une variable de date dans un rappel Ajax jquery réussi. Cependant, les données retournées sont une chaîne json et j’espère qu’elle est bien formatée. Avec l’outil d’expression d’évaluation, je peux utiliser la méthode jquery $. Parsejson () génère un objet JavaScript formaté pour un examen plus approfondi. Cet outil est également disponible lorsque vous utilisez le débogueur PHP Xdebug. Enfin, je voudrais vous présenter une autre caractéristique que je considère comme la plus étonnante du débogueur phpstorm: la capacité de déboguer le javascript et le Code PHP dans la même session de débogage. Vous pouvez le voir lorsque les valeurs sont transférées du JavaScript frontal au PHP arrière. Ceci est particulièrement utile pour traiter les appels Ajax et leurs gestionnaires d’arrière – plan. Par exemple, supposons que vous publiiez des valeurs à l’arrière – plan PHP via Ajax et que ces valeurs soient sur le point d’être corrompues. Vous pouvez définir des points d’arrêt dans Javascript pour vérifier