From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../debugger/break_on_dom_mutation/index.html | 25 +++++ .../how_to/access_debugging_in_add-ons/index.html | 26 +++++ .../how_to/breaking_on_exceptions/index.html | 28 +++++ .../debugger/how_to/debug_eval_sources/index.html | 29 +++++ .../debugger/how_to/disable_breakpoints/index.html | 16 +++ .../highlight_and_inspect_dom_nodes/index.html | 16 +++ .../debugger/how_to/ignore_a_source/index.html | 24 ++++ files/fr/tools/debugger/how_to/index.html | 12 ++ .../debugger/how_to/open_the_debugger/index.html | 20 ++++ .../how_to/pretty-print_a_minified_file/index.html | 20 ++++ files/fr/tools/debugger/how_to/search/index.html | 30 +++++ .../debugger/how_to/set_a_breakpoint/index.html | 45 ++++++++ .../how_to/set_a_conditional_breakpoint/index.html | 16 +++ .../how_to/set_watch_expressions/index.html | 18 +++ .../debugger/how_to/step_through_code/index.html | 25 +++++ .../debugger/how_to/use_a_source_map/index.html | 32 ++++++ files/fr/tools/debugger/index.html | 57 ++++++++++ .../tools/debugger/keyboard_shortcuts/index.html | 12 ++ .../debugger/set_an_xhr_breakpoint/index.html | 31 +++++ .../fr/tools/debugger/source_map_errors/index.html | 61 ++++++++++ files/fr/tools/debugger/ui_tour/index.html | 125 +++++++++++++++++++++ 21 files changed, 668 insertions(+) create mode 100644 files/fr/tools/debugger/break_on_dom_mutation/index.html create mode 100644 files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html create mode 100644 files/fr/tools/debugger/how_to/debug_eval_sources/index.html create mode 100644 files/fr/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/fr/tools/debugger/how_to/ignore_a_source/index.html create mode 100644 files/fr/tools/debugger/how_to/index.html create mode 100644 files/fr/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/fr/tools/debugger/how_to/search/index.html create mode 100644 files/fr/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/fr/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/fr/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/fr/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/fr/tools/debugger/index.html create mode 100644 files/fr/tools/debugger/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/debugger/set_an_xhr_breakpoint/index.html create mode 100644 files/fr/tools/debugger/source_map_errors/index.html create mode 100644 files/fr/tools/debugger/ui_tour/index.html (limited to 'files/fr/tools/debugger') diff --git a/files/fr/tools/debugger/break_on_dom_mutation/index.html b/files/fr/tools/debugger/break_on_dom_mutation/index.html new file mode 100644 index 0000000000..5ab981337b --- /dev/null +++ b/files/fr/tools/debugger/break_on_dom_mutation/index.html @@ -0,0 +1,25 @@ +--- +title: S’arrêter sur un évènement DOM +slug: Outils/Débogueur/Comment/S_arrêter_sur_un_évènement_DOM +translation_of: Tools/Debugger/Break_on_DOM_mutation +translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+ +
+

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur.

+ +

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

+
+ +

Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.

+ +

Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la barre d'outils (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le panneau des événements. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :

+ +

+ +

Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.

+ +

Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..5c14593f5f --- /dev/null +++ b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,26 @@ +--- +title: Accéder au débogage depuis un module complémentaire +slug: Outils/Débogueur/Comment/Accéder_au_débogage_depuis_un_module_complàmentaire +translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons +--- +
{{ToolsSidebar}}
+

Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.

+
+ +

Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :

+ + + +

Fichiers en relation :

+ + + +

Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug 653545.

diff --git a/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html new file mode 100644 index 0000000000..b009f06df0 --- /dev/null +++ b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html @@ -0,0 +1,28 @@ +--- +title: S'arrêter sur les exceptions +slug: Outils/Débogueur/Comment/Breaking_on_exceptions +translation_of: Tools/Debugger/How_to/Breaking_on_exceptions +--- +
{{ToolsSidebar}}
+ +

Firefox version 64

+ +
Pour que le Débogueur s'arrête sur les exceptions, il suffit de cliquer sur une de ces cases à cocher dans la Liste des points d'arrêt :
+ +
 
+ +
Screen shot from 64.0+build3-0ubuntu0.16.04.1
+ +

Versions antérieures

+ +

Pour que le Débogueur s'arrête sur les exceptions, Il faut cliquer sur ce bouton : dans la barre d'outils.

+ +

