Déboguer Javascript Chrome

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo 04.11.2021

Même pour les professionnels, le codage n`est pas facile. C`est probablement la raison pour laquelle les développeurs passent beaucoup de temps à chercher des bogues dans leur code. Parfois, un bogue est évident, provoquant le plantage de tout le programme en même temps. D`autres fois, un bogue est très subtil, produisant une sortie attrayante qui contient toujours des défauts.

Aussi contre-intuitif que cela puisse paraître, les bogues évidents sont meilleurs car ils sont plus faciles à trouver. Un bogue sournois peut se cacher dans les logiciels de tous les jours pendant des années.

Pensez-y de cette façon : si vous étiez dans un bâtiment qui se remplissait lentement de gaz toxique, vous voudriez que le gaz soit inodore , insipide et incolore, ou violet vif et sentant la poudre. cannon ?

Le débogage est une étape cruciale dans le processus de développement , de nombreux outils sont disponibles pour le faire. Aujourd`hui, nous allons parler du débogage de JavaScript dans Chrome. Javascript est de loin l`un des langages les plus populaires - dans l`ensemble et sans doute le langage le plus populaire pour le développement Web. De même, Chrome est l`un des navigateurs Web les plus utilisés.

En tant que personne qui sera bientôt un développeur Web en demande , c`est une bonne idée de vous familiariser avec le débogage JavaScript avec Chrome. Je vous encourage à suivre cet élégant exemple de page Web > créé spécifiquement pour pratiquer le débogage.

Utilisation du panneau Source

Chrome est livré avec un ensemble d`outils puissants qui permettent aux développeurs d`inspecter le code source d`un site Web, y compris HTML, CSS et Javascript.

C`est un excellent moyen de lire le code des sites Web que vous aimez et d`apprendre à les déboguer.

Prenez le tour

À partir de 2019 et de la dernière version de Chrome, l`accès aux outils de développement est aussi simple que d`aller dans Affichage > Développeur > Développement d`outils dans le menu supérieur du navigateur à l`écran. Cela ouvre le panneau des développeurs Chrome avec ses nombreux onglets utiles.

L`onglet "Eléments" permet de parcourir le HTML et le JavaScript qui composent la page web. L`onglet "Console" vous offre un espace pour bricoler avec JavaScript. Ouvrez la console de la page d`exemple liée dans la section précédente et tapez console.log (`hello`). Cette commande JavaScript doit s`exécuter dans votre navigateur.

L`onglet "Sources" vous montre le contenu réel des fichiers source de la page et vous permet de définir des points d`arrêt et d`inspecter la pile des appels.

Points d`arrêt et débogueurs ;

Avec les instructions d`impression, les points d`arrêt sont l`une des techniques de base utilisées par les développeurs pour le débogage.

Définir un arrêt de point d`arrêt dans la console Chrome est simple - cliquez simplement sur le numéro éro J`étais de la ligne qui vous intéresse Un point d`arrêt est un endroit où le code s`arrête automatiquement dans son exécution. Cela vous permet d`inspecter tout ce qui s`est passé jusqu`à présent, y compris des éléments tels que la valeur actuelle de chaque variable et toutes les transformations qui ont eu lieu.

Les points d`arrêt sont un excellent moyen de vérifier la progression de votre code pour voir si quelque chose s`est mal passé.

Nous pouvons obtenir le même effet manuellement en plaçant le débogueur ; dans notre code où nous voulons démarrer le processus de débogage.

En définissant plusieurs points d`arrêt, nous pouvons obtenir une vue rapprochée de tout ce que fait notre code, ce qui facilite la détection des erreurs.

Bien que ce ne soit certainement pas tout ce dont vous avez besoin pour maîtriser l`art du débogage, c`est un avantage appréciable. La correction de code la plus correcte consiste à réfléchir très patiemment et très clairement à ce que vous vouliez faire avec votre code et à le comparer à ce que vous avez réellement dit dans votre. . ;