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 --- .../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 +++++++++++++++ 15 files changed, 357 insertions(+) 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 (limited to 'files/fr/tools/debugger/how_to') 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.

-- cgit v1.2.3-54-g00ecf