{{EmbedYouTube("UWIO_UM827k")}}

+ +

Le bouton à trois états possibles, cliquer sur celui-ci passe d'un état au suivant.

+ +

: ne s'arrête sur aucune exception. C'est l'état par défaut.

+ +

: ne s'arrête que les exceptions qui ne sont pas attrapées.

+ +

: s'arrête sur toutes les exceptions.

diff --git a/files/fr/tools/debugger/how_to/debug_eval_sources/index.html b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..e0c305f21a --- /dev/null +++ b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html @@ -0,0 +1,29 @@ +--- +title: Déboguer des sources évaluées +slug: Outils/Débogueur/Comment/Déboguer_des_sources_évaluées +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +
{{ToolsSidebar}}
+ +

Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une Function.

+ +

Dans la vidéo ci-dessous, un page contenant le code source suivant est chargée :

+ +
var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+
+ +

Cela nome le script "mon-foo.js"en utilisant l'instruction //# sourceURL. Cette source est alors listée dans le panneau de la liste des sources, et peut être ouverte comme n'importe quelle source.

+ +

{{EmbedYouTube("nFm8F8Anmic")}}

+ +

Le nom du script apparaitra également dans la pile d'exécution dans la Console Web.

+ +

Le Débogueur s’arrêtera également aux expressions debugger; dans les sources évaluées anonymes

diff --git a/files/fr/tools/debugger/how_to/disable_breakpoints/index.html b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..5ca12ea619 --- /dev/null +++ b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,16 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Débogueur/Comment/Désactiver_des_points_d_arrêts +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +
{{ToolsSidebar}}
+ +

Pour désactiver un point d'arrêt spécifique, il suffit de décocher la case à cocher à côté du point d'arrêt dans la liste des points d'arrêt.

+ +

Pour désactiver tous les points d'arrêts, il suffit cliquer sur cette icône : dans la barre d'outils.

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

+ +

Après avoir désactivé un point d'arrêt, sa couleur sera plus claire avec une bordure foncée. Par exemple :

+ +

diff --git a/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..4c0299205c --- /dev/null +++ b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: Afficher en surbrillance et inspecter les nœuds DOM +slug: Outils/Débogueur/Comment/Afficher_en_surbrillance_et_inspecter_le_DOM +translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes +--- +
{{ToolsSidebar}}
+

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)

+ +

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

+
+ +

Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :

+ +

De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira l'Inspecteur avec l'élément DOM sélectionné.

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/fr/tools/debugger/how_to/ignore_a_source/index.html b/files/fr/tools/debugger/how_to/ignore_a_source/index.html new file mode 100644 index 0000000000..2af7f19958 --- /dev/null +++ b/files/fr/tools/debugger/how_to/ignore_a_source/index.html @@ -0,0 +1,24 @@ +--- +title: Mettre une source dans une boîte noire +slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire +translation_of: Tools/Debugger/How_to/Ignore_a_source +--- +
{{ToolsSidebar}}
+ +

Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que jQuery, Ember, ou Angular, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des boites noires. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.

+ +

Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :

+ +

+ +

Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la Barre de développement  et utilisant la commande   dbg blackbox :

+ +

+ +

Quand une source est mise dans une boîte noire :

+ + diff --git a/files/fr/tools/debugger/how_to/index.html b/files/fr/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..4b9f36e8fe --- /dev/null +++ b/files/fr/tools/debugger/how_to/index.html @@ -0,0 +1,12 @@ +--- +title: Comment faire… +slug: Outils/Débogueur/Comment +tags: + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}
+ +

Ces articles décrivent comment utiliser le débogueur.

+ +

{{ ListSubpages () }}

diff --git a/files/fr/tools/debugger/how_to/open_the_debugger/index.html b/files/fr/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..e56cd0a53c --- /dev/null +++ b/files/fr/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,20 @@ +--- +title: Ouvrir le Débogueur +slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

Il y a deux façons d'ouvrir le Débogueur :

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

diff --git a/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..4ba2ddaf91 --- /dev/null +++ b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,20 @@ +--- +title: Formater et indenter un fichier minifié +slug: Outils/Débogueur/Comment/Formater_et_indenter_un_fichier_minifié +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +
{{ToolsSidebar}}
+ +

Pour formater et indenter un fichier qui a été minifié, il faut cliquer sur cette icône : dans le panneau des source. Le Débogueur formatera la source et l'affichera dans un nouveau fichier avec un nom au format : "{ }[nom-original]".

+ +

+ +

Après un clic sur l'icone, le code source ressemble à ceci:

+ + + +

+ +
+

Note: Pour mettre en forme du code JavaScript inline, il suffit de double cliquer sur le code dans panneau de l'inspecteur.

+
diff --git a/files/fr/tools/debugger/how_to/search/index.html b/files/fr/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..3db07016dc --- /dev/null +++ b/files/fr/tools/debugger/how_to/search/index.html @@ -0,0 +1,30 @@ +--- +title: Rechercher +slug: Outils/Débogueur/Comment/Search +translation_of: Tools/Debugger/How_to/Search +--- +
{{ToolsSidebar}}
+ +

Rechercher des fichiers

+ +

Pour rechercher un fichier en particulier, il faut utiliser le raccourci clavier Ctrl + P (ou Cmd + P sur Mac) puis écrire les termes de recherche. Le panneau des sources affichera une liste des fichiers. Il est possible d'utiliser les flèches haut et bas pour se déplacer dans la liste. La touche Entrée ouvre le fichier sélectionné :

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

Rechercher dans un fichier

+ +

Pour chercher dans le fichier actuellement chargé dans le panneau des sources il faut appuyer sur Ctrl + F (ou Cmd + F sur Mac) pendant que le panneau est sélectionné. Le Débogueur affichera alors le nombre de résultats et les surlignera dans le code :

+ +

+ +

Rechercher dans tous fichiers

+ +

Il est également possible de rechercher dans une chaine dans tous les fichiers du projet actuel. Il suffit pour cela de presser Ctrl + Maj + F (Windows et Linux) or Cmd + Maj + F (macOS) puis d'entrer la chaine de caractères recherchée.

+ +

+ +

Si la chaine existe dans un des fichiers du projet, la recherche retournera une liste triée par fichier de par ligne.

+ +

+ +

Cliquer sur un élément dans la liste emmène directement dans le fichier à la ligne correspondante.

diff --git a/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..5f0ac95129 --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,45 @@ +--- +title: Ajouter un point d'arrêt +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt +tags: + - JavaScript + - Tools +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+ +

Il est possible de placer un point d'arrêt de trois façons différentes :

+ + + +

Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.

+ +

+ +

Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :

+ +

+ +

Chaque point d'arrêt est affiché à deux endroits dans le débogueur :

+ + + +

À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à parse est fait, ou à l'appel de getItem.

+ +
tasks = JSON.parse(localStorage.getItem('todoList'));
+ +

Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur parse.

+ +

+ +

Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.

diff --git a/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..b78dfa5a8e --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,16 @@ +--- +title: Ajouter un point d’arrêt conditionnel +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt_conditionnel +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +
{{ToolsSidebar}}
+ +

Un point d'arrêt normal est juste associé à une ligne : lorsque le programme arrive à cette ligne, le Débogueur s'arrête. Un point d'arrêt conditionnel possède en plus une condition associée représentée par une expression. Dans ce cas, lorsque le programme arrive à la ligne du point d'arrêt, le Débogueur ne s'arrêtera que si l'expression est évaluée à true.

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le panneau des sources et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait puis appuyer sur Entrée pour terminer.

+ +

les points d'arrêt conditionnels sont représentés par une flèche orange superposée au numéro de ligne.

+ +

Le menu contextuel (clic droit) de n'importe quel point d'arrêt (conditionnel ou non) possède une option "Modifier le point d'arrêt". Il est possible d'utiliser cette option pour modifier ou ajouter une condition.

diff --git a/files/fr/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..0ee376dc77 --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,18 @@ +--- +title: Ajouter une expression espionne +slug: Outils/Débogueur/Comment/Set_Watch_Expressions +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +
{{ToolsSidebar}}
+ +

Lors d'une rude séance de débogage, il est parfois utile d'espionner des expressions lorsque le code est en pause. Le Débogueur possède un panneau pour créer des expressions espionnes. Lors du parcours du code, ces expressions seront alors surveillées de près. Et chaque changement sera affiché.

+ +

Pour créer une expression espionne, il faut d'abord ouvrir le panneau correspondant dans la partie droite du Débogueur. Puis cliquer sur "Ajouter une expression espionne". Et enfin, entrer l'expression voulue dans le champ text sélectionné :

+ +

+ +

Le Débogueur sauvegardera l'expression et l'espionnera tout au long du parcours du code. Lorsque le Débogueur rencontre un point d'arrêt, il affichera automatiquement les valeurs des expressions espionnes :

+ +

+ +

Il est possible de parcourir le code et de voir les changements des expressions. À chaque changement, le panneau sera brièvement coloré en jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de "x" à côté de celle-ci. Et bien sûr, il est possible d'avoir plusieurs expressions à la fois.

diff --git a/files/fr/tools/debugger/how_to/step_through_code/index.html b/files/fr/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..9e3d8a3ae7 --- /dev/null +++ b/files/fr/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,25 @@ +--- +title: Parcourir le code +slug: Outils/Débogueur/Comment/Parcourir_le_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +
{{ToolsSidebar}}
+ +

Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons de la barre d'outils :

+ +

+ +

De gauche à droite :

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

Lors d'une pause, il est possible d'appuyer sur la touche Échap afind d'ouvrir la Console pour avoir plus d'informations sur les erreurs et les variables :

+ +

diff --git a/files/fr/tools/debugger/how_to/use_a_source_map/index.html b/files/fr/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..fb9c4d3c8b --- /dev/null +++ b/files/fr/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Utiliser une cartographie de code source +slug: Outils/Débogueur/Comment/Utiliser_une_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :

+ + + +

Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une cartographie de code source (source map) est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.

+ +

Pour activer le débogueur, il est nécessaire de :

+ + + +
//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

Dans la vidéo ci-dessus, la page https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :

+ +
//# sourceMappingURL=main.js.map
+ +

Dans le panneau des sources, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.

diff --git a/files/fr/tools/debugger/index.html b/files/fr/tools/debugger/index.html new file mode 100644 index 0000000000..9ad5a4fead --- /dev/null +++ b/files/fr/tools/debugger/index.html @@ -0,0 +1,57 @@ +--- +title: Débogueur +slug: Outils/Débogueur +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - Tools +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +
Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retouver et de corriger les bugs.
+ +
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Android utilisant Firefox pour Android. Voir le guide du débogage à distance pour apprendre à connecter le débogueur à une cible distante.

+ +

Pour vous repérer dans le débogueur, voici une courte visite guidée de l'interface utilisateur.

+ +
+

Comment ?

+ +

Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :

+ +
+ +
+ +
+

Référence

+ +
+ +
diff --git a/files/fr/tools/debugger/keyboard_shortcuts/index.html b/files/fr/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..b3d4e9b803 --- /dev/null +++ b/files/fr/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Débogueur/Raccourcis_clavier +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Ra{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "debugger") }}

+ +

Raccourcis Généraux

+ +

{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html new file mode 100644 index 0000000000..30e6bfd813 --- /dev/null +++ b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set an XHR breakpoint +slug: Outils/Débogueur/Set_an_XHR_breakpoint +translation_of: Tools/Debugger/Set_an_XHR_breakpoint +--- +

{{ToolsSidebar}}

+ +

Un point d'arrêt XHR (XMLHttpRequest) interrompt l'exécution du code lorsqu'une requête XHR est envoyée afin de pouvoir examiner l'état du programme.
+ Pour activer ce point d'arrêt, il faut une fois le Débogueur ouvert :

+ +
    +
  1. Soit cliquer sur "Arrêt à chaque URL" ce qui interrompt l'exécution à chaque requête.
    2. +
  2. Soit cliquer sur l’icône en forme de "+" a droite du titre "Points d'arrêt XHR" et rentrer l'URL de la requête sur laquelle interruption est voulue, puis valider avec Entrée.
    3. +
+ +
+

Note: Si un mot clé est entré au lieu d'une URL, alors l'exécution s’arrêtera sur tout appel à une URL contenant ce mot clé.

+
+ +

+ +

Lorsque le code s’interrompt sur une requête XHR, le panneau droit aura deux sections additionnelles :

+ +
+
Pille d'appel
+
Cette section liste les fonctions qui ont été exécutés avant d'arriver au code actuel. Cliquer sur un élément de cette liste sautera à la ligne associée dans la fenêtre du code.
+
Portées
+
Cette section liste les valeurs présentes dans la portée de la fonction, méthode, ou gestionnaire d'évènement, dans lequel le point d'arrêt s'est activé.
+
+ +

diff --git a/files/fr/tools/debugger/source_map_errors/index.html b/files/fr/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..dba0164fa6 --- /dev/null +++ b/files/fr/tools/debugger/source_map_errors/index.html @@ -0,0 +1,61 @@ +--- +title: Erreurs des source map +slug: Outils/Débogueur/Source_map_errors +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Les Source maps sont des fichiers JSON permettant d'associer les sources transformées (minifiés, combinés, générées) lues par le navigateur, à leurs fichiers source originels. Il est parfois possible d'avoir des problèmes avec les sources map. Cette page présente les plus communs d'entre eux ainsi que des solutions pour les corriger.

+ +
+

Note: En cas d'infamiliarité avec les source map, il est possible d'en apprendre plus ici : Utiliser une source map.

+
+ +

Gestion d'erreurs des source map

+ +

Dès lors qu'une erreur arrive, un message apparaitra dans la Console. Le message affichera le message d'erreur, l'URL de la ressource, et l'URL de la source map :

+ +

Error from invalid JSON

+ +

Ici, l'URL de la ressource URL indique que bundle.js mentionne une source map, et l'URL de la source map montre ou trouver la source map en elle-même (avec un chemin relatif à la ressource). L'erreur indique que la source map n'est pas un JSON valide.

+ +

Il y a quelques erreurs fréquentes qui reviennent avec les sources map. Elles sont décrites dans les sections suivantes.

+ +

La source map est inexistante ou inaccessible

+ +

Source map file is missing

+ +

La solution ici est de vérifier que le fichier est bien accessible par le navigateur (le fichier existe, et l'URL est bonne).

+ +

Source map invalide

+ +

Le code de la source map data peut être invalide. Soit parce que ce n'est tout simplement pas un fichier JSON, soit parce qu'il est mal formaté. Les messages d'erreurs typiques sont:

+ + + +

Error: "version" is a required argument

+ +

Source originale manquante

+ +

Une source originale peut manquer. Il est possible d'avoir cette erreur en tentant d'ouvrir une source originale dans le Débogueur. Le message est un peu différent dans ce cas :

+ +

Debugger source tab showing the error

+ +

Ici, l'erreur sera également affichée dans l'onglet source du Débogueur :

+ +

Debugger source tab showing the error

+ +

NetworkError lors de la récupération d'une ressource

+ +

Un bug dans Firefox l’empêche de charger les sources maps des extensions web.

+ +

Voir le Bug 1437937: WebExtensions Doesn't Find Source Maps pour plus de détails.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

Le seule workaround est de changer manuellement l'URL de la map pour la rendre publique (http://localhost:1234/file.map.js) et de lancer un serveur web local sur ce port.

diff --git a/files/fr/tools/debugger/ui_tour/index.html b/files/fr/tools/debugger/ui_tour/index.html new file mode 100644 index 0000000000..44c25e1835 --- /dev/null +++ b/files/fr/tools/debugger/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur +translation_of: Tools/Debugger/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Cet article est une visite guidée des principales sections de l'interface utilisateur du Débogueur JavaScript. Cette interface est séparée en trois panneaux :

+ + + +

+ +

Panneau de la liste des sources

+ +

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.

+ +

+ +

Il est possible de rechercher un fichier en utilisant le raccourci clavier Ctrl + P (Cmd + P sur Mac).

+ +

Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.

+ +

+ +

Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".

+ +

+ +

Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.

+ +

+ +

Onglet Structure

+ +

L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.

+ +

Panneau des sources

+ +

Ce panneau affiche le fichier JavaScript actuellement chargé.

+ +

+ +

Lorsque le panneau des sources est sélectionné, il est possible de rechercher une string dans le fichier en utilisant  Ctrl + F (Cmd + F sur Mac).

+ +

Les points d'arrêt ont une flèche bleue superposée au numéro de ligne. Les points d'arrêt conditionnels ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :

+ + + +

+ +

La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de tableRow dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que todolist soit undefined.

+ +

Barre d'outils

+ +

La barre d'outils est située en haut du panneau de droite :

+ +

+ +

Cette barre est composée de :

+ + + +

Liste des points d'arrêt

+ +

Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet d'activer/désactiver le point d'arrêt :

+ +

+ +

Expressions espionnes

+ +

Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :

+ +

+ +

Infobulle de variable

+ +

Survoler une variable dans le code source affichera une infobulle contentant sa valeur :

+ +

+ +

Pile d'exécution (call stack)

+ +

Lorsque le Débogueur est en pause, une pile d'exécution est affichée :

+ +

+ +

Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.

+ +

Portées

+ +

Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :

+ +

+ +

Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).

-- cgit v1.2.3-54-g00ecf