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 --- files/fr/tools/3d_view/index.html | 101 ++ .../index.html | 211 ++++ files/fr/tools/about_colon_debugging/index.html | 211 ++++ files/fr/tools/accessibility_inspector/index.html | 182 ++++ .../accessibility_inspector/simulation/index.html | 96 ++ .../tools/accessing_the_developer_tools/index.html | 21 + files/fr/tools/browser_console/index.html | 195 ++++ files/fr/tools/browser_toolbox/index.html | 77 ++ .../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 +++ files/fr/tools/devtoolsapi/index.html | 835 ++++++++++++++ files/fr/tools/devtoolscolors/index.html | 331 ++++++ files/fr/tools/dom_property_viewer/index.html | 46 + files/fr/tools/eyedropper/index.html | 47 + .../fr/tools/firefox_os_simulator_clone/index.html | 88 ++ files/fr/tools/index.html | 225 ++++ files/fr/tools/index/index.html | 8 + files/fr/tools/json_viewer/index.html | 22 + files/fr/tools/keyboard_shortcuts/index.html | 1134 ++++++++++++++++++++ .../tools/measure_a_portion_of_the_page/index.html | 31 + files/fr/tools/memory/aggregate_view/index.html | 149 +++ files/fr/tools/memory/basic_operations/index.html | 64 ++ .../tools/memory/dom_allocation_example/index.html | 54 + files/fr/tools/memory/dominators/index.html | 62 ++ files/fr/tools/memory/dominators_view/index.html | 156 +++ files/fr/tools/memory/index.html | 68 ++ files/fr/tools/memory/monster_example/index.html | 81 ++ files/fr/tools/memory/tree_map_view/index.html | 45 + files/fr/tools/migrating_from_firebug/index.html | 270 +++++ files/fr/tools/network_monitor/index.html | 64 ++ .../performance_analysis/index.html | 43 + .../fr/tools/network_monitor/recording/index.html | 32 + .../network_monitor/request_details/index.html | 184 ++++ .../tools/network_monitor/request_list/index.html | 377 +++++++ .../fr/tools/network_monitor/throttling/index.html | 101 ++ files/fr/tools/network_monitor/toolbar/index.html | 61 ++ .../fr/tools/page_inspector/3-pane_mode/index.html | 65 ++ .../how_to/edit_css_filters/index.html | 37 + .../how_to/examine_and_edit_css/index.html | 228 ++++ .../how_to/examine_and_edit_html/index.html | 326 ++++++ .../examine_and_edit_the_box_model/index.html | 37 + .../how_to/examine_event_listeners/index.html | 37 + .../how_to/examine_grid_layouts/index.html | 125 +++ files/fr/tools/page_inspector/how_to/index.html | 10 + .../how_to/inspect_and_select_colors/index.html | 22 + .../how_to/open_the_inspector/index.html | 35 + .../reposition_elements_in_the_page/index.html | 22 + .../how_to/select_an_element/index.html | 36 + .../select_and_highlight_elements/index.html | 30 + .../how_to/use_the_inspector_api/index.html | 46 + .../index.html | 16 + .../how_to/view_background_images/index.html | 12 + .../how_to/visualize_transforms/index.html | 14 + .../index.html | 26 + .../index.html | 84 ++ .../index.html | 107 ++ .../how_to/work_with_animations/index.html | 180 ++++ files/fr/tools/page_inspector/index.html | 61 ++ .../page_inspector/keyboard_shortcuts/index.html | 10 + files/fr/tools/page_inspector/ui_tour/index.html | 94 ++ files/fr/tools/paint_flashing_tool/index.html | 86 ++ files/fr/tools/performance/allocations/index.html | 86 ++ files/fr/tools/performance/call_tree/index.html | 122 +++ files/fr/tools/performance/examples/index.html | 8 + .../sorting_algorithms_comparison/index.html | 71 ++ files/fr/tools/performance/flame_chart/index.html | 103 ++ files/fr/tools/performance/frame_rate/index.html | 58 + files/fr/tools/performance/how_to/index.html | 63 ++ files/fr/tools/performance/index.html | 94 ++ .../scenarios/animating_css_properties/index.html | 154 +++ files/fr/tools/performance/scenarios/index.html | 8 + .../scenarios/intensive_javascript/index.html | 231 ++++ files/fr/tools/performance/ui_tour/index.html | 125 +++ files/fr/tools/performance/waterfall/index.html | 481 +++++++++ .../remote_debugging/chrome_desktop/index.html | 49 + .../debugging_firefox_desktop/index.html | 44 + .../index.html | 70 ++ files/fr/tools/remote_debugging/index.html | 20 + .../tools/remote_debugging/thunderbird/index.html | 44 + files/fr/tools/responsive_design_mode/index.html | 213 ++++ files/fr/tools/rulers/index.html | 27 + files/fr/tools/settings/index.html | 168 +++ files/fr/tools/shader_editor/index.html | 63 ++ files/fr/tools/style_editor/index.html | 113 ++ files/fr/tools/taking_screenshots/index.html | 48 + files/fr/tools/tips/index.html | 129 +++ files/fr/tools/tools_toolbox/index.html | 102 ++ files/fr/tools/validators/index.html | 71 ++ files/fr/tools/view_source/index.html | 79 ++ files/fr/tools/web_audio_editor/index.html | 71 ++ .../tools/web_console/console_messages/index.html | 469 ++++++++ files/fr/tools/web_console/helpers/index.html | 82 ++ files/fr/tools/web_console/index.html | 47 + .../web_console/keyboard_shortcuts/index.html | 12 + files/fr/tools/web_console/rich_output/index.html | 77 ++ .../fr/tools/web_console/split_console/index.html | 20 + .../the_command_line_interpreter/index.html | 161 +++ files/fr/tools/web_console/ui_tour/index.html | 29 + files/fr/tools/working_with_iframes/index.html | 25 + 118 files changed, 11923 insertions(+) create mode 100644 files/fr/tools/3d_view/index.html create mode 100644 files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html create mode 100644 files/fr/tools/about_colon_debugging/index.html create mode 100644 files/fr/tools/accessibility_inspector/index.html create mode 100644 files/fr/tools/accessibility_inspector/simulation/index.html create mode 100644 files/fr/tools/accessing_the_developer_tools/index.html create mode 100644 files/fr/tools/browser_console/index.html create mode 100644 files/fr/tools/browser_toolbox/index.html 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 create mode 100644 files/fr/tools/devtoolsapi/index.html create mode 100644 files/fr/tools/devtoolscolors/index.html create mode 100644 files/fr/tools/dom_property_viewer/index.html create mode 100644 files/fr/tools/eyedropper/index.html create mode 100644 files/fr/tools/firefox_os_simulator_clone/index.html create mode 100644 files/fr/tools/index.html create mode 100644 files/fr/tools/index/index.html create mode 100644 files/fr/tools/json_viewer/index.html create mode 100644 files/fr/tools/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/measure_a_portion_of_the_page/index.html create mode 100644 files/fr/tools/memory/aggregate_view/index.html create mode 100644 files/fr/tools/memory/basic_operations/index.html create mode 100644 files/fr/tools/memory/dom_allocation_example/index.html create mode 100644 files/fr/tools/memory/dominators/index.html create mode 100644 files/fr/tools/memory/dominators_view/index.html create mode 100644 files/fr/tools/memory/index.html create mode 100644 files/fr/tools/memory/monster_example/index.html create mode 100644 files/fr/tools/memory/tree_map_view/index.html create mode 100644 files/fr/tools/migrating_from_firebug/index.html create mode 100644 files/fr/tools/network_monitor/index.html create mode 100644 files/fr/tools/network_monitor/performance_analysis/index.html create mode 100644 files/fr/tools/network_monitor/recording/index.html create mode 100644 files/fr/tools/network_monitor/request_details/index.html create mode 100644 files/fr/tools/network_monitor/request_list/index.html create mode 100644 files/fr/tools/network_monitor/throttling/index.html create mode 100644 files/fr/tools/network_monitor/toolbar/index.html create mode 100644 files/fr/tools/page_inspector/3-pane_mode/index.html create mode 100644 files/fr/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/fr/tools/page_inspector/how_to/index.html create mode 100644 files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/fr/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html create mode 100644 files/fr/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html create mode 100644 files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html create mode 100644 files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html create mode 100644 files/fr/tools/page_inspector/how_to/view_background_images/index.html create mode 100644 files/fr/tools/page_inspector/how_to/visualize_transforms/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/fr/tools/page_inspector/index.html create mode 100644 files/fr/tools/page_inspector/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/page_inspector/ui_tour/index.html create mode 100644 files/fr/tools/paint_flashing_tool/index.html create mode 100644 files/fr/tools/performance/allocations/index.html create mode 100644 files/fr/tools/performance/call_tree/index.html create mode 100644 files/fr/tools/performance/examples/index.html create mode 100644 files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html create mode 100644 files/fr/tools/performance/flame_chart/index.html create mode 100644 files/fr/tools/performance/frame_rate/index.html create mode 100644 files/fr/tools/performance/how_to/index.html create mode 100644 files/fr/tools/performance/index.html create mode 100644 files/fr/tools/performance/scenarios/animating_css_properties/index.html create mode 100644 files/fr/tools/performance/scenarios/index.html create mode 100644 files/fr/tools/performance/scenarios/intensive_javascript/index.html create mode 100644 files/fr/tools/performance/ui_tour/index.html create mode 100644 files/fr/tools/performance/waterfall/index.html create mode 100644 files/fr/tools/remote_debugging/chrome_desktop/index.html create mode 100644 files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html create mode 100644 files/fr/tools/remote_debugging/index.html create mode 100644 files/fr/tools/remote_debugging/thunderbird/index.html create mode 100644 files/fr/tools/responsive_design_mode/index.html create mode 100644 files/fr/tools/rulers/index.html create mode 100644 files/fr/tools/settings/index.html create mode 100644 files/fr/tools/shader_editor/index.html create mode 100644 files/fr/tools/style_editor/index.html create mode 100644 files/fr/tools/taking_screenshots/index.html create mode 100644 files/fr/tools/tips/index.html create mode 100644 files/fr/tools/tools_toolbox/index.html create mode 100644 files/fr/tools/validators/index.html create mode 100644 files/fr/tools/view_source/index.html create mode 100644 files/fr/tools/web_audio_editor/index.html create mode 100644 files/fr/tools/web_console/console_messages/index.html create mode 100644 files/fr/tools/web_console/helpers/index.html create mode 100644 files/fr/tools/web_console/index.html create mode 100644 files/fr/tools/web_console/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/web_console/rich_output/index.html create mode 100644 files/fr/tools/web_console/split_console/index.html create mode 100644 files/fr/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/fr/tools/web_console/ui_tour/index.html create mode 100644 files/fr/tools/working_with_iframes/index.html (limited to 'files/fr/tools') diff --git a/files/fr/tools/3d_view/index.html b/files/fr/tools/3d_view/index.html new file mode 100644 index 0000000000..f750324939 --- /dev/null +++ b/files/fr/tools/3d_view/index.html @@ -0,0 +1,101 @@ +--- +title: Vue 3D +slug: Outils/Vue_3D +tags: + - HTML + - Tools +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +
+

Depuis Firefox 47, la Vue 3D n'est plus disponible.

+
+ +

Lorsque vous cliquez sur le bouton Vue 3D, la page passe en mode Vue 3D ; dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle les blocs imbriqués de HTML sont de plus en plus " hauts ", se projetant vers l'extérieur depuis le bas de la page. Cette vue facilite la visualisation de l'imbrication de votre contenu.

+ +

+ +

En cliquant et en glissant sur la vue, vous pouvez faire tourner et réorienter la présentation 3D de la hiérarchie de DOM de votre page pour le voir d'angles différents, mieux examiner sa structure. Hors de l'image, les éléments deviennent visibles pour que vous puissiez voir où vos éléments sont placés par rapport au contenu visible. Vous pouvez cliquer sur des éléments pour voir leur code HTML dans l'inspecteur HTML ou l'inspecteur de Style. Au contraire, vous pouvez cliquer sur des éléments dans l'inspecteur pour changer quel élément est choisi dans la vue 3D.

+ +

Si vous ne voyez pas le bouton 3D dans l'inspecteur de page, il est possible que votre navigateur graphique doive être mis à jour.

+ +

Contrôle de la vue 3D

+ +

Il y a des raccourcis claviers et des touches avec la souris pour contrôler la vue 3D.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionClavierSouris
Zoom plus/moins+ / -Mollette vers le haut/bas
Rotation gauche/droitea / dFaire glisser vers la gauche/droite
Rotation haut/basw / sFaire glisser versle haut/bas
Se déplacer vers la gauche/droite / Souris à gauche/droite
Se déplacer vers le haut/bas / Souris en haut/bas
Remettre le zoom par défaut0Remet le taux d'agrandissement par défaut
Mettre le bloc sélectionné visiblefRend le bloc sélectionné visible {{ fx_minversion_inline("13.0") }}
Remettre la vue par défautrRemet le zoom, la rotation et le déplacement par défaut{{ fx_minversion_inline("12.0") }}
Masquer le blocxRend le bloc invisible, ce qui est pratique lorsqu'un bloc en dessous est caché. {{ fx_minversion_inline("12.0") }}
+ +

Causes de l'utilisation de la Vue 3D

+ +

Il y a différentes façons la vue 3D est utile :

+ + + +

Voir aussi

+ + diff --git a/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html new file mode 100644 index 0000000000..0aef8b6d19 --- /dev/null +++ b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging (before Firefox 68)' +slug: 'Outils/about:debugging/about:debugging_before_Firefox_68' +translation_of: 'Tools/about:debugging/about:debugging_before_Firefox_68' +--- +
{{ToolsSidebar}}
+ +

La page about:debugging vous fournit une place ou vous pouvez attacher les outils de développeurs de Firefox a un nombre de debugging targets. En ce moment, il soutien trois sortes principales de target: restartless add-ons, tabs, et workers.

+ +

Ouvrir la page about:debugging

+ +

Ils y a plusieurs façons d’ouvrir la page about:debugging:

+ + + +

Quand about:debugging ouvre, a votre gauche, vous allez voir une barre latérale permettant de basculer entre les deux vues principales: une pour add-ons et une pour workers.

+ +

Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de devtools.aboutdebugging.showSystemAddons. Si vous devez voir system add-ons, naviguez ver about:config et assurez-vous que la valeur est réglée sur true.

+ +

Add-ons

+ +
+

La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent basic bootstrapped extensions, Add-on SDK add-ons, et WebExtensions.

+
+ +

Cette page vous permet de faire deux choses :

+ + + +

+ +

Connecter l’Add-on Debugger

+ +
+

NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez Debugging WebExtensions pour plus de détails.

+
+ +

La page Add-ons dans about:debugging vous donnes une liste de tous les restartless add-ons qui sont actuellement installés (notez que cette liste pourrait avoir des add-ons inclus qui sont venus préinstaller avec votre Firefox). À côté de chaque entrée est un bouton appeler "Debug".

+ +

Si le bouton "Debug" est désactivé, cocher la boite "Enable add-on debugging".

+ +

Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et Add-on Debugger va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

Allez voir la page sure Add-on Debugger pour toutes les chose vous pouvez faires avec cet outil.

+ +
+

Le bouton "Enable add-on debugging" fonctionne en allumant les preferences devtools.chrome.enabled et devtools.debugger.remote-enabled. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur true, et décocher les définit sur false.

+ +

Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans Developer Tools Settings.

+
+ +

Charger un add-on temporaire

+ +

Avec le bouton "Load Temporary Add-on" n’importe quelle sorte de restartless add-on temporairement, à partir d’un répertoire sur disque. Il suffit de cliquer le bouton, naviguer ver le répertoire contenant le fichier add-on's, et sélectionner n’importe quel fichier dans ce répertoire. L’add-on temporaire sera afficher sous l’en-tête "Temporary Extensions".

+ +

Vous n’avez pas à emballer ou à signer l’add-on. L’add-on restera installer jusqu’au redémarrage de Firefox.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Les gros avantages de cette méthode, comparer à installer un add-on d’un XPI, sons:

+ + + +

Modifier un add-on temporaire

+ +

Si vous installez l’add-on de cette façon, que-ce passe t’il quand vous modifiez les fichiers add-on’s ?

+ +

Avant Firefox 48

+ + + +
+

Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox ne fonctionne pas.

+
+ +

A partir de Firefox 48

+ + + +

De Firefox 48 et plus tard:

+ + + +
+

Notez que dans Firefox 49 et plus tard, le bouton Reload est seulement activer pour les add-ons temporaire. Il va être désactiver pour tout autre add-ons.

+
+ +

Tabs

+ +

Dans Firefox 49 et plus tard, une page Tabs est disponible dans about:debugging — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.

+ +

+ +

Chaque entrée tab à un bouton Debug à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.

+ +

+ +
+

Notez que cette fonctionnalité n’est pas immédiatement utile pour le débogage des onglets desktop— vous pouvez ouvrir le toolbox pour déboguer un onglet déjà assez facilement— mais cela va devenir beaucoup plus utile quand about:debugging commence le support pour remote debugging, et cette page peut commencer à lister les onglets disponibles pour le débogage sur navigateurs mobiles, des simulateurs, etc. allez voir {{bug(1212802)}} pour les nouvelles sur ce domaine.

+
+ +

Workers

+ +

La page Workers vous montre vos workers, categoriser come suit:

+ + + +

Vous pouvez connectez les outils de développeurs à chaque worker, et envoyer des notifications push au service workers.

+ +

+ +

État de service worker

+ +

A partir de Firefox 52, la liste de service workers vous montre l’état du service worker dans son lifecycle. Trois états sont distingués:

+ + + +

+ +
+

Cette section utilise une démo simple de ServiceWorker, hébergé a  https://serviceworke.rs/push-simple/.

+
+ +

Débogage de workers

+ +

Pour un service worker, s’il est déjà en-marche, vous allez voir deux boutons à-côté, étiquetés "Debug" et "Push". S’il n’est pas déjà en-marche, vous verrez un bouton, étiqueté "Start": cliquez dessus pour commencer le service worker.

+ +

Cliquer "Debug" connecte le Débogueur JavaScript et Console a ce worker. Vous pouvez définir des points d’arrêt, step through code, watch variables, evaluate code, etc:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Enregistrement des workers

+ +

Premièrement, vous n’allez voir aucun worker lister sous Service Workers ou Shared Workers. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Avant Firefox 47, les service workers se montrais seulement quand ils étaient actuellement en marche.

+
+ +

Désinscrire les service workers

+ +
+

Nouveaux dans Firefox 48.

+
+ +

A partir de Firefox 48, vous allez voir un lien appeler "unregister" à-côté de chaque service worker enregistrees:

+ +

+ +

Cliquez le lien pour désinscrire le service worker.

+ +

Envoyer des évènements-push a des service workers

+ +
+

Envoyer des evenements-push dans about:debugging est nouveau dans Firefox 47.

+
+ +

Pour déboguer les notifications push, vous pouvez définir un point d'arrêt dans le listener push event. Pourtant, vous pouvez aussi déboguez les notifications push localement, sans le besoin d’un server. Juste cliquez sur le bouton "Push" pour envoyer un évènement push au service worker:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

Service workers pas compatibles

+ +
+

Dans Firefox 49+, un message d’avertissement va être afficher dans la section Service Workers dans la page Workers si les service workers ne sont pas compatibles avec les configurations actuelles du navigateur, et donc ne peuvent pas être utiliser ou déboguer.

+ +

+
+ +

Des Service workers peuvent être indisponible pour plusieurs raisons:

+ + diff --git a/files/fr/tools/about_colon_debugging/index.html b/files/fr/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..eb669e756c --- /dev/null +++ b/files/fr/tools/about_colon_debugging/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging' +slug: 'Outils/about:debugging' +translation_of: 'Tools/about:debugging' +--- +
{{ToolsSidebar}}
+ +

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

+ +

Opening the about:debugging page

+ +

There are several different ways to open about:debugging:

+ + + +

When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.

+ +

Le fait que les modules complémentaires système apparaisent dans cette liste ou non, dépend de la préférence devtools.aboutdebugging.showSystemAddons. Pour afficher ces modules complémentaires, il est nécéssaire de la passer à true dans about:config.

+ +

Add-ons

+ +
+

The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.

+
+ +

This page enables you to do two things:

+ + + +

+ +

Connecting the Add-on Debugger

+ +
+

Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".

+ +

If the "Debug" button is disabled, check the "Enable add-on debugging" box.

+ +

If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +
+

The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.

+ +

You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the Developer Tools Settings.

+
+ +

Loading a temporary add-on

+ +

With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory. The temporary add-on will be displayed under the "Temporary Extensions" header.

+ +

You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

The big advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Updating a temporary add-on

+ +

If you install the add-on in this way, what happens when you update the add-on's files?

+ +

Before Firefox 48

+ + + +
+

Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.

+
+ +

Firefox 48 onwards

+ + + +

From Firefox 48 onwards:

+ + + +
+

Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.

+
+ +

Tabs

+ +

In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.

+ +

+ +

Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.

+ +

+ +
+

Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.

+
+ +

Workers

+ +

The Workers page shows your workers, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

From Firefox 52, the list of service workers shows the state of the service worker in its lifecycle. Three states are distinguished:

+ + + +

+ +
+

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+
+ +

Debugging workers

+ +

For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.

+ +

Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Registering workers

+ +

At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Before Firefox 47, service workers were only shown when they were actually running.

+
+ +

Unregistering service workers

+ +
+

New in Firefox 48.

+
+ +

Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:

+ +

+ +

Click the link to unregister the service worker.

+ +

Sending push events to service workers

+ +
+

Sending push events in about:debugging is new in Firefox 47.

+
+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

Service workers not compatible

+ +
+

In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable for several reasons:

+ + diff --git a/files/fr/tools/accessibility_inspector/index.html b/files/fr/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..cc493a0836 --- /dev/null +++ b/files/fr/tools/accessibility_inspector/index.html @@ -0,0 +1,182 @@ +--- +title: Inspecteur de l'accessibilité +slug: Outils/Inspecteur_accessibilite +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils +translation_of: Tools/Accessibility_inspector +--- +
{{ToolsSidebar}}
+ +

L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.

+ +

Un (très) bref guide sur l'accessibilité

+ +

L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.

+ +

On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux API d'accessibilité disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).

+ +

Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle WAI-ARIA afin de fournir des rôles spécifiques.

+ +

Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.

+ +

Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.

+ +

Accéder à l'inspecteur d'accessibilité

+ +

L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :

+ +

L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »

+ +

Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (Mémoire et Performances par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.

+ +

Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».

+ +

Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.

+ +
+

Note : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.

+
+ +

Fonctionnalité du panneau Accessibilité

+ +

Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :

+ +

Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité.

+ +

Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :

+ + + +

Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :

+ + + +
+

Note : Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.

+
+ +

Contrôles au clavier

+ +

Le panneau Accessibilité est intégralement accessible au clavier :

+ + + +

 

+ +

Afficher l'arbre accessibilité en JSON

+ +

Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "Afficher JSON" :

+ +

+ +

Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :

+ +

+ +

Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.

+ +

Fonctionnalités notables associées

+ +

Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.

+ +

Options de menu contextuel

+ +

Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :

+ +

Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée

+ +

Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée

+ +

Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.

+ +
+

Note : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option Inspecter les propriétés d'accessibilité du menu sera masquée.

+
+ +

Mise en avant des éléments

+ +

Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.

+ +

Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est graphic et que son nom est "Road, Asphalt, Sky, Clouds, Fall". On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.

+ +

+ +

Contraste des couleurs

+ +

Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, Web Content Accessibility Guidelines (WCAG) 1.4, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).
+
+ Par exemple :

+ +

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

+ +

Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.

+ +

À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :

+ +

 

+ +

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

+ +

 

+ +

On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.

+ +

Voir les bonnes pratiques d'accessibilité CSS et JavaScript pour plus d'informations.

+ +

Sélecteur d'accessibilité

+ +

Le panneau Inspecteur pour l'inspection du code HTML possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  Accessibilité possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.

+ +

Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :

+ +

Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »

+ +

Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »

+ +

Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche Maj lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Maj sera enfoncée).

+ +

Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche Esc.

+ +

Scénarios d'utilisation

+ +

L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut alt ou les champs de formulaire sans libellé), car ils auront la propriété name qui vaudra null. Par exemple :

+ +

Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé

+ +

Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..

+ +

Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null

+ +

Voir aussi

+ + diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html new file mode 100644 index 0000000000..5247d65941 --- /dev/null +++ b/files/fr/tools/accessibility_inspector/simulation/index.html @@ -0,0 +1,96 @@ +--- +title: Simulation +slug: Outils/Inspecteur_accessibilite/Simulation +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils + - Simulation + - couleur +translation_of: Tools/Accessibility_inspector/Simulation +--- +

Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.

+ +

La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.

+ +

La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.

+ +
+

Pour activer cette fonctionnalité vous devez avoir activé le webrender. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'éditeur de configuration de Firefox, assurez-vous que l'option gfx.webrender.all est définie sur true.

+
+ +

Dans le menu Simuler, vous pouvez choisir une option à la fois dans la liste suivante :

+ + + +
+

Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.

+
+ +

Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SimulationImage affichée
AucunColorful image of a cat's face, without modification
Protanomalie (rouge faible)Colorful image of a cat's face, with deuteranomaly simulation
Deutéranomalie (vert faible)Colorful image of a cat's face, with deuteranomaly simulation
Tritanomalie (bleu faible)Colorful image of a cat's face, with tritanomaly simulation
Protanopie (pas de rouge)Colorful image of a cat's face, with protanopia simulation
Deutéranopie (pas de vert)Colorful image of a cat's face, with deuteranopia simulation
Tritanopie (pas de bleu)Colorful image of a cat's face, with tritanopia simulation
Perte de contrasteColorful image of a cat's face, with contrast loss simulation
+ +

Voir aussi

+ + diff --git a/files/fr/tools/accessing_the_developer_tools/index.html b/files/fr/tools/accessing_the_developer_tools/index.html new file mode 100644 index 0000000000..648bfbea9a --- /dev/null +++ b/files/fr/tools/accessing_the_developer_tools/index.html @@ -0,0 +1,21 @@ +--- +title: Le Menu Développement +slug: Outils/Accessing_the_Developer_Tools +translation_of: Tools/Accessing_the_Developer_Tools +--- +
{{ToolsSidebar}}

Le menu "Développement" est le moyen principal d'accéder aux outils de développement qui sont intégrés à Firefox. Sous OS X et Linux, ce menu est un sous menu du menu "Outils" :

+ +

+ +

Sous Windows, il est directement dans le menu de Firefox :

+ +

+ +

Le menu "Développement" est découpé en quatre parties :

+ + diff --git a/files/fr/tools/browser_console/index.html b/files/fr/tools/browser_console/index.html new file mode 100644 index 0000000000..7125ea0544 --- /dev/null +++ b/files/fr/tools/browser_console/index.html @@ -0,0 +1,195 @@ +--- +title: Console JavaScript +slug: Outils/Console_JavaScript +tags: + - Browser + - Debugging + - Tools + - Web Development + - 'WebDevelopment:Tools' +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}
+ +
+

La Console du navigateur est au navigateur entier ce qu'est la Console Web à une page web.

+ +

Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.

+ +

Si vous voulez également utiliser les autres outils de développement de la Boite à outils Web sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la Boite à outils du navigateur.

+ +

Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale gBrowser. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.

+ +
+

NB : La ligne de commande de la Console du navigateur (pour exécuter des expressions JavaScript) est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

+
+ +

Ouvrir la Console du navigateur

+ +

Il est possible d'ouvrir la Console du navigateur de deux façons différentes :

+ +
    +
  1. Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous macOS, le menu "Développement" est un sous menu du menu "Outils")
  2. +
  3. Utiliser le raccourci clavier : Ctrl+Maj+J sur Windows et Cmd+Maj+J sur Mac.
  4. +
+ +

Alternativement, il est possible d'ouvrir la Console du navigateur en laçant Firefox en ligne de commande avec l'argument

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

La Console du navigateur ressemble a ceci :

+ + + +

+ + + +

Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la Console Web :

+ + + +

À partir de Firefox 68, la console du navigateur permet d'afficher ou de cacher les messages de contenu (les messages des scripts de toutes les pages ouvertes). Il suffit pour cela de cocher la case "Afficher les messages de contenu". L'image suivante montre la même page, mais avec la case cochée :

+ +

+ + + +

Messages de la Console du navigateur

+ +

La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :

+ + + +

Cependant, la Console du Navigateur affiche les messages venant du :

+ + + +

Messages des modules complémentaires

+ +

La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.

+ +

Console.jsm

+ +

Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".

+ +

Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Pour en savoir plus :

+ + + +

HUDService

+ +

HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans Mozilla DXR. Ce module permet non seulement d’accéder à la Console du navigateur, mais également à la Console Web.

+ +

Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Fonctionnalités bonus disponibles

+ +

Pour les modules complémentaires utilisant le Add-on SDK, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

Compiler ceci en tant que fichier XPI, puis ouvrir la Console du navigateur, puis ouvrir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :

+ +

Cliquer sur l’icône affichera ce message dans la console :

+ +

+ +

Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la boite de filtrage. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans préférences du navigateur.

+ +

Ligne de commande de la Console du navigateur

+ +
+

La ligne de commande de la Console du navigateur est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

+
+ +

Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :Comme la Console Web, elle supporte également l'autocomplétion, l'historique, de nombreux raccourcis clavier et des fonctions d'aide. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus pour voir ses détails.

+ +

Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet window :

+ +

+ +

Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.

+ +

Contrôler le navigateur

+ +

L'interpréteur de ligne de commande a accès à l'objet tabbrowser à travers la variable globale gBrowser. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le Maj+Entrée) :

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

Cela ajoute un écouteur sur l'évènement load qui absorbera la nouvelle page puis chargera la nouvelle page.

+ +
+

Il est possible de relancer le navigateur avec avec la commande Ctrl + Alt + R (Windows, Linux) ou Cmd + Alt + R (Mac). Cette commande redémare le navigateur avec les même onglets qu'avant le rédémarage.

+
+ +

Modifier l'interface utilisateur du navigateur

+ +

Étant donné que l’objet window correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

Sur macOS, ce code ajoutera un objet au menu "Tools" :

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

+
diff --git a/files/fr/tools/browser_toolbox/index.html b/files/fr/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..1d8cb4f77c --- /dev/null +++ b/files/fr/tools/browser_toolbox/index.html @@ -0,0 +1,77 @@ +--- +title: Boîte à outils du navigateur +slug: Outils/Boîte_à_outils_du_navigateur +tags: + - Debug + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +
{{ToolsSidebar}}
+ +

La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la boite à outils normale qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.

+ +
+

Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le Débogeur de modules. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.

+
+ +

Activer la boite à outils du navigateur

+ +
+

La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".

+ +

Ces options se trouvent dans les options des outils de développement, dans la section "Paramètres avancés" :

+ +

Developer Tools Settings

+
+ +

Ouvrir la boite à outils du navigateur

+ +

Il est possible d'ouvrir la boite, en ouvrant le menu (bouton new fx menu ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".

+ +

Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier Ctrl + Alt +Maj + I ( Cmd + Opt +Maj + I sur un Mac).

+ +

Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété devtools.debugger.prompt-connection à false dans about:config) :

+ +

Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :

+ +

Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :

+ + + +

Il est possible de déboguer les pages chrome: et about: en utilisant le Débogueur normal, comme si il s'agissait de pages de contenu ordinaires.

+ +

Cibler un document

+ +

dans la boite à outils normaux, il y a un bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.

+ +

Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :

+ +

+ +

Déboguer des popups

+ +

Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez Désactiver le masquage automatique des popups.

+ +

 

+ +

+ +

Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche Echap  . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :

+ +

{{EmbedYouTube("6edXcunw4jM")}}

+ +

Il est possible d'utiliser la même technique pour déboguer les pop-up crées par les modules.

+ +
+

Note: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.

+
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. +
  3. 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.
  4. +
+ +
+

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).

diff --git a/files/fr/tools/devtoolsapi/index.html b/files/fr/tools/devtoolsapi/index.html new file mode 100644 index 0000000000..0fba8241f1 --- /dev/null +++ b/files/fr/tools/devtoolsapi/index.html @@ -0,0 +1,835 @@ +--- +title: DevTools API +slug: Outils/DevToolsAPI +translation_of: Tools/DevToolsAPI +--- +

{{ToolsSidebar}}{{Obsolete_Header}}

+ +
+

Warning:("L'API des outils de développement est en cours de développement. Si vous rencontrez des incohérences, merci de les signaler à l'équipe des outils de développement de Firefox.")

+
+ +

Bien que cette api soit toujours en développement, il existe des parties de l'Inspecteur et du Debogueur qui sont d’ores et déjà utilisable.

+ + + +

Introduction

+ +

L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.

+ +

En terme d'interface utilisateur, chaque outil enregistré existe dans son propre onglet (Appelé également panneau). Ces onglets sont situés dans une boîte appelée Boite à outils. Une boîte à outils peut être hébergée dans un navigateur (en bas ou sur le coté) ou peut être dans propre fenêtre (la boîte à outils est alors dite détachée). Une boîte à outils (et tous les outils qu'elle contient) est reliée à une Cible qui est l'objet que les outils sont en train de déboguer. Une cible le plus souvent une page web (un onglet), mais peut être autre chose, comme une fenêtre chrome un onglet distant.

+ +

En terme de code, chaque outil doit fournir un objet ToolDefinition. Une définition est un objet JS léger qui fournit différentes informations sur l'outil (par exemple son nom et son icône), ainsi qu'une méthode build qui sera utilisée plus tard pour lancer une instance de cet outil. L'objet global gDevTools fournit des méthodes pour enregistrer une définition d'outil et pour accéder aux instances d'outils. Une instance d'outil est appelée un ToolPanel. Le ToolPanel est construit seulement lorsque l'outil est sélectionné (non pas quand la boîte à outils est ouverte). Il n'y a aucun mayen de "fermer/détruire" un ToolPannel. La façon de fermer un ToolPanel est de fermer la boîte à outils qui le contient. Tous les objets sus-mentionnés implémentent l'interface EventEmitter.

+ +

API

+ +

gDevTools

+ +

The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet

+ +
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
+ +

Methods

+ +
+
+
registerTool(toolDefinition)
+
+
Registers a new tool and adds a tab to each existing toolbox.
+
Parameters:
+ toolDefinition {ToolDefinition} - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.
+
+
unregisterTool(tool)
+
+
Unregisters the given tool and removes it from all toolboxes.
+
Parameters:
+ tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.
+
+
registerTheme(themeDefinition)
+
+
Registers a new theme.
+
Parameters:
+ themeDefinition {ThemeDefinition} - An object that contains information about the theme.
+
+
unregisterTheme(theme)
+
+
Unregisters the given theme.
+
+ Parameters:
+ theme {ThemeDefinition|String} - The theme definition object or the theme identifier.
+
+
showToolbox(target [, toolId [, hostType [, hostOptions]]])
+
+
Opens a toolbox for given target either by creating a new one or activating an existing one.
+
Parameters:
+ target {Target} - The target the toolbox will debug.
+ toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.
+ hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See {{anch("HostType")}} for details.
+ hostOptions {Object} - An options object passed to the selected host. See {{anch("HostType")}} for details.
+
Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.
+
+
getToolbox(target)
+
+
Fetch the {{anch("Toolbox")}} object for the given target.
+
+ Parameters:
+ target {Target} - The target the toolbox is debugging.
+
+ Return value:
+ {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..
+
+
closeToolbox(target)
+
+
Closes the toolbox for given target.
+
Parameters:
+ target {Target} - The target of the toolbox that should be closed.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.
+
+
getDefaultTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.
+
+
getAdditionalTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.
+
+
getToolDefinition(toolId)
+
+
Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.
+
+ Parameters:
+ toolId {String} - The ID of the tool.
+
Return value:
+ A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.
+
+
getToolDefinitionMap()
+
+
Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.
+
+
getToolDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.
+
+
getThemeDefinition(themeId)
+
+
Fetch the ThemeDefinition object for the theme with the given id.
+
+ Parameters:
+ themeId {String} - The ID of the theme.
+
Return value:
+ A ThemeDefinition object if the theme exists, null otherwise.
+
+
getThemeDefinitionMap()
+
+
Returns a toolId → ThemeDefinition map for available themes.
+
+
getThemeDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of ThemeDefinition objects for avialble themes.
+
+ +

Events

+ +

Following events are emitted by the gDevTools object via the {{anch("EventEmitter")}} interface.

+ +
+
+
tool-registered(toolId)
+
+
A new tool has been registered.
+
+
tool-unregistered(tool)
+
+
A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.
+
+
theme-registered(themeId)
+
+
A new theme has been registered.
+
+
theme-unregistered(theme)
+
+
A theme has been unregistered. The parameter is a ThemeDefinition object.
+
+
toolbox-ready(toolbox)
+
+
A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.
+
+
toolbox-destroy(target)
+
+
The toolbox for the specified target is about to be destroyed.
+
+
toolbox-destoyed(target)
+
+
The toolbox for the specified target has been destroyed.
+
+
{toolId}-init(toolbox, iframe)
+
+
A tool with the given ID has began to load in the given toolbox to the given frame.
+
+
{toolId}-build(toolbox, panel)
+
+
A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-ready(toolbox, panel)
+
+
A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-destroy(toolbox, panel)
+
+
A tool with the given ID is about to be destroyed. The panel is the object returned by the ToolDefinition.build() method.
+
+ +

Toolbox

+ +

A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.

+ +

Properties

+ +
+
+
target
+
+
Target. The Target this toolbox is debugging.
+
+
hostType
+
+
Toolbox.HostType. The type of the host this Toolbox is docked to. The value is one of the Toolbox.HostType constants.
+
+
zoomValue
+
+
The current zoom level of the Toolbox.
+
+ +

Constants

+ +

The Toolbox constructor contains following constant properties.

+ +
+
+
Toolbox.HostType.BOTTOM
+
+
Host type for the default toolbox host at the bottom of the browser window.
+
+
Toolbox.HostType.SIDE
+
+
Host type for the host at the side of the browser window.
+
+
Toolbox.HostType.WINDOW
+
+
Host type for the separate Toolbox window.
+
+
Toolbox.HostType.CUSTOM
+
+
Host type for a custom frame host.
+
+ +

Methods

+ +
+
+
getCurrentPanel()
+
+
Get the currently active {{anch("ToolPanel")}}.
+
+ Return value:
+ The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.
+
+
getPanel(toolId)
+
+
Get the {{anch("ToolPanel")}} for given tool.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ The {{anch("ToolPanel")}} object if the tool with the given toolId is active, otherwise undefined.
+
+
getPanelWhenReady(toolId)
+
+
Similar to getPanel() but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.
+
+
getToolPanels()
+
+
Returns a toolId → {{anch("ToolPanel")}} {{jsxref("Map")}} for currently loaded tools.
+
+
getNotificationBox()
+
+
Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.
+
+
loadTool(toolId)
+
+
Loads the tool with the given toolId in the background but does not activate it.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.
+  
+
+
selectTool(toolId)
+
+
Selects the tool with the given toolId.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.
+
+
selectNextTool()
+
+
Selects the next tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
selectPreviousTool()
+
+
Selects the previous tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
highlightTool(toolId)
+
+
Highlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to highlight.
+
+
unhighlightTool(toolId)
+
+
Unhighlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to unhighlight.
+
+
openSplitConsole()
+
+
Opens the split Console to the bottom of the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the Console has loaded.
+
+
closeSplitConsole()
+
+
Closes the split console.
+
+
toggleSplitConsole()
+
+
Toggles the state of the split console.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the operation has finished.
+
+
switchHost(hostType)
+
+
Switches the location of the toolbox
+
+ Parameters:
+ hostType {Toolbox.HostType} - The type of the new host.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the new host is ready.
+  
+
+
reloadTarget(force)
+
+
Reloads the current target of the toolbox.
+
+ Parameters:
+ force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.
+
+
zoomIn()
+
+
Increases the zoom level of the Toolbox document.
+
+
zoomOut()
+
+
Decreases the zoom level of the Toolbox document.
+
+
zoomReset()
+
+
Resets the zoom level of the Toolbox document.
+
+
setZoom(value)
+
+
Set the zoom level to an arbitrary value.
+
+ Parameters:
+ value {Number} - The zoom level such as 1.2.
+
+
destroy()
+
+
Closes the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is resolved once the Toolbox is destroyed.
+
+ +

Events

+ +

The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.

+ +
+
+
host-changed
+
+
The Host for this Toolbox has changed.
+
+
ready
+
+
The Toolbox is ready to use.
+
+
select(toolId)
+
+
A tool has been selected. This event is emitted before the corresponding {toolId}-selected event.
+
+
{toolId}-init(frame)
+
+
A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.
+
+
{toolId}-build(panel)
+
+
The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-ready(panel)
+
+
The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-selected(panel)
+
+
A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-destroy(panel)
+
+
A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.
+
+
destroy
+
+
The Toolbox is about to be destroyed.
+
+
destroyed
+
+
The Toolbox has been destroyed.
+
+ +

ToolDefinition

+ +

A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.

+ +

Methods

+ +
+
+
isTargetSupported(target)
+
+
A method that is called during toolbox construction to check if the tool supports debugging the given target.
+
+ Parameters:
+ target {Target} - The target to check.
+
+ Return value:
+ A boolean indicating if the tool supports the given target.
+
+
build(window, toolbox)
+
+
A method that builds the {{anch("ToolPanel")}} for this tool.
+
+ Parameters:
+ window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.
+ toolbox {Toolbox} - The {{anch("Toolbox")}} the tool is being built for.
+
+ Return value:
+ A {{anch("ToolPanel")}} for the tool.
+
+
onKey(panel, toolbox)
+
+
Optional. A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
+
+ Parameters:
+ panel {ToolPanel} - The {{anch("ToolPanel")}} for the tool.
+ toolbox {Toolbox} - The toolbox for the shortcut was triggered for.
+
+ Return value:
+ Undefined.
+
+ +

Properties

+ +

The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.

+ +
+
+
id
+
+
String, required. An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.
+
+
url
+
+
String, required. An URL of the panel document.
+
+
label
+
+
String, optional. The tool's name. If undefined the icon should be specified.
+
+
tooltip
+
+
String, optional. The tooltip for the tool's tab.
+
+
panelLabel
+
+
String, optional. An accessibility label for the panel.
+
+
ordinal
+
+
Integer, optional. The position of the tool's tab within the toolbox. Default: 99
+
+
visibilityswitch
+
+
String, optional. A preference name that controls the visiblity of the tool. Default: devtools.{id}.enabled
+
+
icon
+
+
String, optional. An URL for the icon to show in the toolbox tab. If undefined the label should be defined.
+
+
highlightedicon
+
+
String, optional. An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). Default: {icon}
+
+
iconOnly
+
+
Boolean, optional. If true, the label won't be shown in the tool's tab. Default: false
+
+
invertIconForLightTheme
+
+
Boolean, optional. If true the colors of the icon will be inverted for the light theme. Default: false
+
+
key
+
+
String, optional. The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.
+
+
modifiers
+
+
String, optional. {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.
+
+
preventClosingOnKey
+
+
Boolean, optional. If true the tool won't close if its keybinding is pressed while it is active. Default: false
+
+
inMenu
+
+
Boolean, optional. If true the tool will be shown in the Developer Menu. Default: false
+
+ +
+
String, optional. A label for the Developer Menu item. Default: {label}
+
+
accesskey
+
+
String, optional. {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.
+
+ +

Example

+ +

Here's a minimal definition for a tool.

+ +
let def = {
+  id: "my-tool",
+  label: "My Tool",
+  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
+  url: "about:blank",
+  isTargetSupported: target => true,
+  build: (window, toolbox) => new MyToolPanel(window, toolbox)
+};
+
+// Register it.
+gDevTools.registerTool(def);
+
+ +

TargetType

+ +

FIXME:

+ +

HostType

+ +

FIXME

+ +

ToolPanel

+ +

The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.

+ +

Methods

+ +
+
+
open()
+
+
Optional. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or toolbox.selectTool()) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.
+
+ Return value:
+ The method should return a {{domxref("Promise")}} that is resolved with the ToolPanel object once it's ready to be used.
+
+
destroy()
+
+
+

A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.

+ +

Return value:
+ A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.

+
+
+ +

Example

+ +

Here's a basic template for a ToolPanel implementation.

+ +
// In the ToolDefintion object, do
+//   build: (window, target) => new MyPanel(window, target),
+
+function MyPanel(window, target) {
+  // The window object that has loaded the URL defined in the ToolDefinition
+  this.window = window;
+  // The Target this toolbox is debugging.
+  this.target = target;
+
+  // Do synchronous initialization here.
+  window.document.body.addEventListener("click", this.handleClick);
+}
+
+MyPanel.prototype = {
+  open: function() {
+    // Any asynchronous operations should be done here.
+    return this.doSomethingAsynchronous()
+      .then(() => this);
+  },
+
+  destroy: function() {
+    // Synchronous destruction.
+    this.window.document.body.removeEventListener("click", this.handleClick);
+
+    // Async destruction.
+    return this.destroySomethingAsynchronosly()
+      .then(() => console.log("destroyed"));
+  },
+
+  handleClick: function(event) {
+    console.log("Clicked", event.originalTarget);
+  },
+};
+
+ +

EventEmitter

+ +

EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.

+ +

When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.

+ +
+

Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.

+
+ +

Methods

+ +

The following methods are available on objects that have been decorated with the EventEmitter interface.

+ +
+
+
emit(eventName, ...extraArguments)
+
+
Emits an event with the given name to this object.
+
+ Parameters:
+ eventName {String} - The name of the event.
+ extraArguments {...Any} - Extra arguments that are passed to the listeners.
+
+
on(eventName, listener)
+
+
Adds a listener for the given event.
+
+
off(eventName, listener)
+
+
Removes the previously added listener from the event.
+
+
once(eventName, listener)
+
+
Adds a listener for the event that is removed after it has been emitted once.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.
+
+ +

Examples

+ +

Here's a few examples using the {{anch("gDevTools")}} object.

+ +
let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!");
+
+// Attach a listener.
+gDevTools.on("netmonitor-init", onInit);
+
+// Remove a listener.
+gDevTools.off("netmonitor-init", onInit);
+
+// Attach a one time listener.
+gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => {
+  console.log("Network Monitor initialized once!", toolbox, netmonitor);
+});
+
+// Use the Promise returned by the once method.
+gDevTools.once("netmonitor-init").then(toolbox => {
+  // Note that the second argument is not available here.
+  console.log("Network Monitor initialized to toolbox", toolbox);
+});
+
+ +

ToolSidebar

+ +

To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:

+ +
    <splitter class="devtools-side-splitter"/>
+    <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+ +
+ +
A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.
+ +
+ +
If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.
+ +
+ +
If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)ToolSidebar constructor
void addTab(tabId, url, selected=false)Add a tab in the sidebar
void select(tabId)Select a tab
void hide()Hide the sidebar
void show()Show the sidebar
void toggle()Toggle the sidebar
void getWindowForTab(tabId)Get the iframe containing the tab content
tabId getCurrentTabID()Return the id of tabId of the current tab
tabbox getTab(tabId)Return a tab given its id
destroy()Destroy the ToolSidebar object
EventsDescription
new-tab-registeredA new tab has been added
{tabId}-readyTab is loaded and can be used
{tabId}-selectedTab has been selected and is visible
{tabId}-unselectedTab has been unselected and is not visible
showThe sidebar has been opened.
hideThe sidebar has been closed.
+ +

Examples

+ +

Register a tool

+ +
gDevTools.registerTool({
+  // FIXME: missing key related properties.
+  id: "inspector",
+  icon: "chrome://browser/skin/devtools/inspector-icon.png",
+  url: "chrome://browser/content/devtools/inspector/inspector.xul",
+  get label() {
+    let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
+    return strings.GetStringFromName("inspector.label");
+  },
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox, node) {
+    return new InspectorPanel(iframeWindow, toolbox, node);
+  }
+});
+ +

Open a tool, or select it if the toolbox is already open:

+ +
let target = TargetFactory.forTab(gBrowser.selectedTab);
+let toolbox = gDevTools.openToolbox(target, null, "inspector");
+
+toolbox.once("inspector-ready", function(event, panel) {
+  let inspector = toolbox.getToolPanels().get("inspector");
+  inspector.selection.setNode(target, "browser-context-menu");
+});
+ +

Add a sidebar to an existing tool:

+ +
let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
+sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
+sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
+sidebar.show();
diff --git a/files/fr/tools/devtoolscolors/index.html b/files/fr/tools/devtoolscolors/index.html new file mode 100644 index 0000000000..afe2c7f12a --- /dev/null +++ b/files/fr/tools/devtoolscolors/index.html @@ -0,0 +1,331 @@ +--- +title: Couleurs des DevTools +slug: Outils/Couleurs_des_DevTools +tags: + - CSS +translation_of: Tools/DevToolsColors +--- +
{{ToolsSidebar}}
+ +
+

Ne changez aucune des ces valeurs sans l’approbation de l'UX. Si une des valeurs doit être changée, il sera alors nécessaire de modifier du code CSS dans /browser/themes/*/devtools/. Remplissez un bug Devtools si besoin.

+
+ +

Ce tableau liste les couleurs et les variables CSS tels qu'implémentées dans le thème sombre et clair de des outils de développement.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Thème sombreThème lumineuxVariable CSS
+

Couleurs Chrome

+
 
Onglets de barre d'outils +
 
+ +

#252c33
+ rgba(37, 44, 51, 1)

+
+
 
+ #ebeced
+ rgba(235, 236, 237, 1)
--theme-tab-toolbar-background
Barre d'outils +
 
+ #343c45
+ rgba(52, 60, 69, 1)
+
 
+ #f0f1f2
+ rgba(240, 241, 242, 1)
--theme-toolbar-background
Fond de sélection +
 
+ #1d4f73
+ rgba(29, 79, 115, 1)
+
 
+ #4c9ed9
+ rgba(76, 158, 217, 1)
--theme-selection-background
Couleur du texte de sélection +
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)
+
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)
--theme-selection-color
Séparateurs +
 
+ #000000
+ rgba(0, 0, 0, 1)
+
 
+ #aaaaaa
+ rgba(170, 170, 170, 1)
--theme-splitter-color
Commentaires +
 
+ +

#5c6773
+ rgba(92, 103, 115, 1)

+
+
 
+ +

#747573
+ rgba(116, 117, 115, 1)

+
--theme-comment
+

Couleurs de contenu

+
 
Fond du "Body" +
 
+ #14171a
+ rgba(17, 19, 21, 1)
+
 
+ #fcfcfc
+ rgba(252, 252, 252, 1)
--theme-body-background
Fond de la "Sidebar" +
 
+ #181d20
+ rgba(24, 29, 32, 1)
+
 
+ #f7f7f7
+ rgba(247, 247, 247, 1)
--theme-sidebar-background
Fond de l'Attention +
 
+ #b28025
+ rgba(178, 128, 37, 1)
+
 
+ #e6b064
+ rgba(230, 176, 100, 1)
--theme-contrast-background
+

Couleurs de texte

+
 
Texte du "Body" +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)
+
 
+ #18191a
+ rgba(24, 25, 26, 1)
--theme-body-color
Texte de premier plan gris +
 
+ #b6babf
+ rgba(182, 186, 191, 1)
+
 
+ #585959
+ rgba(88, 89, 89, 1)
--theme-body-color-alt
Texte de contenu de haut contraste +
 
+ #a9bacb
+ rgba(169, 186, 203, 1)
+
 
+ #292e33
+ rgba(41, 46, 51, 1)
--theme-content-color1
Texte de contenu gris +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)
+
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)
--theme-content-color2
Texte de contenu gris sombre +
 
+ #667380
+ rgba(102, 115, 128, 1)
+
 
+ #667380
+ rgba(102, 115, 128, 1)
--theme-content-color3
+

Couleurs de surbrillance

+
 
Bleu +
 
+ #46afe3
+ rgba(70, 175, 227, 1)
+
 
+ #0088cc
+ rgba(0, 136, 204, 1)
--theme-highlight-blue
Violet +
 
+ #6b7abb
+ rgba(107, 122, 187, 1)
+
 
+ #5b5fff
+ rgba(91, 95, 255, 1)
--theme-highlight-purple
Rose +
 
+ #df80ff
+ rgba(223, 128, 255, 1)
+
 
+ #b82ee5
+ rgba(184, 46, 229, 1)
--theme-highlight-pink
Rouge +
 
+ #eb5368
+ rgba(235, 83, 104, 1)
+
 
+ #ed2655
+ rgba(237, 38, 85, 1)
--theme-highlight-red
Orange +
 
+ #d96629
+ rgba(217, 102, 41, 1)
+
 
+ #f13c00
+ rgba(241, 60, 0, 1)
--theme-highlight-orange
Orange clair +
 
+ #d99b28
+ rgba(217, 155, 40, 1)
+
 
+ #d97e00
+ rgba(217, 126, 0, 1)
--theme-highlight-lightorange
Vert +
 
+ #70bf53
+ rgba(112, 191, 83, 1)
+
 
+ #2cbb0f
+ rgba(44, 187, 15, 1)
--theme-highlight-green
Gris-bleu +
 
+ #5e88b0
+ rgba(94, 136, 176, 1)
+
 
+ #0072ab
+ rgba(0, 114, 171, 1)
--theme-highlight-bluegrey
+ +
+

Non finalisé. voir le bug 916766.

+
diff --git a/files/fr/tools/dom_property_viewer/index.html b/files/fr/tools/dom_property_viewer/index.html new file mode 100644 index 0000000000..8eda3a90aa --- /dev/null +++ b/files/fr/tools/dom_property_viewer/index.html @@ -0,0 +1,46 @@ +--- +title: Visionneur de propriétés DOM +slug: Outils/DOM_Property_Viewer +tags: + - DOM + - Tools + - Web Development +translation_of: Tools/DOM_Property_Viewer +--- +
{{ToolsSidebar}}
+ +
Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les options des outils de développement.
+ +

Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de l'iframe sélectionné.

+ +

+ +

Activer le visionneur de propriétés DOM

+ +

Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les options des outils de développement et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".

+ +

Ouvrir le visionneur de propriétés DOM

+ +

Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS).  Il est également possible d'utiliser le raccourci clavier Ctrl + Maj + W.

+ +

La Boite à outils apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".

+ +

L'interface du visionneur de propriétés DOM

+ +

Arbre DOM

+ +

Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.

+ +

Actualiser l'affichage

+ +

Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :

+ +

Button to update the DOM Inspector display

+ +

Filtrage

+ +

Il y a un barre de recherche dans la barre d'outils :

+ +

+ +

Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.

diff --git a/files/fr/tools/eyedropper/index.html b/files/fr/tools/eyedropper/index.html new file mode 100644 index 0000000000..090cf16ce1 --- /dev/null +++ b/files/fr/tools/eyedropper/index.html @@ -0,0 +1,47 @@ +--- +title: Pipette à couleur +slug: Outils/Pipette_à_couleur +tags: + - Firefox + - Tools + - 'Web Development:Tools' +translation_of: Tools/Eyedropper +--- +
{{ToolsSidebar}}
+

La pipette à couleur est unes des nouvautées de Firefox 31.

+
+ +

La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au-dessus de la page, vous permettant de sélectionner au pixel près. En dessous de la loupe, le code couleur du pixel courant est affiché sous le format choisi dans Options > Inspecteur > Unité par défaut pour les couleurs :

+ +

Vous pouvez l'utiliser de deux manières :

+ + + +

Copier une couleur dans le presse-papier

+ +

Ouvrez la pipette d'une des deux manières suivantes :

+ + + +

En même temps que vous bougez votre curseur sur la page, vous voyez la couleur associée dans la pipette. Cliquez pour copier le code couleur dans le presse-papier.

+ +

{{EmbedYouTube("xf2uk6UyRB8")}}

+ +

Changer la valeur d'une couleur dans la colonne vue.

+ +

Les valeurs des couleurs qui apparaissent dans la partie Règle de l'Inspecteur ont un échantillon de la couleur à côté d'elles : cliquer sur l'échantillon fait apparaître une fenêtre de sélection de couleurs. Depuis Firefox 31, cette fenêtre contient aussi une petite pipette : cliquer sur l'icône active la Pipette.

+ +

Maintenant, lorsque vous cliquez sur la Pipette, la couleur dans la colonne Règle a pour valeur la couleur que vous avez choisie.

+ +


+ {{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Raccourcis clavier

+ +

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

diff --git a/files/fr/tools/firefox_os_simulator_clone/index.html b/files/fr/tools/firefox_os_simulator_clone/index.html new file mode 100644 index 0000000000..5df5c6b15f --- /dev/null +++ b/files/fr/tools/firefox_os_simulator_clone/index.html @@ -0,0 +1,88 @@ +--- +title: Simulateur Firefox OS +slug: Outils/Firefox_OS_Simulator_clone +translation_of: Tools/Firefox_OS_Simulator_clone +--- +
{{ToolsSidebar}}
+

Cette  page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le Simulateur Firefox OS 1.1.

+
+ +

Le Simulateur Firefox OS est une version des couches supérieures de Firefox OS qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau. Cela signifie que dans la plupart des cas, il n'est pas nécessaire d'avoir un véritable appareil pour tester et déboguer votre application. Il s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et ses applications intégrées, et simule la plupart des APIs des appareils Firefox OS.

+ +

Le Simulateur est distribué comme un module complémentaire pour Firefox. Une fois que vous l'avez téléchargé et installé dans Firefox, vous pouvez le lancer, y envoyer des applications ainsi qu'utiliser les outils de développement avec le Gestionnaire d'applications, et à l'heure actuelle dans Nightly/Aurora, avec WebIDE.

+ +

Installation

+ +

Pour installer le simulateur, utilisez le panneau de gestion des Simulateurs dans WebIDE (disponible dans Firefox à partir de la version 33). Plusieurs versions sont disponibles, et il est conseillé de toutes les installer pour un maximum de flexibilité.

+ +

Pour lancer le Simulateur, choisissez-le dans la liste des environnements de WebIDE. Pour plus de détails, voir les instructions dans la documentation de WebIDE. Une fois le Simulateur lancé, vous pouvez y envoyer des applications et les déboguer grâce à WebIDE, comme vous le feriez avec un vrai appareil.

+ +

Si vous utilisez le Gestionnaire d'applications (l'ancien outil, disponible avant WebIDE), vous pouvez installer un simulateur en cliquant sur le bouton suivant :

+ +

Installer le Simulateur

+ +

L'interface du Simulateur

+ +

Le Simulateur apparaît dans une fenêtre séparée, dimensionnée de manière à ce que l'écran simulé fasse 320x480 pixels. Pour simuler les événements tactiles, vous pouvez cliquer avec la souris et glisser en maintenant le bouton enfoncé. Donc, en cliquant et glissant de la droite vers la gauche sur l'écran d'accueil, vous verrez les applications intégrées tout comme celles que vous avez ajoutées :

+ +

+ +

Le Simulateur dispose de deux boutons dans la barre d'outils en bas de l'écran :

+ + + +

Limitations du Simulateur

+ +

Notez que le Simulateur Firefox OS ne réalise pas une simulation parfaite.

+ +

Limitations au niveau du matériel

+ +

À part la taille de l'écran, le Simulateur ne simule pas les limitations du matériel d'un appareil Firefox OS comme la mémoire disponible ou la vitesse du CPU.

+ +

Codecs audio/vidéo

+ +

Les codecs suivants dépendent du décodage pris en charge par le matériel et ne sont donc pas encore supportés :

+ + + +

Cela implique qu'il n'est pas possible d'utiliser le Simulateur pour tester la lecture de vidéo dans des applications ni sur des sites web comme Youtube qui reposent sur ces codecs.

+ +

APIs non supportées

+ +

Certaines APIs qui fonctionnent sur un appareil ne fonctionneront pas sur le Simulateur, en général parce que le matériel supporté n'est pas disponible sur l'ordinateur. Nous avons implémenté des simulations pour quelques APIs comme la géolocalisation, et envisageons d'en ajouter davantage dans les versions à venir. Néanmoins, à l'heure actuelle, les APIs suivantes ne sont pas prises en charge. Le fait de les utiliser peut générer des erreurs ou juste renvoyer des résultats incorrects :

+ + + +

Obtenir de l'aide

+ +

Si vous avez une question, essayez de nous la poser sur la liste de diffusion dev-developer-tools ou sur #devtools on irc.mozilla.org.

+ +

Comment activer la journalisation verbeuse

+ +

Vous pouvez voir les messages enregistrés dans les journaux de votre application dans la Console Web, cette dernière pouvant être liée à votre app en utilisant WebIDE. Si vous souhaitez capturer plus tôt les messages qui surviennent durant le démarrage de l'application, avant que la console ne soit connectée et fonctionnelle, vous pouvez activer l'enregistrement verbeux des journaux dans le Simulateur.

+ +

Allez sur about:config et créer une nouvelle préférence. Le nom de la préférence est différent selon la version du Simulateur :

+ + + +

Attribuez-lui la valeur chaîne "all", désactivez, puis réactivez le module dans les modules complémentaires. À présent, des messages supplémentaires concernant les opérations du Simulateur apparaîtront dans la Console du navigateur.

diff --git a/files/fr/tools/index.html b/files/fr/tools/index.html new file mode 100644 index 0000000000..50ac8a8db2 --- /dev/null +++ b/files/fr/tools/index.html @@ -0,0 +1,225 @@ +--- +title: Outils de développement Firefox +slug: Outils +tags: + - Développement Web + - 'Développement Web:Outils' + - Firefox + - Guide + - Outils +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.

+ +

Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.

+ +

Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.

+ +

Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les liens communauté, vers la fin de la page). Si vous avez des questions ou des retours spécifiquement sur la documentation, MDN discourse est l'endroit parfait.

+ +
+

Note: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page apprendre le développement web peut vous aider. Vous pouvez également consulter Commencer avec le web et Découvrir les outils de développement des navigateurs.

+
+ +

Outils principaux

+ +

Les outils de développement peuvent être ouverts avec Ctrl + Shift + I ou F12 sous Windows et Linux, et Cmd + Opt + I sous macOS.

+ +

La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils.
Ce bouton permet de prendre une capture d'écran de la page. (Note: Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant).
Active le mode Vue Adaptative.
Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla.
Ferme les outils de développement.
+ +
+
+

Inspecteur

+ +

The all-new Inspector panel in Firefox 57.

+ +

Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.

+
+ +
+

Console Web

+ +

The all-new Console in Firefox 57.

+ +

Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.

+
+
+ +
+
+
+

Débogueur JavaScript

+ +

The all-new Firefox 57 Debugger.html

+ +

Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page

+
+ +
+

Réseau

+ +

The Network panel in Firefox 57 DevTools.

+ +

Permet d'inspecter les requêtes réseau lors du chargement de la page.

+
+
+ +
+
+
+

Performances

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.

+
+ +
+

Vue Adaptative

+ +

Responsive Design mode in Firefox 57.

+ +

Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.

+
+
+ +
+
+

Inspecteur d'Accessibilité

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.

+
+ +
+
+ +
+

Note: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: La boîte à outils.

+
+ +

Outils supplémentaires

+ +

Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.

+ +
+
+
Mémoire
+
Déterminer quels objets prennent de la place en mémoire.
+
Inspecteur de Stockage
+
Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.
+
DOM Property Viewer
+
Inspecter les propriétés DOM d'une page (fonctions, etc.)
+
Pipette
+
Sélectionner une couleur de la page.
+
Ardoise JavaScript
+
Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..
+
Éditeur de Styles
+
Voir et modifier les styles CSS de la page affichée.
+
Éditeur de Shaders
+
Voir et éditer les vertex shaders et les fragment shaders utilisés par WebGL.
+
Éditeur Web Audio
+
Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.
+
Capture d'écran
+
Prendre une capture d'écran de la page entière ou d'un seul élément
+
Mesurer une portion de la page
+
Mesurer une zone spécifique de la page web
+
Règles
+
Afficher des règles verticales et horizontales sur une page web
+
+
+ +
+
+
+

+ +

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

+ +

Télécharger Firefox Developer Edition

+
+
+ +

Connecter les outils de développement

+ +

Si vous ouvrez les outils de développent avec des raccourcis clavier ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.

+ +
+
+
about:debugging
+
Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.
+
Se connecter à Firefox pour Android
+
Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.
+
Se connecter aux iframes
+
Connecter les outils de développement sur un iframe donné dans la page en cours.
+
Se connecter aux autres navigateurs
+
Connecter les outils de développement à Chrome pour Android et Safari pour IOS.
+
+
+ +
+

Déboguer le navigateur

+ +

Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.

+ +
+
+
Console du navigateur
+
Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.
+
Boîte à outils du navigateur
+
Attacher les outils de développement au navigateur lui-même.
+
+
+ +
+

Étendre les outils de développement

+ +

Pour en savoir plus sur l'extension des outils de développement de Firefox, voir Extension des outils de développement dans la section WebExtensions de MDN.

+ +

Migrer de Firebug

+ +

Firebug est arrivé en fin de vie (voir Firebug, présent en esprit dans les outils de Firefox sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : Migrer depuis Firebug.

+ +
+

Contribuer

+ +

Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :

+ +
+
+
S'impliquer
+
La page de documentation expliquant comment s'impliquer.
+
firefox-dev.tools
+
Un outil pour aider à trouver des bugs sur lesquels travailler.
+
+
diff --git a/files/fr/tools/index/index.html b/files/fr/tools/index/index.html new file mode 100644 index 0000000000..7b9cbade37 --- /dev/null +++ b/files/fr/tools/index/index.html @@ -0,0 +1,8 @@ +--- +title: Index +slug: Outils/Index +tags: + - Outils +translation_of: Tools/Index +--- +
{{ToolsSidebar}}

{{Index("/fr/docs/Outils")}}

diff --git a/files/fr/tools/json_viewer/index.html b/files/fr/tools/json_viewer/index.html new file mode 100644 index 0000000000..d92e1ae379 --- /dev/null +++ b/files/fr/tools/json_viewer/index.html @@ -0,0 +1,22 @@ +--- +title: Lecteur JSON +slug: Outils/JSON_viewer +translation_of: Tools/JSON_viewer +--- +
{{ToolsSidebar}}
+

Le Lecteur JSON est une des nouveautés de Firefox 44.

+ +

Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres  versions, il faut passer la préférence devtools.jsonview.enabled à true dans about:config

+ +

Depuis Firefox 53, le Lecteur JSON est également activé par défaut dans Firefox Beta et dans la version normale de Firefox.

+
+ +

Firefox inclut un lecteur JSON. Lors de l'ouverture d'un fichier JSON ou d'une URL distante avec un Content-Type application/json, il est alors parsé et affiché avec coloration syntaxique. Les tableaux et les objets sont affichés réduits, et peuvent être étendus en cliquant sur les icônes "+".

+ +

{{EmbedYouTube("ktFcevMwYXw")}}

+ +

Le Lecteur JSON fournit également une barre de recherche pour filtrer le JSON.

+ +

Il est également possible d'afficher le JSON originel ainsi que de le formater et l'indenter.

+ +

Enfin, si le document était le résultat d'une requête réseau, le lecteur affiche la requête ainsi que les entêtes de réponse.

diff --git a/files/fr/tools/keyboard_shortcuts/index.html b/files/fr/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..0861359c77 --- /dev/null +++ b/files/fr/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1134 @@ +--- +title: Raccourcis claviers +slug: Outils/Raccourcis_claviers +tags: + - Tools +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Cette page liste tous les raccourcis clavier utilisés par les outils de développement intégrés à Firefox.

+ +

La première section liste les raccourcis utilisés pour ouvrir chaque outil. La deuxième section liste les raccourcis concernant la boîte à outils. Chaque section suivante concernera un outil et ses raccourcis dédiés.

+ +

Les raccourcis d'accessibilité, dépendants de la locale, ne sont pas documentés sur cette page.

+ +

Ouvrir et fermer les outils

+ +

Ces raccourcis fonctionnent dans la fenêtre principale du navigateur et permettent d'ouvrir un outil donné. Pour les outils situés dans la boîte à outils, ils permettent aussi de fermer l'outil si celui-ci est déjà ouvert. Pour les outils qui s'ouvrent dans une nouvelle fenêtre (tels que la console), vous devrez fermer la fenêtre pour fermer l'outil.

+ +
+

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Boîte à outils (s'ouvre sur le dernier outil utilisé)Ctrl + Maj + ICmd + Opt + ICtrl + Maj + I
Mettre la Boîte à outils au premier plan (si la boite est ouverte dans une autre fenêtre qui n'est pas au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Maj + I or F12
Fermer la Boîte à outils (si la boite est ouverte dans une fenêtre séparée et est au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Console Web1Ctrl + Maj + KCmd + Opt + KCtrl + Maj + K
InspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
Éditeur de styleMaj + F7Maj + F71Maj + F7
ProfileurMaj + F5Maj + F51Maj + F5
Réseau 2Ctrl + Maj + ECmd + Opt + ECtrl + Maj + E
Barre de développement (afficher/masquer)Maj + F2Maj + F21Maj + F2
Vue adaptative (afficher/masquer)Ctrl + Maj + MCmd + Opt + MCtrl + Maj + M
Console du navigateur3Ctrl + Maj + JCmd + Opt + JCtrl + Maj + J
Boite à outils du navigateurCtrl + Alt +Maj + ICmd + Opt +Maj + ICtrl + Alt +Maj + I
Ardoise JavaScriptMaj + F4Maj + F4Maj + F4
WebIDEMaj + F8Maj + F8Maj + F8
Inspecteur de Stockage 4Maj + F9Maj + F9Maj + F9
+ +

1. Contrairement aux autres outils de la boîte à outils, ce raccourci ne ferme pas également la console. Pour la console, cela passe le focus sur la ligne de commande de la console. Pour fermer la console, utilisez le raccourci global de la boîte à outils de Ctrl + Maj + I (Cmd + Opt + I sur Mac).

+ +

2. Avant Firefox 55 le raccourci était Ctrl + Maj + Q (Cmd + Opt + Q sur Mac).

+ +

3. Avant Firefox 38, quand la console du navigateur était cachée par une fenêtre de Firefox, le raccourci clavier fermait la console. Depuis Firefox 38, ce raccourci clavier met la console au premier plan.

+ +

4. L'outil est désactivé par défaut. Le raccourci ne fonctionnera pas tant que l'outil n'aura pas été activé dans le panneau des Options des outils.

+ +

Outils de développement

+ +
+

Ces raccourcis fonctionnent quand les outils sont ouverts, quel que soit l'outil sélectionné.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Faire défiler les outils de gauche à droiteCtrl + ]Cmd + ]Ctrl + ]
Faire défiler les outils de droite à gaucheCtrl + [Cmd + [Ctrl + [
Alterner entre l'outil ouvert et les optionsCtrl + Maj + OCmd + Maj + OCtrl + Maj + O
Alterner entre l'outil ouvert et les options (depuis Firefox 43)F1F1F1
Alterner entre les deux derniers modes d'ancrages (depuis Firefox 41)Ctrl + Maj + DCmd + Maj + DCtrl + Maj + D
Activer la console scindée (sauf si l'outil sélectionné est la Console)EscEscEsc
+
+ +
+

Ces raccourcis fonctionnent pour tous les outils dans la boîte à outils.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Augmenter la taille de la policeCtrl + +Cmd + +Ctrl + +
Diminuer la taille de la policeCtrl + -Cmd + -Ctrl + -
Réinitialiser la taille de la policeCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Éditeur de code source

+ +
+

Cette liste présente les raccourcis par défaut pour l'éditeur de code source.

+ +

Dans les options de l'éditeur, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.

+ +

Pour les sélectionner, rendez-vous dans about:config, sélectionnez le paramètre devtools.editor.keymap et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.

+ +

A partir de Firefox 33, cette option est directement disponible dans la section des préférences de l'éditeur dans le panneau « Options des outils » (plutôt que de passer par about:config).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Aller à la ligneCtrl + JCmd + JCtrl + J
Chercher dans le documentCtrl + FCmd + FCtrl + F
Chercher à nouveauCtrl + GCmd + GCtrl + G
Tout sélectionnerCtrl + ACmd + ACtrl + A
CouperCtrl + XCmd + XCtrl + X
CopierCtrl + CCmd + CCtrl + C
CollerCtrl + VCmd + VCtrl + V
AnnulerCtrl + ZCmd + ZCtrl + Z
RétablirCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
IndenterTabTabTab
DésindenterMaj + TabMaj + TabMaj + Tab
Déplacer la/les ligne(s) vers le hautAlt + HautAlt + HautAlt + Haut
Déplacer la/les ligne(s) vers le basAlt + BasAlt + BasAlt + Bas
Commenter/décommenter la/les ligne(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspecteur de document

+ +
+ + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'inspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
+ +

Sélecteur de noeuds

+ +

Ces raccourcis fonctionnent lorsque le sélecteur de noeuds est actif.

+ + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectioner l'élément en dessous de la souris et arrête la sélectionClicClicClic
Sélectioner l'élément en dessous de la souris et continue la sélectionShift+ClickShift+ClickShift+Click
+ +

Onglet HTML

+ +

Ces raccourcis fonctionnent dans l'onglet HTML de l'inspecteur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Supprimer le nœud sélectionnéSupprSupprSuppr
Annuler la suppression d'un nœudCtrl + ZCmd + ZCtrl + Z
Rétablir la suppression d'un nœudCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
Aller au prochain nœud (développe les nœuds uniquement)Flèche basFlèche basFlèche bas
Aller au nœud précédentFlèche hautFlèche hautFlèche haut
Aller au premier nœud dans l'arbreDébutDébutDébut
Aller au dernier nœud dans l'arbreFinFinFin
Développer le nœud actuellement sélectionnéFlèche droiteFlèche droiteFlèche droite
Réduire le nœud actuellement sélectionnéFlèche gaucheFlèche gaucheFlèche gauche
(Lorsqu'un nœud est sélectionné) Itérer parmi les attributsEntréeRetourEntrée
Défiler vers l'avant parmi les attributs du nœudTabTabTab
Défiler vers l'arrière parmi les attributs du nœudMaj + TabMaj + TabMaj + Tab
(Lorsqu'un nœud est sélectionné) Commencer à modifier l'attribut sélectionnéEntréeEntréeEntrée
Masquer/Afficher le nœud sélectionnéHHH
Focus sur le champs de recherche du panneau HTMLCtrl + FCmd + FCmd + F
Éditer le code HTMLF2F2F2
Arrêter d'éditer le code HTMLF2 / Ctrl +EntréeF2 / Cmd +EntréeF2 / Ctrl +Entrée
Copier l'extérieur du HTML du noeud sélectionné (depuis Firefox 42)Ctrl + CCmd + CCtrl + C
Faire défiler jusqu'à ce que le noeud soit visible (depuis Firefox 44)SSS
Trouver la prochaine occurrence dans le markup, lorsque que la recherche est active.EntréeEntréeEntrée
Trouver l'occurrence précédente dans le markup, lorsque que la recherche est active (depuis Firefox 48).Maj + EntréeMaj + EntréeMaj + Entrée
+ +

Fil d'ariane

+ +

Ces raccourcis fonctionnent lorsque le fil d'Ariane est sélectionné.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Aller à l'élément précédent dans le fil d'Ariane.Flèche gaucheFlèche gaucheFlèche gauche
Aller à l'élément suivant dans le fil d'Ariane.Flèche droiteFlèche droiteFlèche droite
Sélectionner le panneau HTMLMaj + TabMaj + TabMaj + Tab
Sélectionner le panneau CSSTabTabTab
+ +

Onglet CSS

+ +

Ces raccourcis fonctionnent dans le onglet CSS de l'Inspecteur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectionner la barre de recherche dans la panneau CSSCtrl + FCmd + FCtrl + F
Supprimer le contenu de la boite de recherche (seulement lorsque la boîte est sélectionnée, et contient du contenu)EchapEchapEchap
Défiler vers l'avant parmi les propriétés et les valeursTabTabTab
Défiler vers l'arrière parmi les propriétés et les valeursMaj + TabMaj + TabMaj + Tab
Commencer à éditer une propriété ou une valeur (dans la vue des règles seulement quand une valeur est sélectionnée et n'a pas été éditéeEntrée ou EspaceRetour ou EspaceEntrée ou Espace
Itérer parmi les suggestions d'autocomplétion (dans la vue des règles, quand une valeur est en éditionFlèche haut , Flèche basFlèche haut , Flèche basFlèche haut , Flèche bas
Choisir la suggestion d'autocomplétion sélectionnée (dans les vues des règles, quand une propriété ou une valeur est en édition)Entrée ou TabRetour ou TabEntrée ou Tab
Incrémenter la valeur sélectionnée de 1Flèche HautFlèche HautFlèche Haut
Décrémenter la valeur sélectionnée de 1Flèche BasFlèche BasFlèche Bas
Incrémenter la valeur sélectionnée de 10Maj + Flèche HautMaj + Flèche HautMaj + Flèche Haut
Décrémenter la valeur sélectionnée de 10Maj + Flèche BasMaj + Flèche BasMaj + Flèche Bas
Incrémenter la valeur sélectionnée de 100Maj + Page HautMaj + Page HautMaj + Page Haut
Décrémenter la valeur sélectionnée de 100Maj + Page BasMaj + Page BasMaj + Page Bas
Incrémenter la valeur sélectionnée de 0.1Alt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)Opt + Flèche HautAlt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)
Décrémenter la valeur sélectionnée de 0.1Alt + Flèche Bas(Ctrl + Flèche Bas depuis Firefox 60)Opt + Flèche BasAlt + Flèche Bas (Ctrl + Flèche Bas depuis Firefox 60)
+

Afficher/Masquer plus d'informations sur la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)

+
Entrée ou EspaceEntrée ou EspaceEntrée ou Espace
Ouvrir la page MDN concernant la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)F1F1F1
Ouvrir le fichier CSS sélectionnée (vue "Calculé", quand plus d'informations sont affichées pour une propriété et qu'un fichier CSS en référence est sélectionné) (depuis Firefox 49)EntréeRetourEntrée
+
+ +

Débogueur

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Rechercher une chaine de caractères dans la source actuelleCtrl + FCmd + FCtrl + F
Rechercher une chaine de caractères dans toutes les sourcesCtrl + Maj + FCmd + Maj + FCtrl + Maj + F
Chercher le suivant dans la source actuelleCtrl + GCmd + GCtrl + G
Rechercher les scripts par nomCtrl + PCmd + PCtrl + P
Reprendre l'exécution depuis un point d'arrêtF8F8 1F8
Passer la fonctionF10F10 1F10
Entrer dans la fonctionF11F11 1F11
Sortir de la fonctionMaj + F11Maj + F11 1Maj + F11
Ajouter/Supprimer un point d'arrêt sur la ligne sélectionnéeCtrl + BCmd + BCtrl + B
Ajouter/Supprimer un point d'arrêt conditionnel sur la ligne sélectionnéeCtrl + Maj + BCmd + Maj + BCtrl + Maj + B
+ +

1. Sur certains Mac, les touches fonctions sont reconfigurées par défaut pour une fonction particulière, comme le réglage du volume ou de la luminosité. Consultez ce guide pour utiliser ces touches comme des touches fonctions standards. Pour utiliser une touche reconfigurée comme une touche standard, maintenir la touche fonction enfoncée (ainsi pour ouvrir le profileur, utiliser Maj + Function + F5).

+ +
+

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas

+
+
+ +

Console Web

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir la console WebCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Rechercher le texte dans les messages de la consoleCtrl + FCmd + FCtrl + F
Ouvrir le panneau de l'inspecteur d'objectCtrl + ClicCtrl + ClicCtrl + Clic
Fermer le panneau de l'inspecteur d'objetÉchapÉchapÉchap
Focus sur la ligne de commandeCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Effacer les messages +

Ctrl + Maj + L

+
+

Cmd + L

+ +

Depuis Firefox 67 :

+ +

Cmd + K

+
+

Ctrl + Maj + L

+
+ +

Interpréteur de ligne de commande

+ +

Ces raccourcis fonctionnent lorsque vous êtes dans al popup de l'interpréteur de ligne de commande.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Si la ligne de commande est vide : revenir au début des messages de la consoleDébutDébutDébut
Si la ligne de commande est vide : défile jusqu'à la fin des messages dans la consoleFinFinFin
Défilement vers le haut de la sortie de la consolePage HautPage HautPage Haut
Défilement vers le bas de la sortie de la consolePage BasPage BasPage Bas
Reculer dans l'historique des commandesFlèche HautFlèche HautFlèche Haut
Avancer dans l'historique des commandesFlèche BasFlèche BasFlèche Bas
Initie une recherche inverse dnas l'historiqueme des commandes/revient en arrière parmis les commandes correspondantesF9F9F9
Itérer en avant parmis les commandes coresspondantes (après avoir initié une recherche inverse)  Maj+ F9  Maj+ F9  Maj+ F9
Aller au début de la ligneDébutCmd + ACtrl + A
Aller à la fin de la ligneFinCmd + ECtrl + E
Exécuter l'expression couranteEntréeRetourEntrée
Ajouter une nouvelle ligne, pour saisir des expressions multilignesMaj + EntréeMaj + RetourMaj + Entrée
+ +

Fenêtre d'auto-complétion

+ +

Ces raccourcis fonctionnent lorsque fenêtre d'auto-complétion est ouvert :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Choisir la suggestion d'auto-complétion couranteTabTabTab
Annuler la fenêtre d'auto-complétionÉchapÉchapÉchap
Aller à la précédente suggestion d'auto-complétionFlèche HautFlèche HautFlèche Haut
Aller à la prochaine suggestion d'auto-complétionFlèche BasFlèche BasFlèche Bas
Défiler vers le haut dans les suggestions d'auto-complétionPage HautPage HautPage Haut
Défiler vers le bas dans les suggestions d'auto-complétionPage BasPage BasPage Bas
Défile jusqu'au début des suggestions d'auto-complétion (à partir de Firefox 34)DébutDébutDébut
Défile jusqu'à la fin des suggestions d'auto-complétion (à partir de Firefox 34)FinFinFin
+
+ +

Éditeur de style

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'Éditeur de styleMaj + F7Maj + F7Maj + F7
Ouvrir la fenêtre d'auto-complétionCtrl + EspaceCmd + EspaceCtrl + Espace
+
+ +
+

Ardoise JavaScript

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'ArdoiseMaj + F4Maj + F4Maj + F4
Exécuter le code de l'ArdoiseCtrl + RCmd + RCtrl + R
Exécuter le code de l'Ardoise, afficher le résultat dans l'inspecteur d'objetsCtrl + ICmd + ICtrl + I
Exécuter le code de l'Ardoise, insérer le résultat en tant que commentaireCtrl + LCmd + LCtrl + L
Réévaluer la fonction couranteCtrl + ECmd + ECmd + E
Recharger le document courant puis exécuter le code de l'ArdoiseCtrl + Maj + RCmd + Maj + RCtrl + Maj + R
Enregistrer le fichierCtrl + SCmd + SCtrl + S
Ouvrir un fichier existantCtrl + OCmd + OCtrl + O
Créer un nouveau fichierCtrl + NCmd + NCtrl + N
Fermer l'ArdoiseCtrl + WCmd + WCtrl + W
Formater et indenter dans l'ArdoiseCtrl + PCmd + PCtrl + P
Afficher les suggestions d'auto-complétion (nouveauté de Firefox 32)Ctrl + EspaceCtrl + EspaceCtrl + Espace
Afficher la documentation intégrée (nouveauté de Firefox 32)Maj + EspaceMaj + EspaceMaj + Espace
Afficher la documentation intégrée (à partir de Firefox 33)Ctrl + Maj + EspaceCtrl + Maj + EspaceCtrl + Maj + Espace
+
+ +
+

Pipette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectionner la couleur couranteEntréeEntréeEntrée
Désactiver la pipetteÉchapÉchapÉchap
Déplacer de 1 pixelFlèchesFlèchesFlèches
Déplacer de 10 pixelsMaj + FlèchesMaj + FlèchesMaj + Flèches
+
diff --git a/files/fr/tools/measure_a_portion_of_the_page/index.html b/files/fr/tools/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..4837589662 --- /dev/null +++ b/files/fr/tools/measure_a_portion_of_the_page/index.html @@ -0,0 +1,31 @@ +--- +title: Measure a portion of the page +slug: Outils/Measure_a_portion_of_the_page +translation_of: Tools/Measure_a_portion_of_the_page +--- +
{{ToolsSidebar}}
+ +

Nouveau dans Firefox 59.

+ +

Depuis Firefox 59, il est possible de mesurer une zone spécifique d'une page web, en utilisant l'outil mesurer une zone de la page.

+ +

Cet outil est caché par défaut. Pour activer ce bouton il faut :

+ + + +

Un nouveau bouton apparaitra en haut de la page, à côté du bouton des options.

+ +

+ +

Il suffit alors de cliquer sur ce bouton pour activer l'outil. Une fois activé, un viseur apparait sur le curseur et affiche ses coordonnées à côté.

+ +

+ +

Lorsque la souris est déplacée avec son bouton enfoncé, l'outil commence a dessiner un rectangle avec les dimensions x,y et diagonale affichée. Les unités sont en pixels.

+ +

Lorsque le bouton souris est relâché, le rectangle ne disparait pas afin de pouvoir prendre des captures d'écrans, noter l'information, etc. Pour supprimer le rectangle il suffit de cliquer à nouveau.

+ +

diff --git a/files/fr/tools/memory/aggregate_view/index.html b/files/fr/tools/memory/aggregate_view/index.html new file mode 100644 index 0000000000..add2eb1979 --- /dev/null +++ b/files/fr/tools/memory/aggregate_view/index.html @@ -0,0 +1,149 @@ +--- +title: Vue "Agrégats" +slug: Outils/Memory/Aggregate_view +translation_of: Tools/Memory/Aggregate_view +--- +
{{ToolsSidebar}}

Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la vue "Carte proportionnelle" est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :

+ +

+ +

Cette vue ressemble à ceci :

+ +

+ +

Cela représente un tableau qui affiche une liste triée du contenu de la heap. Il y a trois façons différentes de visualiser la heap :

+ + + +

Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.

+ +

En haut à droite, se trouve le champ "Filtrer". Il permet de filtrer le contenu affiché, afin par exemple de pouvoir rapidement voir combien d'objets d'une classe ont été alloués.

+ +

Type

+ +

Il s'agit du tri par défaut qui ressemble à ceci :

+ +

+ +

Cette option regroupe la heap par grandes catégories :

+ + + +

Chaque type occupe une ligne du tableau. Les lignes sont triées par ordre décroissant d'utilisation mémoire. Par exemple dans la capture d'écran ci-dessus, il est possible de voir que les Objects JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.

+ + + +
+
Les captures d'écran sur cette page montrent des instantanés capturés grâce à l'exemple "monster"
+
+ +

Par exemple, dans la capture d'écran ci-dessus, on peut voir que :

+ + + +

A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :

+ +

+ +

Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de Array affichera les quatre instances :

+ +

+ +

Pour chaque instance, on peut voir taille retenue et la taille de l'objet de cette instance. Dans ce cas, il est possible de voir que les trois premiers tableaux ont une taille importante (5% du total de la heap) et une traille retenue encore plus importante (26% du total).

+ +

Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera chemins de rétention :

+ +

+ +

{{EmbedYouTube("uLjzrvx_VCg")}}

+ +

Call Stack

+ +

La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.

+ +

Cette option étant gourmande en terme de performances, elle n'est pas activée par défaut. Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations avant d'allouer la mémoire dans la capture.

+ +

Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :

+ +


+ La structure de ce tri ressemble fortement à celle de l'Arbre d'appel, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :

+ + + +

Il est possible d'utiliser l'icône en forme de triangle pour avoir plus de précisions et trouver l'endroit exact d'où l'allocation à été faite.

+ +

Il est plus simple d'expliquer ce comportement avec un exemple. Cette page contient contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets HTMLDivElement et 4000 objets HTMLSpanElement) :

+ +

Réalisons maintenant une allocation trace. Pour cela, il faut :

+ +
    +
  1. Ouvrir l'outil Mémoire
  2. +
  3. Cocher "Enregistrer les piles d'allocations"
  4. +
  5. Charger la page https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html
  6. +
  7. Prendre une capture
  8. +
  9. Choisir la vue "Agrégats"
  10. +
  11. Choisir le regroupement par "Call Stack"
  12. +
+ +

{{EmbedYouTube("aZ5Rq9lXD80")}}

+ +

Quelque chose comme ceci devrait apparaitre :

+ +

+ +

Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à createToolbars()).

+ +

Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :

+ +

+ +

C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.

+ +

Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans createToolbarButton(), à la ligne 9 de alloc.js, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.

+ +

Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :

+ +

{{EmbedYouTube("zlnJcr1IFyY")}}

+ +

Inverted Call Stack

+ +

La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point ou en des points plus loin dans l'arbre. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.

+ +

L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.

+ +

Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :

+ +

+ +

Maintenant, la première ligne affiche directement l'appel createToolbarButton() qui correspond à l'allocation de 89% de la heap de la page.

+ +

(no stack available)

+ +

Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.

+ +

Exemples d'usage de la heap non alloué par un script :

+ + + +

Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.

diff --git a/files/fr/tools/memory/basic_operations/index.html b/files/fr/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..e132baed90 --- /dev/null +++ b/files/fr/tools/memory/basic_operations/index.html @@ -0,0 +1,64 @@ +--- +title: Opérations de base +slug: Outils/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +--- +
{{ToolsSidebar}}

Ouvrir l'outil Mémoire

+ +

L'outil Mémoire n'est pas activé par défaut. Pour l'activer, il faut ouvrir et cocher la case "Mémoire" dans la catégorie "Outils de développement pas défaut" :

+ +

{{EmbedYouTube("qi-0CoCOXwc")}}

+ +

Depuis Firefox 50, l'outil mémoire est activé par défaut.

+ +

Capturer un instantané

+ +

Pour capturer un instantané de la heap il faut cliquer sur le bouton "Capturer un instantané" ou sur l'icône en forme d'appareil photo, en haut à gauche :

+ +

+ +

L'instantané, occupera une large partie du panneau de droite. Sur la gauche, il y aura une liste des instantanés capturée. Ce panneau inclut le timestamp, la taille et les actions supprimer/enregistrer :

+ +

+ +

Supprimer un instantané

+ +

Pour supprimer un instantané, il suffit de cliquer sur l'icône "X" :

+ +

+ +

Sauvegarder et charger des instantanés

+ +

Fermer l'outil, supprimera tous les instantanés non sauvegardés. Pour sauvegarder un instantané, il suffit de cliquer sur "Enregistrer" :

+ +

+ +

Il vous sera ensuite demandé un nom et un emplacement. Le fichier sera alors enregistré avec une extension .fxsnapshot

+ +

Pour charger un instantané depuis un fichier .fxsnapshot, il faut de cliquer sur le bouton en forme de rectangle avec un flèche pointée vers le haut (avant Firefox le bouton avait le texte "Importer") :

+ +

+ +

Il suffit ensuite de sélectionner un instantané précédemment enregistré sur votre disque.

+ +

Comparer des instantanés

+ +

À partir de Firefox 45, il est possible de comparer deux instantanés. Le diff affiche les endroits ou de la mémoire a été allouée, et où de la mémoire a été libéré entre les deux instantanés.

+ +

Pour créer une diff, il faut cliquer sur l'icône en forme de diagramme de Venn en haut à gauche (note: avant Firefox 47, l'icône ressemblait à un "+/-") :

+ +

+ +

Il faut ensuite sélectionner l'instantané qui sert de base de comparaison puis l'instantané à comparer. L'outil affiche alors les différences entre les deux instantanés :

+ +

{{EmbedYouTube("3Ow-mdK6b2M")}}

+ +
+

Lors d'une comparaison, il n'est pas possible d'utiliser la vue "Dominants" ou "Carte proportionnelle"

+
+ +

Enregistrer les piles d'allocations

+ +

L'outil Mémoire permet de savoir exactement où dans le code la mémoire est allouée. Cependant, enregistrer ces informations a un cout en performance. Il faut donc activer manuellement l'enregistrement avant de faire les allocations mémoires. Pour cela, il suffit de cocher la case "Enregistrer les pilles d'allocations" :

+ +

diff --git a/files/fr/tools/memory/dom_allocation_example/index.html b/files/fr/tools/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..0f3a4b04d6 --- /dev/null +++ b/files/fr/tools/memory/dom_allocation_example/index.html @@ -0,0 +1,54 @@ +--- +title: Exemple d'allocation DOM +slug: Outils/Memory/DOM_allocation_example +translation_of: Tools/Memory/DOM_allocation_example +--- +
{{ToolsSidebar}}

Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.

+ +

Il est possible de visiter le site à l'adresse : https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.

+ +

Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :

+ +
var toolbarButtonCount = 20;
+var toolbarCount = 200;
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function createToolbarButton() {
+  var toolbarButton = document.createElement("span");
+  toolbarButton.classList.add("toolbarbutton");
+  // empêche Spidermonkey de partager les instances
+  toolbarButton[getRandomInt(0,5000)] = "foo";
+  return toolbarButton;
+}
+
+function createToolbar() {
+  var toolbar = document.createElement("div");
+  // empêche Spidermonkey de partager les instances
+  toolbar[getRandomInt(0,5000)] = "foo";
+  for (var i = 0; i < toolbarButtonCount; i++) {
+    var toolbarButton = createToolbarButton();
+    toolbar.appendChild(toolbarButton);
+  }
+  return toolbar;
+}
+
+function createToolbars() {
+  var container = document.getElementById("container");
+  for (var i = 0; i < toolbarCount; i++) {
+    var toolbar = createToolbar();
+    container.appendChild(toolbar);
+  }
+}
+
+createToolbars();
+ +

Voici une représentation en pseudo-code de ce que fait ce code :

+ +
createToolbars()
+    -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
+       -> createToolbarButton() // appelé 20 fois par toolbar, crée un élément SPAN à chaque fois
+ +

Ainsi, au total ce code crée 200 objets HTMLDivElement, et 4000 objets HTMLSpanElement.

diff --git a/files/fr/tools/memory/dominators/index.html b/files/fr/tools/memory/dominators/index.html new file mode 100644 index 0000000000..30dee2db22 --- /dev/null +++ b/files/fr/tools/memory/dominators/index.html @@ -0,0 +1,62 @@ +--- +title: Dominants +slug: Outils/Memory/Dominators +translation_of: Tools/Memory/Dominators +--- +
{{ToolsSidebar}}
+ +
+

Cet article fournit une introduction aux concepts d'Accessibilité, de taille Objet et de taille Retenue, ainsi que des Dominants, et de comment ses concepts s'appliquent dans des langages à ramasse-miette (garbage-collector) comme le JavaScript.

+ +

Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.

+ +

Il est possible de voir les dominants d'une page en utilisant la Vue "Dominants"  dans l'outil Mémoire.

+
+ +

Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.

+ +

Accessibilité

+ +

Dans les implémentations modernes de JavaScript, le runtime décide de quand un objet n'est plus nécessaire en se basant sur l'accessibilité. Dans ce système, la heap est représentée par un ou plusieurs graphes. Chaque noeud dans le graphe représente un objet, et chaque connexion entre les noeuds (edge) représente une référence d'un objet à un autre. Le graphe commence au noeud racine, indiqué dans les diagrammes suivant par un "R" :

+ +

+ +

Lors du passage du ramasse-miette, le runtime parcourt le graphe à partir de la racine et marque chaque objet qu'il trouve. Tous les objets qui ne sont pas trouvés dans ce parcours, ne sont pas accessibles et peuvent être désalloués.

+ +

Donc lorsqu'un objet devient inaccessible (par exemple parce qu'il était référencé par une seule variable locale qui sort du scope actuel) alors tout objet qu'il référence devient également inaccessible à son tour (sauf s’il était référencé par d'autres objets qui sont eux toujours accessibles) :

+ +

+ +

A l'inverse, cela veut dire que des objets sont gardés en vie tant qu'un autre objet accessible comporte une référence à cet objet.

+ +

Taille de l'objet et taille retenue

+ +

Tout cela donne naissance à deux façons différentes de considérer la taille d'un objet :

+ + + +

Souvent, les objets auront une taille d'objet faible, mais une bien plus grande taille retenue, à cause de ses références à d'autres objets. La taille retenue est un concept important dans l'analyse de l'utilisation mémoire, car cela répond à la question "si cet objet cesse d'exister, quelle est la taille de mémoire libérée ?".

+ +

Dominants

+ +

Un concept lié à cela est le concept de dominants. Un noeud B "domine" le noeud A si tous les chemins depuis la racine jusqu'à A passent par B :

+ +

+ +

Si un des noeuds dominants du noeud A est libéré, alors le noeud A lui-même devient éligible au ramasse-miette.

+ +

Si le noeud B domine le noeud A mais ne domine aucun des dominants de A, alors B est le dominant immédiat de A :

+ +

+ +

Une subtilité ici est que si un objet A est référencé par deux autres objets B et C, alors aucun de ces deux objets n'est un dominant de A, car il est possible de retirer soit B soit C du graphe et A serait alors toujours référencé par son autre référent. À la place, le dominant immédiat de A est le premier ancêtre commun :
+

+ +

Voir Aussi

+ +

Les dominants dans la théorie des graphes.

+ +

Tracing garbage collection.

diff --git a/files/fr/tools/memory/dominators_view/index.html b/files/fr/tools/memory/dominators_view/index.html new file mode 100644 index 0000000000..bfa472bded --- /dev/null +++ b/files/fr/tools/memory/dominators_view/index.html @@ -0,0 +1,156 @@ +--- +title: Vue "Dominants" +slug: Outils/Memory/Dominators_view +translation_of: Tools/Memory/Dominators_view +--- +
{{ToolsSidebar}}
+

La vue "Dominants" est une des nouveautés de Firefox 46.

+
+ +

À partir de Firefox 46, l'outil Mémoire inclut une nouvelle vue nommée "Dominants". Celle-ci est utile pour comprendre la "Taille retenue" des objets d'un site : il s'agit de la taille des objets eux-mêmes ainsi que la taille des objets qu'ils gardent en vie par référence.

+ +

Si vous n'êtes pas familier avec la "taille de l'objet", la "taille retenue" et les Dominants, il est recommandé de lire l'article sur les concepts des Dominants.

+ +

Interface utilisateur des Dominants

+ +

Pour afficher la vue des Dominants, il faut sélectionner "Dominants" dans le menu déroulant "Afficher" :

+ +

+ +

Cette vue est constituée de deux panneaux:

+ + + +

+ +

Arbre des Dominants

+ +

Ce panneau affiche les objets de la capture qui retiennent le plus de mémoire.

+ +

Dans la partie principale de l'UI, la première ligne est nommée "Racines GC". En dessous de cette ligne, il y a une ligne pour :

+ + + +

Pour chacune de ces lignes, seront affichés :

+ + + +

Les lignes sont classées par la taille de mémoire retenue. Par exemple :

+ +

+ +

Dans cette capture d'écran, il est possible de voir qu'il y a cinq linges en dessus de "GC roots". Les deux premiers objets sont "Call" et "Window", et retiennent respectivement 21% et 8% de la mémoire totale de la capture. Il est également possible de voir qu'ils ont une taille (shallow) réduite, donc quasiment toute la mémoire retenue vient d'objets qu'ils dominent.

+ +

Juste en dessous de chaque racine GC, tout les noeuds pour lequel cette racine est le dominant immédiat sont affichés et triés par taille retenue.

+ +

Par exemple, cliquer sur le premier objet "Window" affichera ceci :

+ +

+ +

Il est possible de voir que "Window" domine un objet "CSS2Properties", dont la taille retenue est de 2ù de la capture. Encore une fois, la taille de l'objet est faible, quasiment toute sa taille retenue est due aux objets dominés. En cliquant sur l'icone en fore de triangle à coté de la fonction, il est possible de voir ces noeuds.

+ +

Il est ainsi possible de se faire rapidement une idée de quels objets retiennent le plus de mémoire dans la capture.

+ +

Il est possible d'utiliser Alt + clic pour étendre le graph entier d'un noeud.

+ +

Pile d'allocations

+ +

Dans la barre d'outils, il y a une liste déroulante : "Nommer selon" :

+ +

+ +

Par défaut, l'option sélectionnée est "Type". Il est possible de choisir "Call Stack" à la place pour savoir exactement d'ou dans le code les objets sont alloués.

+ +
+

Cette option est appelée "Allocation Stack" dans Firefox 46.

+
+ +

Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations" avant de lancer le coder qui alloue les objets. Il faut ensuite prendre une capture, puis sélectionner "Call Stack" dans le menu déroulant "Nommer selon".

+ +

Maintenant, le nom du noeud contient le nom de la fonction qui l'a alloué, ainsi que le fichier, la ligne et la position exacte d'ou dans la fonction l'allocation a été faite. Cliquer sur le nom du fichier ouvrira cette position dans le Débogueur.

+ +

{{EmbedYouTube("qTF5wCSD124")}}

+ +
+

Parfois, une ligne nommée "(no stack available)" est présente. Les piles d'allocations ne sont actuellement enregistrées que pour les objets, pas pour les tableaux, les strings ou les structures internes.

+
+ +

Chemins de rétention

+ +
Ce panneau est une des nouveautés de Firefox 47.
+ +

Ce panneau affiche, pour un noeud sélectionné les 5 plus courts chemins depuis ce noeud jusqu'a une racine GC. Cela permet de voir tous les noeuds qui empêchent ce noeud d'être détruit par le garbage collector (ramasse-miette en bon français). Si un objet est soupçonné de cause une fuite mémoire, ce panneau affichera les objets qui réfrènent l'objet soupçonné.

+ +

Pour voir le chemin de rétention, il suffit de sélectionner un noeud dans le panneau de l'arbre des Dominants :

+ +

+ +

Ici, un objet a été sélectionné et l'on peut voir un unique chemin jusqu'a la racine GC.

+ +

La racine GC Window contient une référence à un objet HTMLDivElement. Cet objet contient lui une référence à un Object, et ainsi de suite. Il est possible de retracer le chemin juste en regardant le panneau de l'arbre des Dominants. Si une seule de ces références venait à être supprimée, les objets en dessous seraient détruits par le garbage collector.

+ +

Chaque connexion dans le graph est annoté avec le nom de la variable qui référence l'objet.

+ +

Parfois, il y a plus d'un seul chemin de rétention :

+ +

+ +

Ici, il y a deux chemins depuis le noeud DocumentPrototype vers la racine GC. Si seulement l'un des des deux venait à être supprimé, le noeud ne serait pas détruit par le garbage collector, puisqu'il serait toujours retenu par l'autre chemin.

+ +

Exemple

+ +

Pour tester l'outil, il est plus simple d'utiliser un exemple

+ +


+ Nous utiliserons l'exemple d'allocation de monstres. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.
+  

+ +

Prendre une capture

+ +

Pour voir à quoi cela ressemble avec la vue "Dominants", il faut :

+ + + +

{{EmbedYouTube("HiWnfMoMs2c")}}

+ +

Analyse de l'arbre des dominants

+ +

Les trois tableaux seront les trois premières racines GC, chacun retenant à peu près 23% de la mémoire totale de la capture :

+ +

+ +

Étendre un tableau affichera les objets (monstres) qu'il contient. Chaque monstre à une taille réduite de 160 octets. Cette taille inclut les variables int "eye" et "tentacle-count". Chaque monstre à une taille retenue plus grande, car ils retiennent la string utilisée pour stocker le nom du monstre :

+ +

+ +

Tout cela se rapproche précisément du graph mémoire attendu. Une chose curieuse cependant, où est passé l'objet qui contient ces trois tableaux ? En regardant le chemin de rétention pour un des tableaux, il est possible de le voir :

+ +

+ +

Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres friendly. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.

+ +

Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également,  l'article sur le concept des Dominants.

+ +

Utiliser la vue Call Stack

+ +

Enfin, il est possible de passer à la vue "Call Stack", afin de voir quels objets sont alloués et de se rendre à ce point dans le Débogueur :

+ +

{{EmbedYouTube("qTF5wCSD124")}}

diff --git a/files/fr/tools/memory/index.html b/files/fr/tools/memory/index.html new file mode 100644 index 0000000000..017e5b69c5 --- /dev/null +++ b/files/fr/tools/memory/index.html @@ -0,0 +1,68 @@ +--- +title: Mémoire +slug: Outils/Memory +tags: + - DevTools + - Firefox + - Mozilla + - Tools + - outils de développement +translation_of: Tools/Memory +--- +
{{ToolsSidebar}}

L'outil Mémoire permet de prendre une capture de l'état actuel de la heap de la mémoire. Il fournit plusieurs manières de visualiser la heap. Cela permet de voir la taille mémoire que prennent les objets et les endroits exacts du code d'où la mémoire est allouée.

+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

La base

+ +
+ +
+ +
+

Analyser les captures

+ +
+

La vue "carte proportionnelle" est une nouveauté de Firefox 48, la vue "Dominants" est une nouveauté de Firefox 46.

+
+ +

Une fois qu'une capture est prise, il y a deux vues principales que l'outil fournit :

+ + + +

Si l'option "Enregistrer les piles d'allocations" est cochée, les deux vues affichent d'où exactement dans le code les allocations sont originaires.

+ +

Enfin, il est possible de comparer deux captures, et d'analyser le résultat de la différence.

+ +
+

Concepts

+ +
+ +
+ +
+

Pages d'exemples

+ +

Exemples utilisés dans la documentation de l'outil Mémoire :

+ +
+ +
diff --git a/files/fr/tools/memory/monster_example/index.html b/files/fr/tools/memory/monster_example/index.html new file mode 100644 index 0000000000..48357b8d8b --- /dev/null +++ b/files/fr/tools/memory/monster_example/index.html @@ -0,0 +1,81 @@ +--- +title: Exemple d'allocation de monstres +slug: Outils/Memory/Monster_example +translation_of: Tools/Memory/Monster_example +--- +
{{ToolsSidebar}}

Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil Mémoire.

+ +

Il est possible de l'essayer sur le site : https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. Voici le code :

+ +
var MONSTER_COUNT = 5000;
+var MIN_NAME_LENGTH = 2;
+var MAX_NAME_LENGTH = 48;
+
+function Monster() {
+
+  function randomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+  function randomName() {
+    var chars = "abcdefghijklmnopqrstuvwxyz";
+    var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH);
+    var name = "";
+    for (var j = 0; j &lt; nameLength; j++) {
+      name += chars[randomInt(0, chars.length-1)];
+    }
+    return name;
+  }
+
+  this.name = randomName();
+  this.eyeCount = randomInt(0, 25);
+  this.tentacleCount = randomInt(0, 250);
+}
+
+function makeMonsters() {
+  var monsters = {
+    "friendly": [],
+    "fierce": [],
+    "undecided": []
+  };
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.friendly.push(new Monster());
+  }
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.fierce.push(new Monster());
+  }
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.undecided.push(new Monster());
+  }
+
+  console.log(monsters);
+}
+
+var makeMonstersButton = document.getElementById("make-monsters");
+makeMonstersButton.addEventListener("click", makeMonsters);
+ +

Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :

+ + + +

Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :

+ +

diff --git a/files/fr/tools/memory/tree_map_view/index.html b/files/fr/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..a009e59a7a --- /dev/null +++ b/files/fr/tools/memory/tree_map_view/index.html @@ -0,0 +1,45 @@ +--- +title: Vue carte proportionnelle +slug: Outils/Memory/Tree_map_view +translation_of: Tools/Memory/Tree_map_view +--- +
{{ToolsSidebar}}
+

Cette vue est une des nouveautés de Firefox 48.

+
+ +

La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.

+ +

Une carte affiche :  "Une représentation de données hiérarchiques dans un espace limité" sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).

+ +

Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :

+ + + +

Chaque catégorie, est représentée dans un rectangle, et la taille de ce rectangle correspond à la portion de la heap occupée par les éléments de cette catégorie. Cela signifie qu'il est facile d'avoir rapidement une idée de ce qui prend le plus de place mémoire.

+ +

A l’intérieur des grandes catégories :

+ + + +

Voici quelques captures d'exemple, tel qu'elles apparaissent dans la vue carte proportionnelle :

+ +

+ +

Cette carte provient de l'exemple d'allocation DOM, qui crée simplement un grand nombre de nœuds DOM. (200 objets HTMLDivElement et 4000 objets HTMLSpanElement). Il est possible de voir que quasiment tout l'espace occupé dans la heap l'est par les objets HTMLSpanElement crées.

+ +

+ +

Cette carte vient de l'exemple allocation de monstres, qui représente trois tableaux contenant chacun 5000 monstres. Chaque monstre possède un nom aléatoire. Il est possible de voir que la heap est occupée principalement par les strings utilisés pour le nom des monstres, ainsi que par les objets utilisé pour contenir les autres attributs des monstres.

+ +

+ +

Cette carte provient de http://www.bbc.com/, et est probablement plus représentative de la vie réelle que les exemples. Il est possible de voir qu'une partie beaucoup plus importante de la heap est occupée par les scripts qui sont chargés depuis un grand nombre d'origines.

diff --git a/files/fr/tools/migrating_from_firebug/index.html b/files/fr/tools/migrating_from_firebug/index.html new file mode 100644 index 0000000000..5191e43e8e --- /dev/null +++ b/files/fr/tools/migrating_from_firebug/index.html @@ -0,0 +1,270 @@ +--- +title: Migrating from Firebug +slug: Outils/Migrating_from_Firebug +translation_of: Tools/Migrating_from_Firebug +--- +
{{ToolsSidebar}}
+ +

Pendant la migration de Firebug vers les outils de développement de Firefox, vous vous demanderez certainement ou sont vos fonctionnalités adorés. Et bien, cette liste est faite pour vous.

+ +
+
+
 
+ +
+

+ +

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

+ +

Télécharger Firefox Developer Edition

+
+ +
 
+
+ +
+

Général

+ +

Activation

+ +

L'activation de Firebug est basé sur des URL respectant la "same origin policy". Cela signifie que si vous ouvrez  une page de la même origine dans un onglet  différent, Firefbug s'ouvre automatiquement. Et lorsque une page d'une origine différente dans le même onglet, il se ferme automatiquement. L'activation des devtools sont eux basé sur les onglets. Par exemple, si vous ouvrez les devtools dans onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les devtools se ferment.

+ +

Ouvrir les outils

+ +

Firebug peut être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il est possible d'utiliser le raccourci clavier  Ctrl+Maj+C / Cmd+Opt+C. Les DevTools partagent les mêmes raccourcis, mais fournissent également des raccourcis pour les différent panneaux. Le Moniteur Réseau peut être ouvert avec  Ctrl+Maj+Q / Cmd+Opt+Q, la Console via Ctrl+Maj+K / Cmd+Opt+K et le Déboguer avec Ctrl+Maj+S / Cmd+Opt+S.

+ +

Console

+ +

La Console est l'équivalent du panneau Console de Firebug. Elle affiche les log associé à une page web et permet d'exécuter des expressions JavaScript via sa ligne de commande. L'affichage est différent. Le {{bug(1269730)}} changera peut être cela.

+ +

Filtrer les log

+ +

Firebug offre deux façons de filtrer les messages de log, via le menu des options et via les boutons des filtres dans la barre d'outils. La Console des devtools offre une fonctionnalité similaire via les buttons de filtre dans sa barre d'outils — le tout centralisé à un seul endroit.

+ +

API de ligne de commande

+ +

L'API de ligne de commande dans Firebug fournit des fonction spéciales pour votre confort. La ligne de commande des outils de développement, à quelques fonctions en commun, mais possède également des fonction supplémentaires et n'a pas certaines fonction de Firefbug.

+ +

API de la Console

+ +

Pour loguer des choses dans la consoles depuis une page web, Firebug rend disponible une API Console dans la page. Les outils de développement partagent la même API, donc vos expressions "console.* continueront de fonctionner.

+ +

Logs persistants

+ +

Dans Firebug, il est possible de cliquer sur bouton "Persist" dans la barre d'outils pour garder les messages de log entre différent navigations de pages et entre les rechargements. Dans les outils de développemnt, cette option est appelée Activer les journaux persistants et est disponible dans les options de la boîte à outils.

+ +

Logs de serveur

+ +

Les extension Firebug tels que FirePHP permettent d'afficher des messages du serveur dans la console Firefbug. Cette fonctionnalité est déja intégrée dans les outils de développement en utilisant le protocole ChromeLogger et ne nécessite pas d'autres extensions pour être installé.

+ +

Historique de commande

+ +

L'historique de commande disponible grâce à un bouton dans la ligne de commande de Firebug est disponible en utilisant les touches / dans la ligne de commande de la Console

+ +

Inspecter les propriétés des objets

+ +

En cliquant sur objet logué dans la console, il est possible d'inspecter les propriétés de l'objet grâce au panneau DOM. Dans les outils de développement de Firefox, il est aussi possible d'inspecter les objets. La différence est qu'ils montrent les propriétés et les méthodes dans un panneau annexe dans la Console.

+ +

Afficher les requêtes réseau

+ +

Le panneau Console dans Firebug permet d'afficher les requêtes {{Glossary("AJAX")}} (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}}). Cette option est également disponible dans la Console des outils de developpement, grâce au filtre XHR. De plus, la Console permet d'afficher tous les autres types de requêtes résseau grace au filtre Requêtes.

+ +

Afficher les structures JSON et XML

+ +

Pour afficher les réponses JSON et XML des requêtes {{Glossary("AJAX")}}, Firebug a des onglets spéciaux lors de l'expension d'une requête dans son panneau Console. La Cosnsole des outils de developpement affiche ces structures directement dans l'onglet "Réponses".

+ +

Multi-line command line

+ +

La Console Firebug a une ligne de commande multi-ligne appelée Command Editor. Les outils de développment n'ont pas un panneau comme le Command Editor (ce qui a déja été demandé dans le {{bug(1133849)}}), mais possède en revanche un outil séparé nommé Ardoise JavaScript, qui peut être ajouté comme panneau dans la boite à outils ou ouvert dans une fenêtre séparée, via le menu Firefox > Développement web > Ardoise, ou avec Maj + F4. Il est également bon à savoir que la ligne de commande normale ajoutte intélligement des retour à la ligne lorsqu'elle reconait une commande incomplete, document. et ensuite appuyer sur Entrée. Il est également possible de faire un retour à la ligne manuel avec Maj + Entrée.

+ +

Prévisualisation de réponse

+ +

Il y a un onglet Preview lors de l'expensin d'une requête réseau affiché dans Firebug. La Console web affiche une prévisualisation dasn l'onget Réponse. Pour le moment, la prévisualisation pour le HTML, le XML et le SVG, est cependant manquant. Vous pouvez suivre l'historque dans le {{bug(1247392)}} et le {{bug(1262796)}}. Mais lors d'un clic sur l'URL de la requête, les outils de développement passent au Moniteur Réseau, qui lui a un onglet Preview.

+ +

Inspecteur

+ +

Firebug a un panneau HTML, qui permet d'éditer le HTML/XML/SVG et le CSS en relation. Dans les outils de développement, cette fonctionalitée est assurée par l'Inspecteur.

+ +

Editer l'HTML

+ +

Dans l'Inspecteur, les attributs des balises et leur contenu peuvent être édités, tout comme dans Firebug. Il permet en plus d'éditer également les balises elles-même.

+ +

Il est également possible d'éditer l'HTML directement. Dans Firebug, il faut faire clic-droit sur un noeud puis cliquer sur Edit HTML... dans le menu contextuel. Dans les outils de développement la même option est également dispobible dans le menu contextuel. Elle est nommée Éditer en tant qu'HTML. Seul la prévisualtisation des changements en temps réel est maquante, voir {{bug(1067318)}} et {{bug(815464)}}.

+ +

Copier l'HTML et les informations en relation

+ +

Le panneau HTML de Firebug permet de copier l'interieur ou l'exterieur d'un élément HTML, ainsi que le CSS et le XPath via le menu contextuel d'un élément. L'inspecteur fournit les même fonctionalités, sauf pour la copie des XPaths. Voir {{bug(987877)}}.

+ +

Éditer le CSS

+ +

Les deux outils permètent de voir et d'éditer les règles CSS des éléments sélectionnés dans la vue du noeud de façon similaire. Firebug possède le panneau Style pour ça, les outils de developpement eux ont le panneau Règles.

+ +

Dans Firebug il est possible d'ajouter des règles en effectuant un clic-droit puis en sélectionant Add Rule... dans le menu contextuel. Les outils de developpement eux ont une option dans le menu contextuelle nommée Ajouter une règle ainsi qu'un bouton + dans la barre d'outils de l'onglet Règles.

+ +

Pour éditer le style des élements (les propriétés CSS de l'attribut {{htmlattrxref("style")}} d'un élément), dans Firebug il faut faire un clic-droit dans l'onglet Style et sélectionner Edit Element Style... dans le menu contextuel. Les outils de développement affichent une règle element {} pour ceci. Ainsi un simple clic sur cette règle permet de commencer à éditer les propriétés.

+ +

Auto-completion du CSS

+ +

Tout comme dans Firebug, l'onglet des règles fournit de l'auto-complétion pour les propriétés CSS et leurs valeurs. Quelques propriétés ne sont pas complétés, elles sont listés dans le {{bug(1337918)}}.

+ +

Copier & coller du CSS

+ +

L'onglet Style de Firebug ainsi que l'onglet Règles des outils de developpement fournissent tous deux l'option dans leurs menu contextuels de copier/coller les règles CSS. Les outils de développement fournissent en plus une option pour copier le sélecteur d'une règle et de copier les règles désactivé comme du code commenté. Il manque par contre les options por copier la déclaration de style entière. Cependant cela peut être fait en sélectionant les règles dans l'onglet et copier la sélection avec Ctrl + C ou via le menu contextuel.

+ +

L'onglet des règles des outils de developpement est plus intélligent quand il s'agit de coller du CSS dedans. Il est possible de coller des déclarations de style entière dans des règles existantes. Et les règles commenté sont directement désactivées.

+ +

Afficher les pseudo-classes

+ +

Firebug permet d'afficher les pseudo-classes CSS {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} d'un élément, grâce aux options options du menu du panneu latéral Style. Dans les outils de développement, il y a deux façons de faire de même. La première est de les activer via l'onglet pseudo-class dans le panneau des Règles. La seconde est de faire un clic droit sur un élément dans la vue des noeuds et d'affichier les pseudo-classes via le menu contextuel.

+ +

Examiner les raccourcis de propriétés CSS

+ +

Les raccourcis de propriétés CSS peuvent être converties dans leur version complète en sélectionnant l'option Étendre les propriétés raccouricies dans le panneau latéral Style. Le panneau des Règles des outils de developpement est plus malin et permet de les étendre en cliquant sur les acolades entre.

+ +

Afficher uniquement les styles appliqués

+ +

Le panneau latéral Style de Firebug a une option pour afficher uniquement les propriétés CSS d'une règle qui sont appliqué à l'élement sélectionné, et cache alors toutes les règles surchargées. Cette fonctionalité n'est pas présente dans les outils de développement. Mais elle a déja été demandée dans le {{bug(1335327)}}.

+ +

Inspecter le modèle de boite

+ +

Dans Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.

+ +

Inspecter les styles calculés

+ +

 

+ +

Les valeurs calculées des propriétés CSS sont affichées dans le panneau latéral "Calculé" des outils de développement exactement comme elle le sont dans le panneau latéral "Calculé" de Firebug. La différence est que dans outils de développement les propriétés sont toujours listées par ordre alphabétique et non groupées (voir {{bug(977128)}}) et il n'y a pas d'option pour cacher les styles spécifiques à Mozilla, mais il y a un champ de saisie permettant de filtrer les propriétés.

+ +

Inspecter les évènements

+ +

 

+ +

Les événements affectés à un élément sont affichés dans le panneau latéral Événements de Firebug. Dans les outils de développement, ils sont affichés en cliquant sur la petite icône 'ev' à côté d'un élément dans la vue du noeud. Les deux outils permettent d'afficher les écouteurs d'événements "wrapped" (par exemple les écouteurs "wrapped" dans des fonctions jQuery). Pour améliorer l'interface utilisateur des outils de développement, il y a aussi une demande d'ajout d'un panneau latéral Événements comme celui de Firebug (voir {{bug(1226640)}}).

+ +

Stoper l'exécution sur des mutations DOM

+ +

 

+ +

Dans Firebug il est possible de s’arrêter sur les mutations DOM, ce qui signifie que lorsqu'un élément est modifié, l'exécution du script est arrêtée à la ligne correspondante dans le fichier JavaScript, ce qui a causé le changement. Cette fonction peut être activée globalement via le bouton "Break On Mutate", ou individuellement pour chaque élément et pour différents types de changements comme les changements d'attributs, les changements de contenu ou la suppression d'éléments. Malheureusement, les outils de développement n'ont pas encore cette fonctionnalité (voir {{bug(1004678)}}). Pour arrêter l'exécution du script, il est nécessaire de définir un point d'arrêt sur la ligne avec la modification dans le Débogueur.

+ +

Chercher des éléments par sélecteurs CSS ou XPaths

+ +

Firebug permet de rechercher des élément de le panneau HTML par sélecteur CSS ou XPaths. Les outils de développement permentent également de rechercher par sélecteur CSS. Ils affichent même les IDs et classes correspondantes. Rechercher par XPaths n'est pas encore implémenté (voir {{bug(963933)}}.

+ +

Debugger

+ +

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

+ +

Switch between sources

+ +

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

+ +

Managing breakpoints

+ +

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see {{bug(821610)}}, {{bug(1004678)}}, {{bug(895893)}} and {{bug(1165010)}}). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

+ +

Step through code

+ +

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

+ +

Examine call stack

+ +

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

+ +

Examine variables

+ +

The Watch side panel in Firebug displays the {{domxref("window")}} object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

+ +

Style Editor

+ +

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

+ +

Switch between sources

+ +

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

+ +

Edit a style sheet

+ +

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

+ +

Try out CSS selectors

+ +

Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in {{bug(1323746)}}.

+ +

Searching within the style sheets

+ +

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see {{bug(889571)}}) and also not via a regular expression (see {{bug(1362030)}}.

+ +

Performance Tool

+ +

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

+ +

This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.

+ +

View JavaScript call performance

+ +

What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.

+ +
+

Note: The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.

+
+ +

Jump to function declaration

+ +

Like in Firebug's profiler output the Call Tree view of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.

+ +

Network Monitor

+ +

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

+ +

Inspect request information

+ +

Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

+ +

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.

+ +

View request timings

+ +

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.

+ +

View remote address

+ +

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

+ +

Search within requests

+ +

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

+ +

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it's requested in {{bug(1334408)}}. While response bodies can't be searched yet, the Network Monitor allows to filter by different request properties.

+ +

Storage Inspector

+ +

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

+ +

Inspect cookies

+ +

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

+ +

The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

+ +

Edit cookies

+ +

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

+ +

Delete cookies

+ +

Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see {{bug(1336934)}}).

+ +

Developer Toolbar

+ +

Display of error count

+ +

When there are JavaScript errors on a page, the Firebug Start Button shows a badge with their number. The DevTools show the number of errors in the Developer Toolbar.

+ +

Command API

+ +

Firebug offers a great variety of commands, which can be executed within its command line. The Developer Toolbar also provides an API with a lot of different commands to control the DevTools and execute different tasks.

+ +

Feedback

+ +

We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our DevTools Discourse Forum.

diff --git a/files/fr/tools/network_monitor/index.html b/files/fr/tools/network_monitor/index.html new file mode 100644 index 0000000000..9506bbdbe8 --- /dev/null +++ b/files/fr/tools/network_monitor/index.html @@ -0,0 +1,64 @@ +--- +title: Moniteur Réseau +slug: Outils/Moniteur_réseau +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +

Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de XMLHttpRequests). Le temps que prend chaque requête ainsi que ses détails seront également affichés.

+ +

Ouvrir le Moniteur Réseau

+ +

Il existe plusieurs façons d'ouvrir le Moniteur :

+ + + +

Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Lors de l'ouverture, le moniteur est vide et ressemble à ceci:

+ +

+ +

Recharger la page ou cliquer su le bouton, activera l'analyse de l'activité réseau. Une fois que l'outil est actif, il ressemblera à ceci:

+ +

Ouvrir Le Moniteur Réseau

+ +

Le moniteur enregistre les requêtes dès le moment où la boite à outils est ouverte, même si l'onglet réseau n'est pas sélectionné. Cela signifie que vous pouvez commencer le débogage d'une page dans la Console puis passer à l'onglet réseau sans avoir à recharger la page.

+ +

Vue d'ensemble de l'interface utilisateur

+ +

L'UI est divisé en quatre grandes catégories :

+ + + +

Écran_Principal_Du_Moniteur_Réseau

+ + + +

Écran analyse de performace

+ +

Utiliser le moniteur Réseau

+ +

Les articles suivants décrivent différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/performance_analysis/index.html b/files/fr/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..731bce1671 --- /dev/null +++ b/files/fr/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,43 @@ +--- +title: Analyse de performance réseau +slug: Outils/Moniteur_réseau/Performance_Analysis +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +

{{ToolsSidebar}}

+ +

Le Moniteur Réseau inclut un outil d'analyse de performances pour vous aider à comprendre combien de temps le navigateur met pour télécharger les différentes parties de votre site.

+ +

Analyse des performances

+ +

Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :

+ +

(notez que si vous venez d'ouvrir le Moniteur Réseau, sans avoir lancé d'analyse, le chronomètre sera dans la fenêtre principale)

+ +

Le Moniteur Réseau charge alors le site deux fois : une avec un cache vide et une avec une mise en cache. Il simule ainsi la première visite du site et les visites suivantes. Il affiche les résultats pour chaque test côte à côte ou verticalement, suivant la place disponible :

+ +

capture décran de performances réseau

+ +

Les résultats de chaque test sont résumés dans un tableau et un diagramme à secteurs. Le tableau rassemble les ressources par type et affiche la taille de chaque ressource ainsi que le temps total pour la charger. Le diagramme "camembert" l'accompagnant affiche la taille relative de chaque ressource.

+ +

Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.

+ +

Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce type de ressource

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/recording/index.html b/files/fr/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..1aff22be9a --- /dev/null +++ b/files/fr/tools/network_monitor/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Enregistrement des journaux réseau +slug: Outils/Moniteur_réseau/recording +translation_of: Tools/Network_Monitor/recording +--- +

{{ToolsSidebar}}

+ +

Il est possible d’interrompre et de reprendre l'enregistrement des requêtes réseau grâce au bouton pause.

+ +

Interrompre/Reprendre l'enregistrement des requêtes réseau

+ +

Le Moniteur Réseau possède un bouton pour interrompre/reprendre l'enregistrement du trafic réseau d'une page. C'est pratique par exemple, pour avoir une vue de la page stable pour un instant T pendant le débug (et ainsi éviter d'avoir quarante milles requêtes qui noient le poisson).

+ +

Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : .

+ +

Voir image :

+ +

+ +

Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/request_details/index.html b/files/fr/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..f63ae19e4c --- /dev/null +++ b/files/fr/tools/network_monitor/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: Détails des requêtes réseau +slug: Outils/Moniteur_réseau/request_details +translation_of: Tools/Network_Monitor/request_details +--- +

{{ToolsSidebar}}

+ +

Le panneau du détail des requêtes réseau apparait après la sélection d'une requête dans la liste. Ce panneau fournit des informations détaillées sur la requête.

+ +

Détails des requêtes réseau

+ +

Cliquer sur une ligne affiche un nouveau panneau sur le côté droit du moniteur réseau, qui affiche plus d'informations détaillées sur la requête :

+ +

+ +

Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :

+ + + +

Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.

+ +

En-têtes

+ +

Cet onglet liste des informations essentielles de la requête :

+ +

+ +

Cela inclut :

+ + + +

Il est possible de filtrer les en-têtes qui sont affichés :

+ +

+ +

Une icône en forme de point d'interrogation est présente à côté de chaque en-tête (sur la même ligne que le code d'état). Ce lien pointe vers la documentation des en-têtes HTTP pour en savoir plus.

+ +

Cookies

+ +

Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :

+ +

+ +

Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés. La liste complète des attibuts de cookie est affichée (voir la capture ci dessous pour un exemple).

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

L'attribut samesite est affiché depuis Firefox 62 ({{bug("1452715")}}).

+ +

Paramètres

+ +

Cet onglet affiche les paramètres de GET et les données POST de chaque requête :

+ +

+ +

Réponse

+ +

Le contenu complet de la réponse. Si la réponse est du HTML, du JS ou du CSS, elle sera affichée comme texte :

+ +

+ +

Si la réponse est du JSON, elle sera affichée comme objet inspectable :

+ +

Si la réponse est une image, l'onglet affiche un aperçu :

+ +

+ +

Cache

+ +

Si la réponse est mise en cache (c.-à-d. un 304), l'onglet cache affichera tous les détails sur la ressource mise en cache.

+ +

+ +

Parmis ces détails on trouve :

+ + + +

Pré-visualisation HTML

+ +

Depuis Firefox 59, si la réponse est du HTML, une prévisualisation du HTML rendu apparaitra dans l'onglet Réponse, au-dessus du texte de la réponse.

+ +

+ +

Délais

+ +

L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'Archive HTTP

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomDescription
Bloqué +

Temps passé dans la file d'attente de la connexion réseau

+ +

Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence  network.http.max-persistent-connections-per-server. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.

+
Résolution DNSTemps pris pour résoudre le nom d'un hôte
ConnexionTemps pris pour créer une connexion TCP
EnvoiTemps pris pour envoyer la requête HTTP au serveur
AttenteTemps d'attente du serveur
RéceptionTemps pris pour recevoir la réponse entière depuis le serveur (ou le cache)
+ +

Il présente également la chronologie de la requête de façon plus détaillée et annotée :

+ + + +

+ + + +

Sécurité

+ +

Si le site est chargé via HTTPS, l'onglet "Sécurité" apparait. Il contient les détails sur la connexion sécurisée. Cela inclut le protocole, le chiffrage, et les détails du certificat :

+ + + +

+ + + +

L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :

+ +
    +
  1. Utiliser SSLv3 au lieu de TLS
  2. +
  3. Utiliser le chiffrage RC4
  4. +
+ +

+ +

Trace de la pile

+ +

La trace de la pile est affichée dans son propre onglet, surprenamment nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.

+ + + +

diff --git a/files/fr/tools/network_monitor/request_list/index.html b/files/fr/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..7b461f7ff2 --- /dev/null +++ b/files/fr/tools/network_monitor/request_list/index.html @@ -0,0 +1,377 @@ +--- +title: Liste des requêtes réseau +slug: Outils/Moniteur_réseau/request_list +translation_of: Tools/Network_Monitor/request_list +--- +

{{ToolsSidebar}}

+ +

La Liste des requêtes réseau du Moniteur Réseau affiche une liste des requêtes faites dans la page depuis son chargement.

+ +

Liste des requêtes réseau

+ +

Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les paramètres des outils de développement.

+ +

Champs des requêtes réseau

+ +

Il est possible d'afficher/cacher les différentes colonnes avec un clic droit sur l'en-tête du tableau (la ligne des noms des colonnes). Une option "Réinitialiser les colonnes" est également disponible. Voici une liste de toutes les colonnes disponibles:

+ +

Il est également possible d'ajuster la largeur des colonnes pour faciliter la lecture. L'option "Réinitialiser les colonnes" réinitialise aussi la largeur des colonnes.

+ +

{{EmbedYouTube("5fbuDO2s9Pk")}}

+ +

Cliquer sur un en-tête de colonne trie la liste par rapport à cette colonne. "Réinitialiser les colonnes" remet le tri par défaut.

+ +

+ +

Voici une liste des colonnes disponibles:

+ + + +

La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés classera toutes les requêtes en fonction de la colonne sélectionnée.

+ +

Miniature d'image

+ +

Si le fichier est une image, survoler son nom de fichier affichera un aperçu de l'image :

+ +

+ +

Icônes sécurité

+ +

Le Moniteur réseau affiche une icône dans la colonne "Domaine" :

+ +

+ +

Cela donne une information supplémentaire concernant la sécurité de la requête :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IcôneSignification
HTTPS
HTTPS faible (un encodage faible par exemple )
HTTPS invalide (un certificat invalide par exemple)
HTTP
Localhost
Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.
+ +

Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans l'onglet Sécurité.

+ +

Colonne source

+ +

Cette colonne indique la cause de la requête. C'est généralement évident et il est possible de voir la corrélation avec la colonne "Type". Les valeurs les plus courantes sont :

+ + + +

Chronologie

+ +

La liste des requêtes affiche également une chronologie des différentes parties de chaque requête :

+ +

La chronologie de chaque requête est donnée relativement aux autres, de telle façon que vous puissiez voir le temps de chargement total. Pour plus d'informations concernant le code couleur utilisé ici, consultez la section Délais de cette page.

+ +

La chronologie contient également deux lignes verticales :

+ + + +

Filtrer les requêtes

+ +

Il est possible de filtrer le contenu des requêtes par type de contenu, par URL, par s'il s'agit de requêtes XMLHttpRequests ou WebSocket, ou par propriétés de requête.

+ +

Bloquer une URL spécifique

+ +

Pour voir comme une page s'en sort sans une ressource, il est possible de bloquer une URL spécifique depuis la liste de requêtes.

+ +

+ +
    +
  1. Survoler la requête voulue.
  2. +
  3. Sélectionner "Bloquer l'URL" dans le menu contextuel.
  4. +
  5. Lors du rechargement de la page, l'URL en question sera bloquée et un message ajouté sur la ligne pour indiquer que la ressources a été bloqué par les outils de développement.
  6. +
+ +

+ +

Pour débloquer l'URL :

+ +

+ +
    +
  1. Survoler la requête voulue.
  2. +
  3. Sélectionner "Débloquer l'URL" dans le menu contextuel
  4. +
  5. Lors du rechargement de la page, l'URL en question sera à nouveau disponible.
  6. +
+ +

Filtrer par type de contenu

+ +

Pour filtrer par type de contenu, il faut utiliser les boutons de la barre d'outils.

+ +

Filtrer les requêtes XHR

+ +

Pour ne voir que les les requêtes {{Glossary("XHR (XMLHttpRequest)", "XHR")}} , il faut utiliser le bouton "XHR" de la barre d'outils

+ +

Filtrer les WebSockets

+ +

Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la barre d'outils

+ +

Le module complémentaire WebSocket Sniffer peut également s'avérer utile.

+ +

Filtrer par URL

+ +

Pour cela, il y a une barre de recherche dans la barre d'outils. Cliquez à l'intérieur, ou faites la combinaison de touches clavier  Ctrl + F (ou Cmd + F sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".

+ +

{{EmbedYouTube("HUcWOBBhLHg")}}

+ +

Il est possible de filtrer les requêtes qui ne contiennent pas la chaine de caractères recherchée. Il faut pour cela préfixer votre recherche par l'opérateur "-". Par exemple la recherche "-google.fr" affichera toutes les requêtes qui n'ont pas "google.fr" dans leur URL.

+ +

Filtrer par propriétés

+ +

Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la barre d'outils. Cette boite reconnait les mot-clés spécifiques qui peuvent être utilisés pour filtrer les requêtes. Un mot-clé doit être suivi de deux points, puis d'une valeur de filtre valide. Les valeurs de filtres ne sont pas sensibles à la case (majuscule ou minuscule). précéder l'expression d'un moins (-) inverse le filtre. Il est possible de combiner différents filtres en les séparant par un espace.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléSignificationExemple(s)
status-codeAffiche les ressources avec un code de statut HTTP spécifique.status-code:304
methodAffiche les ressources qui ont été requises par un une méthode HTTP spécifique.method:post
domainAffiche les ressources provenant d'un domaine spécifique.domain:mozilla.org
remote-ipAffiche les ressources provenant d'un serveur à l'adress IP spécifique.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeAffiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la colonne source.cause:js
+ cause:stylesheet
+ cause:img
transferredAffiche les ressources ayant une taille de transfert spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024).transferred:1k
sizeAffiche les ressources ayant une taille (après décompression) spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)size:2m
larger-thanAffiche les ressources qui sont plus grandes que la taille spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)larger-than:2000
+ -larger-than:4k
mime-typeAffiche les ressources qui coresspondent au type MIME spécifié.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached et is:from-cache affichent uniquement les ressources venant du cache.
+ is:running affiche seulement les ressources en cours de transfert.
is:cached
+ -is:running
schemeAffiche les ressources transfére par le "scheme" spécifié.scheme:http
has-response-headerAffiche les ressources qui contienent la "response header HTTP" spécifiée.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainAffiche les ressources qui ont un header Set-Cookie avec un attribut Domain qui correspond à la valeur spécifiée.set-cookie-domain:.mozilla.org
set-cookie-nameAffiche les ressources qui ont un header Set-Cookie avec un nom qui correspond à la valeur spécifiée.set-cookie-name:_ga
set-cookie-valueAffiche les ressources qui ont un header Set-Cookie avec une valeur qui correspond à la valeur spécifiée.set-cookie-value:true
regexpAffiche les ressources dont l'URL correspond l'{{Glossary("regular expression")}} spécifiée.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Pour trouver toutes les erreurs 404, il est possible de taper "404" et la recherche complétera automatiquement par "status-code:404" :

+ +

+ + + +

Un clic droit sur une ligne de la liste affiche un menu contextuel avec les options suivantes :

+ + + +

Modifier et renvoyer

+ +

Cette option ouvre un éditeur qui vous permet de modifier les méthodes de requêtes, les URLs, les paramètres, les en-têtes et de renvoyer la requête.

+ +

Ouvrir dans un nouvel onglet

+ +

Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.

+ +

Copier en tant que commande cURL

+ +

Cette option copie la requête réseau dans le presse-papier en tant que commande cURL, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Si la méthode n'est pas GET ou POST
--datapour les paramètres de requêtes URL encodés
--data-binaryPour les paramètres de requêtes multiparties
--http/VERSIONSi la version de HTTP n'est pas 1.1
-ISi la méthode est HEAD
-H +

Un pour chaque en-tête de requête :

+ +

Si l'en-tête  "Accept-Encoding" est présent, la commande cURL inclura --compressed à la place de -H "Accept-Encoding: gzip, deflate". Cela signifie que la réponse sera automatiquement décompressée.

+
+ +

Tout copier/enregistrer en tant qu’HAR

+ +

Ces options crée une Archive HTTP (HAR) pour toutes les requêtes listées. Ce format permet d'exporter des informations détaillées sur les requêtes réseau. "Tout copier" copie le contenu dans le presse-papiers. "Tout enregistrer" ouvre une fenêtre pour sauvegarder l'archive sur un disque. Le nouveau menu 'HAR' (en haut à droite) inclut également ces options, ainsi qu'une option pour importer un HAR :

+ +

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/throttling/index.html b/files/fr/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..0e538857c9 --- /dev/null +++ b/files/fr/tools/network_monitor/throttling/index.html @@ -0,0 +1,101 @@ +--- +title: Limitation de bande passante +slug: Outils/Moniteur_réseau/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

Le moniteur réseau permet de limiter la bande passante réseau afin de simuler divers types de connexion.

+ +

Limitation de la bande passante

+ +

La barre d'outils inclut une liste déroulante pour limiter la bande passante. Cela permet d'émuler la vitesse de différents réseaux. Il suffit alors de sélectionner une option dans un menu, et elle persistera à travers les rechargements de la page.

+ + + +

+ + + +

Les caractéristiques émulées sont :

+ + + +

Le tableau ci-dessous liste les paramètres associés à chaque type de réseau. Cependant, il n'est pas recommandé de se baser sur ces données pour des mesures exactes de performance. Elles ne sont là que pour donner une idée aproximative de l'experience utilisateur dans ces conditions. Les vitesses sont exprimées en multiples de bits par seconde.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectionDownload speedUpload speedMinimum latency (ms)
GPRS50 Kpbs20 Kpbs500
Regular 2G250 Kpbs50 Kpbs300
Good 2G450 Kpbs150 Kpbs150
Regular 3G750 Kpbs250 Kpbs100
Good 3G1.5 Mbps750 Kpbs40
Regular 4G/LTE4 Mbps3 Mbps20
DSL2 Mbps1 Mbps5
Wi-Fi30 Mbps15 Mbps2
+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/toolbar/index.html b/files/fr/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..da70faa365 --- /dev/null +++ b/files/fr/tools/network_monitor/toolbar/index.html @@ -0,0 +1,61 @@ +--- +title: Barres d'outils du Moniteur Réseau +slug: Outils/Moniteur_réseau/toolbar +tags: + - '110n:priority' + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/toolbar +--- +

{{ToolsSidebar}}

+ +

Le moniteur Réseau fournit deux barres d'outils, l'une en haut de la fenêtre, l'autre en dessous.

+ +

Barre d'outils

+ +

La première barre se trouve en haut de la fenêtre principale :

+ +

première barre doutils

+ +

Cette barre fournit :

+ + + +

deuxième barre doutils

+ +

La deuxième barre d'outils se trouve en bas de la fenêtre :

+ + + +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/page_inspector/3-pane_mode/index.html b/files/fr/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..763f953ad3 --- /dev/null +++ b/files/fr/tools/page_inspector/3-pane_mode/index.html @@ -0,0 +1,65 @@ +--- +title: Mode 3 panneaux de l'Inspecteur +slug: Outils/Inspecteur/3-pane_mode +translation_of: Tools/Page_Inspector/3-pane_mode +--- +
{{ToolsSidebar}}
+ +

Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.

+ +

Résumé de la fonctionnalité

+ +

Depuis Firefox 62, l'Inspecteur possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :

+ + + +

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Note: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.

+
+ +

Avoir les règles CSS dans leur propre panneau est très utile, car cela permet non seulement d'inspecter l'HTML et d'éditer le CSS qui lui est appliqué, mais aussi d'en voir les effets sur les fonctionnalités CSS tels que les styles calculés et les grilles en temps réel. Il suffit d'avoir les panneaux concernés d'ouvert pour voir les effets.

+ +

Un guide rapide

+ +

Le mode 3 panneaux est désactivé par défaut. Pour l'activer, il suffit d'appuyer sur le bouton en haut à gauche du panneau des onglets de l'Inspecteur.

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

Avant.

+ +

The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

Après.

+ +

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

Avec le mode 6 panneaux activé, il est possible d'observer des changements des fonctionnalités CSS en temps réel lorsque les règles en question sont modifiées. Par exemple, il est possible d'éditer une propriété de grille CSS et d'observer les changements immédiats dans l'Inspecteur de grilles.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Activer le mode 3 panneaux avant Firefox 62

+ +

Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à  true :

+ +

devtools.inspector.split-rule-enabled — Cela active/Désactive le mode 3 panneaux.

+ +

devtools.inspector.split-sidebar-toggle — Active le bouton UI qui permet d'activer/désactiver le mode.

+ +

Dans Firefox 61, ces préférences ont été renommés en :

+ + + +

YIl est nécessaire de passer ces deux préférences à true dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.

+ +
+

Note: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.

+
diff --git a/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..75d7f15f39 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,37 @@ +--- +title: Edition des filtres CSS +slug: Outils/Inspecteur/Comment/Edition_filtres_css +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +
{{ToolsSidebar}}
+ +

Les propriétés filter dans la vue Règles ont une icône ronde à fond gris/blanc : 

+ +

+ +

Cliquer sur le rond ouvre l'éditeur de filtre :

+ +

+ +

L'éditeur de filtre liste chaque effet sur sa propre ligne. Il est alors possible d'ajouter, de supprimer, d'éditer les filtres et de changer l'ordre dans lesquels ils sont appliqués

+ +

Il est également possible d'ajouter de nouveaux effets grâce à la liste en bas de l'éditeur. Il suffit de cliquer sur le bouton "+" une fois l'effet voulu sélectionné dans la liste.

+ +

+ +

Une fois l'effet rajouté, il faut spécifier les paramètres voulus puis appuyer sur Entrée pour mettre a jour l'effet. Le changement sera effectif après Entrée.

+ +

Enregistrer des filtres

+ +

Il est possible d'ajouter des filtres à une liste de configuration. La liste sera persistante aux entre plusieurs sessions du navigateur, rendant ainsi l'application d'effets facile dans le futur.

+ +

Voici comment enregistrer le filtre actuel dans la liste :

+ + + +

+ +

Il est ainsi possible d'appliquer des filtres sauvegardés à de nouveaux éléments. Il suffit de cliquer sur le nom d'une des configuration dans la liste.

diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..c193dc25cd --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examiner et modifier le CSS +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS +tags: + - Guide + - Inspector + - tool +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}

Il est possible d'examiner et d'éditer le CSS via le panneau CSS.

+ +

Examiner les règles CSS

+ +

L'onglet des règles liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :

+ +

+ +

Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :

+ +

+ +

Affichage des règles

+ +

Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type propriété:valeur; :

+ +

+ + + +

Depuis Firefox 52, si un élément à une déclaration display: grid, alors une icône en forme de grille () apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir examiner les  grilles pour plus d'informations.

+ +

Pour lister les user-agent styles (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les options des outils de développement. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans l'onglet « Calculé ».

+ +

Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe (user agent) :

+ +

+ +

element {} rule

+ +

La règle élément {} en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut {{htmlattrxref("style")}}.

+ +

A partir de Firefox 52, cette règle obtient sa propre icône de cible (). Cela permet d'affiche facilement l'élément sélectionné de la page.

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Filtrer les règles

+ +

La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :

+ +

Écrire une expression dans cette boite a pour effet que :

+ + + +

Cliquer sur l'icône en forme de "X" à la fin de la boîte supprime le filtre.

+ +
+

Si l'onglet des règles est sélectionné, il est possible d'appuyer sur Ctrl / Cmd + F pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur Esc pour supprimer le filtre.

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Recherche stricte

+ +

Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant border-bottom-color et background-color en plus de color :

+ +

+ +

Si l'expression de recherche est encadrée ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :

+ +

+ +

Étendre les propriétées raccourcies

+ +

Les propriétées raccourcies peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.

+ +

Afficher les pseudo-elements

+ +

L'onglet des règles peut afficher les pseudo-éléments suivant, si ceux ci sont appliqués à l'élément sélectioné :

+ +

::after
+ ::backdrop

+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :

+ +

+ +

Cliquer sur cette icône affiche les pseudo-éléments :

+ +

+ +

Activer :hover, :active, :focus

+ +

Il y a un bouton à droite de la boite de recherche :

+ +

Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} pour l'élément sélectionné :

+ +

Cette fonctionnalité est également accessible depuis le menu popup de l'onglet HTML.

+ +

Si une de ces classes est activée pour un noeud, un point orange apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :

+ +

+ +

Lien vers le fichier CSS

+ +

En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans l'éditeur de style.

+ +

Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectionner "Copier l'adresse".

+ +

L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les options de l'éditeur de style, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la documentation de l'éditeur de style.

+ +

Déclarations surchargées

+ +

Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".

+ +

Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.

+ +

Cela permet de savoir quelle règle surcharge quelle déclaration :

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examiner le CSS calculé

+ +

Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir l'onglet « Calculé ». Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :

+ +

+ +

Il est possible d'utiliser Tab pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant F1 . Cela affiche la page MDN en référence à la propriété.

+ +

Cliquer sur la flèche à côté du nom d'une propriété (ou presser Entrée ou Espace si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :

+ +

+ +

Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».

+ +

Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.

+ +
+

Dans l'onglet des règles calculé,  il est possible d'utiliser le raccourci clavier Ctrl / Cmd + F pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec Esc.

+
+ +

Modifier les règles

+ +

Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec Tab, et de les éditer avec Entrée ou Espace. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).

+ +

Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur Tab  accepte la suggestion sélectionnée, et Flèche Haut et Flèche Bas permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :

+ +

+ +

Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.

+ +
+

Note: Depuis Firefox 60 les noms de variable CSS sont également autocomplétés (voir {{bug(1422635)}}). Taper var( dans une valeur de propriété et ensuite rentrer un tiret (-), fera apparaitre toutes les variables déclarées dans le CSS dans une liste d'autocomplétion.
+
+

+
+ +

Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.

+ +

Il est possible d'utiliser les flèches haut/bas et les touches page haut/bas pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle :

+ + + +

Les modifications apportées dans l'onglet des règles sont visibles dans l'Éditeur de Style, et vice versa.

+ +

A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :

+ +

+ +

Ajouter de nouvelles règles

+ +

Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.

+ +

+ +

Il existe également un bouton pour faire la même chose :

+ +

+ +

Copie une règle

+ +

Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :

+ + + +

+ +

Voir aussi

+ + diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..d71e356662 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,326 @@ +--- +title: Éxaminer et modifier le code HTML +slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML +tags: + - Guide + - Inspector + - Outils + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +
{{ToolsSidebar}}
+ +

Il est possible d’examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

+ + + +

Fil d'Ariane HTML

+ +

En bas du panneau HTML, se trouve un fil d'Ariane. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

+ +

+ +

Survoler un élément du fil mettra celui-ci en surbrillance dans la page.

+ +

Le fil possède ses propres raccourcis clavier.

+ +
+

Il est à noter que dans les versions antérieures à Firefox 48, le fil d'Ariane se trouvait en haut du panneau et non en bas.

+
+ +

Recherche

+ +

À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames.

+ +

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac.

+ +

Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID  qui correspondent à la recherche en cours :

+ +

+ +

Pour itérer parmi les suggestions, il faut utiliser Flèche Haut et Flèche Bas. Tab permet de choisir la suggestion sélectionnée. Entrée permet alors de sélectionner le premier noeud correspondant.

+ +

Si la recherche est faite sans utiliser de valeur d'autocomplétion, alors la recherche sera effectuée sur tout le texte du document, incluant les balises, les attributs, et le contenu textuel des noeuds.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

Pour parcourir les résultats, il faut utiliser Enter . Depuis Firefox 48, il est possible d'itérer à l'envers avec  Maj + Enter .

+ +

Arbre HTML

+ +

Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. appuyer sur la touche "Alt" développera tous les nœuds inclus dans l'élément.

+ +

The new Firefox 57 inspector HTML tree.Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

+ +

Les nœuds qui ne sont pas visibles (par exemple avec display:none) sont affichés en transparence dans l'arbre.

+ +

Depuis Firefox 53, une ellipse est affichée entre la balise ouvrante et fermante d'un élément réduit à cause d'un contenu trop long.

+ +

Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas est indiqué par une icône de points de suspension ( )

+ +
+

Note: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la liste des raccourcis clavier.

+
+ +

::before et ::after

+ +

Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} et {{cssxref("::after")}} :

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Noeuds ne contenant que des espaces

+ +
Nouveauté de Firefox 52
+ +

Les développeurs web n'écrivent (généralement) pas tout leur code en une seule ligne. Ils utilisent des espaces, des retours à la ligne, ou des tabulations dans leur HTML pour le rendre plus lisible.

+ +

Normalement, ces espaces n'ont aucun effet sur le visuel de la page. Mais en réalité, lorsqu'un navigateur analyse l'HTML, il génère automatiquement des noeuds de texte anonymes pour les éléments qui ne sont pas contenus dans des balises. Cela inclut les espaces (qui après tout, sont un type de texte).

+ +

Si ces noeuds autogénérés sont des éléments "en ligne" (inline level), alors les navigateurs leur donneront une hauteur et largeur non nulle. Des espaces étranges entre les éléments apparaitront alors, même si aucun margin ou padding n'est appliqué sur ces éléments.

+ +

Depuis Firefox 52, l'Inspecteur affiche ces noeuds d'espaces, afin de pouvoir savoir d'où viennent les espaces dans la mise en page. Ces noeuds sont représentés par un point:  et affichent une infobulle explicative au survol :

+ +

+ +

Il est possible de trouver une démonstration de ceci à l'adresse : https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+ +

Shadow roots

+ +

Tous les noeuds shadow roots présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le shadow root est représenté par un noeud nommé #shadow-root — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du shadow DOM, et le manipuler, exactement comme avec les noeuds DOM normaux. Il existe cependant des limites, il n'est par exemple pas possible de glisser/déposer ou de supprimer des noeuds shadow DOM.

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

Si un shadow DOM contient un élément avec attribut slot ayant été inspiré dans un élément {{htmlelement("slot")}} — voir Flexibilitée ajoutée par les slots pour une explication de l'utilisation de ceux-ci --- cet élément sera affiché à l'intérieur de son élément {{htmlelement("slot")}} correspondant, avec un lien à côté. Cliquer sur ce lien affichera l'élément avec l'attibut slot tel qu'il existe en dehors du shadow DOM

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <slot>

+ +
+

Note: L'inspection du Shadow DOM à été implémenté dans Firefox 61, mais est actuellement caché par la préférence dom.webcomponents.shadowdom.enabled. Elle sera activée par défaut lorsque les Web components/Shadow DOM seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.

+
+ + + +

Il est possible d’effectuer des tâches courantes sur un élément spécifique grâce au menu contextuel. Pour ouvrir celui-ci, il suffit de faire un clic droit sur l'élément :

+ +

+ +

Référence du menu contextuel

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modifier comme HTMLModifie le code HTML de l'élément.
Copier >> l’intérieur du HTMLCopie le contenu interne à l'élément HTML
Copier >> l’extérieur du HTMLCopie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant
Copier >> le sélecteur CSSCopie un sélecteur CSS qui sélectionne uniquement l'élément.
Copier >> le chemin CSSCopie un sélecteur CSS qui représente le chemin complet vers l'élément
+

Copier >> le Data-URL de l'image

+
Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.
Afficher les propriétés DOM +

Ouvre la console scindée et entre la commande "inspect($0)" pour inspecter l'élément actuellement sélectionné.

+
Utiliser dans la console +
+

Nouveau dans Firefox 43

+
+ +

Assigne le noeud actuellement sélectionné dans une variable nommée temp0 (ou temp1 si temp0 est déjà utilisée, etc.), puis ouvre la console scindée, vous permettant d'interagir avec ce noeud depuis la ligne de commande.

+
Tout étendre +
+

Nouveau dans Firefox 44

+
+ Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche Alt  et le bouton pour étendre un élément (le triangle en début de ligne)
Réduire +
+

Nouveau dans Firefox 44

+
+ Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.
Coller >> à l’intérieur du HTML +

Colle le contenu du presse-papier dans le nœud en tant qu'innerHTML.

+
Coller >> à l’extérieur du HTMLColle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller >> AvantColle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller >> AprèsColle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller >> Comme premier nœud enfantColle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.
Coller >> Comme dernier nœud enfantColle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.
Faire défiler la vue jusqu'au noeud +

Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.

+ +

À partir de Firefox 44, il est possible d'utiliser le raccourci clavier S fera la même action.

+
Prendre une capture du noeudPrend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir Prendre des captures.
Créer un nouveau noeudCrée une balise <div> en dernier enfant de l'élément sélectionné. Voir Insérer des nouveaux noeuds.
Dupliquer le noeud +
+

Nouveau dans Firefox 44

+
+ Crée une copie de l'élément sélectionné, et l'insère immédiatement après.
Supprimer le nœudSupprime l'élément
Attributs >> Ajouter un attribut +
+

Nouveau dans Firefox 44

+
+ Ajoute un attribut à l'élément.
Attributs >> Modifier l'attribut +
+

Nouveau dans Firefox 44

+
+ (seulement quand un attribut est sélectionné) Modifie l'attribut.
Attributs >> Supprimer l'attribut +
+

Nouveau dans Firefox 44

+
+ (seulement quand un attribut est sélectionné) Supprime l'attribut.
Attributs >> Copier la valeur de l'attributCopie la valeur de l'attribut
Ouvrir le lien dans un nouvel onglet(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.
Ouvrir dans le Débogueur(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.
Ouvrir fichier dans l'éditeur de style(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.
Copier l'adresse du lien(seulement quand une URL est sélectionnée) Copie l'URL
:hoverDéfinit la pseudo classe CSS :hover
:activeDéfinit la pseudo classe CSS :active
:focusDéfinit la pseudo classe CSS :focus
+ +

Éditer le code HTML

+ +

Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.

+ +

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :

+ +

Edit HTML directly in the Inspector panel in Firefox 57N'importe quel fragment HTML peut être ajouté ici. Il est par exemple possible de changer les balises de l’élément, d'ajouter de nouvelles balises, de modifier des éléments existants, etc. Les modifications sont effectives dès que vous cliquez en-dehors de la boite

+ +

À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :

+ +

+ +

Copier coller

+ +

Il est possible d'utiliser le menu popup pour copier des noeuds dans l'arbre HTML.

+ +

Glisser déposer

+ +

Il est possible de modifier l'HTML en déplaçant les noeuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche Esc.

+ +

Insérer de nouveaux noeuds

+ +
Nouveau dans Firefox 48
+ +

À partir de Firefox 48, il y a une icône "+" en haut du panneau :

+ +

 

+ +

+ +

 

+ +

Cliquer sur cette icône insère une balise <div> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du noeud, exactement comme n'importe quel autre élément.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.

+ +

Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, ( <style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.

diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..1c890f872b --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner et modifier le modèle de boîte +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boîte +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +
{{ToolsSidebar}}

Examiner le modèle de boîte

+ +

En ayant le bouton de Sélection d'éléments activé, survoler un élément de la page aura pour effet d'afficher son modèle de boite en surbrillance :

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

Survoler le noeud d'un élément dans le panneau HTML l'affichera également :

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

La vue "modèle de boite"

+ +

Lorsqu'un élément est sélectionné, il est possible d'avoir un aperçu détaillé du modèle de boite dans la vue modèle de boite :

+ +

+ +

Survoler une valeur affichera une infobulle indiquant d'où la valeur est issue :

+ +

+ +

Survoler une partie du modèle de boite dans cette vue affiche la partie correspondante de l'élément dans la page :

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Éditer le modèle de boites

+ +

Il est également possible d'éditer les valeurs dans la vue modèle de boite et les changements dans la page sont affiché immédiatement :

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..192e82ef37 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner les écouteurs d'évènements +slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}
+ +

L'inspecteur affiche dans le panneau HTML le mot "event" à côté des éléments qui ont un écouteur lié :

+ +

 

+ +

+ +

 

+ +

Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :

+ +

Chaque ligne contient :

+ + diff --git a/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..b653021231 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,125 @@ +--- +title: "Inspecteur de grille CSS\_: examiner les grilles" +slug: Outils/Inspecteur/Comment/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +

L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox

+ +
+

Note: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de Futurismo (Jen Simmons), des expériences "Variations on a grid", et de "live named grid area example" (Rachel Andrew).

+
+ +

Découvrir les grilles CSS

+ +

Lorsqu'un élément HTML d'une page possède l'attribut display: grid, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.

+ +

Dans le panneau HTML

+ +

Le panneau HTML, montrant un marqueur de grille

+ +

Dans le panneau CSS

+ +

Dans l'onglet règles du panneau CSS, toutes les instances d'une déclaration display: grid possèdent une icône de grille () :

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "tracks" de la grille CSS :

+ +

Une superposition en couleur de la grille CSS

+ +

La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.

+ +

La section "grilles" de l'onglet mise en page

+ +

Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.

+ +
+

Note: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.

+
+ +

Options de grilles

+ +

La section grille de l'onglet mise en page ressemble à ceci :Les options des grilles CSS

+ +

Ces options sont :

+ + + +
+

Note: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).

+
+ +

Grille de superposition

+ +

Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :

+ +

Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus

+ +

Chaque entrée est composée de (de gauche à droite) :

+ + + +

Afficher le numéro des lignes

+ +

Par défaut le numéro des lignes est affiché dans la superposition :

+ +

Une superposition de grille CSS avec les numéros de lignes affichés

+ +

Décocher la case "Afficher les numéros des lignes" les désactivent :

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

Afficher le nom des zones

+ +

Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :

+ +

A CSS grid overlay with named area names displayed

+ +

Décocher la case désactive cet affichage :

+ +

A CSS grid overlay with named area names not displayed

+ +

Prolonger les lignes à l'infini

+ +

Par défaut les lignes/tracks ne sont affichées que dans l'élément sur laquelle la grille est appliquée :

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

Mini vue de la grille

+ +

Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.

+ +

A mini CSS grid view from the Firefox DevTools

+ +

Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.

+ +

A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

+ +

À voir également

+ + diff --git a/files/fr/tools/page_inspector/how_to/index.html b/files/fr/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..3d3e1418dc --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/index.html @@ -0,0 +1,10 @@ +--- +title: Comment faire… +slug: Outils/Inspecteur/Comment +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}
+ +

Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.

+ +

{{ ListSubpages () }}

diff --git a/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..93e353dff0 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,22 @@ +--- +title: Inspecter et sélectionner des couleurs +slug: Outils/Inspecteur/Comment/Inspecter_et_sélectionner_des_couleurs +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +
{{ToolsSidebar}}

Dans l'onglet "Règles" du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à côté de la valeur :

+ +

+ +

Cliquer sur cet aperçu ouvre un sélecteur de couleur, permettant de changer la couleur :

+ +

+ +

Le sélecteur de couleur inclut une icône en forme de pipette. Cliquer sur cette icône permet de sélectionner une nouvelle couleur depuis la page :

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

À partir de Firefox 40, cliquer sur l'aperçu tout en maintenant la touche Maj enfoncée change le format de couleur :

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Depuis sa version 53, Firefox supporte les valeurs de couleurs CSS "level 4".

diff --git a/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..6e8f25c1b1 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,35 @@ +--- +title: Ouvrir l'inspecteur +slug: Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur +tags: + - Guide + - Inspecteur + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}
+ +

Il y a deux façons principales d’ouvrir l'inspecteur :

+ + + +

L'inspecteur s’ouvrira alors dans votre navigateur :

+ +

The all-new Inspector in Firefox 57 DevTools.

+ +

Il est également possible de le faire apparaitre à gauche :

+ +

+ +

Ou à droite :

+ +

+ +

Ou dans une fenêtre séparée :

+ +

+ +

La visite guidée de l'interface utilisateur peut vous aider à vous repérer dans l'inspecteur.

diff --git a/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..1d640ebf74 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: Repositionner des éléments dans la page +slug: Outils/Inspecteur/Comment/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
{{ToolsSidebar}}
Nouveau dans Firefox 48
+ +

A partir de Firefox 48; il est possible de déplacer les élément positionnés en absolu en les glissant dans la page.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Si un élément a sa propriété {{cssxref("position")}} mise à absolute, relative ou fixed et une ou plus des propriétés {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, alors la vue "Modèle de boîte" affiche un bouton :

+ +

+ +

Cliquer sur ce bouton fera apparaitre deux poignées à coté de l'élément :

+ +

Example for changing the position of an element within the content

+ +

Il est alors possible d'utiliser ces poignées pour déplacer l’élément dans la page.

+ +

Si l’élément est positionné en absolu, des lignes pointillées apparaissent pour représenter le décalage par rapport au parent. Pour les éléments positionnés en relatif, elles représentent la position d'origine du nœud. les distances sont affichés par des infobulles pour chaque coté.

diff --git a/files/fr/tools/page_inspector/how_to/select_an_element/index.html b/files/fr/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..084b33f3be --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: Sélectionner un élément +slug: Outils/Inspecteur/Comment/Sélectionner_un_élément +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +
{{ToolsSidebar}}

L'élément sélectionné est l'élément de la page sélectionné dans l'Inspecteur. Il est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

+ +

L'élément en surbrillance est l'élément de la page sur lequel est superposé une image affichant son modèle de boite, ainsi qu'une une infobulle avec son type et sa taille :

+ +

+ +

Avec le menu contextuel

+ +

Pour ouvrir l'Inspecteur et sélectionner immédiatement un élément, il suffit d'ouvrir le menu contextuel sur cet élément (clic droit) puis de sélectionner "Inspecter l'élément" :

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Avec le panneau HTML

+ +

Lorsque l'inspecteur est ouvert, l'élément survolé par la souris est mis en évidence dans la page. Cliquer sur cet élément le sélectionnera :

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre HTML.

+ +

Avec le sélectionneur de noeuds

+ +

Pour sélectionner un élément dans la page, il est possible d'activer le sélectionneur en cliquant sur son icône ( ) en haut à gauche. Dès lors, chaque élément survolé par la souris sera mis en évidence et cliquer sur un élément le sélectionnera :

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

Depuis Firefox 52, utiliser la touche Maj  lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)

diff --git a/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..b04d2d6e1f --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html @@ -0,0 +1,30 @@ +--- +title: Sélectionner et mettre en surbrillance +slug: Outils/Inspecteur/Comment/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +
{{ToolsSidebar}}

L'élément sélectionné est élément de la page ciblé par l'Inspecteur. Cet élément est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

+ +

L'élément en surbrillance est l'élément dans la page en surbrillance avec son modèle de boit d'affiché, ainsi qu'une infobulle avec son tag et sa taille :

+ +

+ +

Via le menu contextuel

+ +

Pour ouvrir l'Inspecteur et sélectionner un élément immédiatement, il suffit d'activer le menu contextuel de n'importe quel élément de la page et de sélectionner "Inspecter l'élément" :

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Via le panneau HTML

+ +

Lorsque l'Inspecteur est ouvert, survoler un élément listé dans le panneau HTML affichera en surbrillance l'élément correspondant dans la page. Cliquer sur un élément dans le panneau HTML le sélectionne :

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre DOM.

+ +

Via le sélectionneur de noeuds

+ +

Pour sélectionner un élément de la page, il faut activer l'outil en cliquant sur son icône : . Ensuite, survoler un élément de la page l'affichera en surbrillance. Cliquer sur un élément le sélectionne :

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html new file mode 100644 index 0000000000..a870167e19 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html @@ -0,0 +1,46 @@ +--- +title: Utiliser l'API de l'Inspecteur +slug: Outils/Inspecteur/Comment/Utiliser_l_API_de_l_Inspecteur +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +
{{ToolsSidebar}}
+ +

Les modules complémentaires de Firefox peuvent accéder aux objets du contexte chrome://browser/content/devtools/inspector/inspector.xul suivants :

+ +

window.inspector

+ +

Défini dans inspector-panel.js. Attributs et fonctions :

+ + + +

Événements Bindables :

+ +

markuploaded

+ +

Appelé quand le panneau de gauche a été rafraichi après un changement de panneau

+ +

ready

+ +

Appelé au premier markuploaded.

+ +

pseudoclass

+ +

Appelé après affichage ("toggle") d'une pseudo classe

+ +

layout-change

+ +

"low-priority change event for things like paint and resize." (évènements de changement basse priorité pour les choses comme paint et resize).

diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html new file mode 100644 index 0000000000..1b3f3c13b2 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html @@ -0,0 +1,16 @@ +--- +title: Utiliser l'Inspecteur depuis la Console Web +slug: Outils/Inspecteur/Comment/Utiliser_l_Inspecteur_depuis_la_Console_Web +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +
{{ToolsSidebar}}
+ +

L'élément qui est sélectionné dans l'Inspecteur peut être référencé dans la Console Web en utilisant la variable $0 :

+ +

Les éléments DOM dans la Console Web ont une icône en forme de cible à côté d'eux. Survoler cette icône met l'élément en surbrillance. Cliquer sur cette icône sélectionne l'élément dans l'Inspecteur :

+ +

diff --git a/files/fr/tools/page_inspector/how_to/view_background_images/index.html b/files/fr/tools/page_inspector/how_to/view_background_images/index.html new file mode 100644 index 0000000000..9d6bdb09e4 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/view_background_images/index.html @@ -0,0 +1,12 @@ +--- +title: Prévisualiser des images de fond +slug: Outils/Inspecteur/Comment/Prévisualiser_des_images_de_fond +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +
{{ToolsSidebar}}

Dans l'onglet des règles, il est possible de prévisualiser les images spécifiées avec la propriété background-image. Il suffit de survoler cette règle :

+ +

+ +

Depuis Firefox 41, lors d'un clic-droit sur la déclaration de l'image, il y a une option pour copier l'image en tant que data URL :

+ +

diff --git a/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..a00bd795b5 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,14 @@ +--- +title: Visualiser les transformations +slug: Outils/Inspecteur/Comment/Visualiser_les_transformations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +
{{ToolsSidebar}}
+ +

Visualiser les transformations

+ +

Survoler une propriété transform dans l'onglet des règles, fera apparaitre la transformation dans la page :

diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a5c09e4f45 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,26 @@ +--- +title: Inspecteur d'animations (Firefox 41 et 42) +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +
{{ToolsSidebar}}
+ +
+

Il est à noter que l'interface utilisateur de l'inspecteur d'animations a été refaite dans Firefox 43. Pour voir à quoi ressemble cette nouvelle interface, consultez la page : "Travailler avec des animations".

+
+ +

L’inspecteur d'animations permet de :

+ + + +

{{EmbedYouTube("0vSIuKaqD8o")}}

diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..6d6ea21654 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html @@ -0,0 +1,84 @@ +--- +title: Exemples d'animations +slug: Outils/Inspecteur/Comment/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +
{{ToolsSidebar}}

firefox-logo-animation

+ +

Exemples d'animations utilisant les transitions CSS.

+ +

Contenu HTML

+ +
<div class="channel">
+  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
+  <span class="note">Firefox Developer Edition</span>
+</div>
+ +

Contenu CSS

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+  transition: transform 750ms ease-in, filter 750ms ease-in-out;
+}
+
+.note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+
+  opacity: 0;
+  width: 0;
+  transition: opacity 500ms 150ms, width 500ms 150ms;
+}
+
+.icon#selected {
+  filter: grayscale(0%);
+  transform: scale(1.5);
+}
+
+.icon#selected+span {
+  opacity: 1;
+  width: 300px;
+}
+
+ +

Contenu JavaScript

+ +
function toggleSelection(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.classList.contains("icon")) {
+    var wasSelected = (e.target.getAttribute("id") == "selected");
+    clearSelection();
+    if (!wasSelected) {
+      e.target.setAttribute("id", "selected");
+    }
+  }
+}
+
+function clearSelection() {
+  var selected = document.getElementById("selected");
+  if (selected) {
+    selected.removeAttribute("id");
+  }
+}
+
+document.addEventListener("click", toggleSelection);
diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..929963fa4a --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,107 @@ +--- +title: 'Exemple d''inspecteur d''animations : Web Animations API' +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +
{{ToolsSidebar}}

logo-animation-Firefox

+ +

Exemple d'animation utilisant la Web Animations API.

+ +

Contenu HTML

+ +
<div class="channel">
+   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
+   <span id="note">Firefox Developer Edition</span>
+</div>
+ +

Contenu CSS

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+#icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+}
+
+#note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  opacity: 0;
+  width: 0;
+}
+
+ +

Contenu JavaScript

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)', filter: 'grayscale(100%)'},
+  { filter:  'grayscale(100%)', offset: 0.333},
+  { transform: 'scale(1.5)', offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
+];
+
+var noteKeyframeSet = [
+  { opacity: '0', width: '0'},
+  { opacity: '1', width: '300px'}
+];
+
+var iconKeyframeOptions = {
+  duration: 750,
+  fill: 'forwards',
+  easing: 'ease-in',
+  endDelay: 100
+}
+
+var noteKeyframeOptions = {
+  duration: 500,
+  fill: 'forwards',
+  easing: 'ease-out',
+  delay: 150
+}
+
+var icon = document.getElementById("icon");
+var note = document.getElementById("note");
+
+var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions);
+var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions);
+
+iconAnimation.pause();
+noteAnimation.pause();
+
+var firstTime = true;
+
+function animateChannel(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.id != "icon") {
+    return;
+  }
+  if (firstTime) {
+    iconAnimation.play();
+    noteAnimation.play();
+    firstTime = false;
+  } else {
+    iconAnimation.reverse();
+    noteAnimation.reverse();
+  }
+}
+
+document.addEventListener("click", animateChannel);
+
diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..0bbcab5957 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: travailler avec les animations +slug: Outils/Inspecteur/Comment/Work_with_animations +tags: + - Guide + - Inspecteur + - Outils +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}
+ +

Cet article couvre trois outils que vous pouvez utilisez pour visualiser et éditer des animations:

+ + + +

Animation inspector

+ +

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

Let's use the animation inspector to see what's going on in this example.

+ +
    +
  1. Right-click in the box and select "Inspect Element"
  2. +
  3. Make sure the selected element is the <div class="channel">
  4. +
  5. Switch over to the "Animations" tab
  6. +
  7. Play the animation
  8. +
+ +

{{EmbedYouTube("XmKeAKryE5I")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

The bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ + + +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

To the left of the selector is a "target" icon (). Clicking this icon locks the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ + + +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.

+ +

Further information about animation compositing

+ +

If you open animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ + + +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that:

+ + + +

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/fr/tools/page_inspector/index.html b/files/fr/tools/page_inspector/index.html new file mode 100644 index 0000000000..ff14d6634c --- /dev/null +++ b/files/fr/tools/page_inspector/index.html @@ -0,0 +1,61 @@ +--- +title: Inspecteur +slug: Outils/Inspecteur +tags: + - CSS + - DOM + - Développement Web + - HTML + - Outils + - Styles +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}
+ +

L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.

+ +

Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page débogage distant pour apprendre comment connecter les outils de développement à une cible distante.

+ +
+

Visite guidée de l'interface utilisateur

+ +

Pour vous repérer dans l’inspecteur, voici une courte visite guidée de l'interface utilisateur.

+ +

Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

+ +
+

Comment ?

+ +

Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :

+ +
+ +
+ +
+

Référence

+ +
+ +
diff --git a/files/fr/tools/page_inspector/keyboard_shortcuts/index.html b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d69433edb7 --- /dev/null +++ b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: Raccourcis Clavier +slug: Outils/inspecteur/Raccourcis_clavier +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +
{{ToolsSidebar}}

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Raccourcis clavier

+ +

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

diff --git a/files/fr/tools/page_inspector/ui_tour/index.html b/files/fr/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..b0f9e07205 --- /dev/null +++ b/files/fr/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,94 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Inspecteur/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :

+ + + +

The all-new Inspector panel in Firefox 57.Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.

+ +

Le bouton de sélection d'éléments

+ +

L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons de sélectionner un élément pour l'inspecter :

+ +

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+ +

Notez qu'il fait partie de la barre d'outils de la boîte à outils, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.

+ +

Pour savoir comment sélectionner un élément, voir le guide pour sélectionner un élément.

+ +

Le panneau HTML

+ +

L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:

+ +

These are the tasty new HTML and CSS panes in Firefox 57.

+ +

Pour en savoir plus sur la structure du panneau HTML, voir la page "Examiner et éditer le code HTML".

+ +

Le panneau CSS

+ +

La partie droite est occupée par le panneau CSS :

+ +

The rules view within the Inspector.Ce panneau CSS est composé de 5 vues :

+ + + +

Utilisez ces onglets pour passer d'une vue à une autre.

+ +
+

Note : Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

+
+ +

La vue "Règles"

+ +

Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.

+ +

Voir "Examiner et éditer le CSS" pour plus de détails.

+ +

La vue "Calculé"

+ +

Cette vue liste toutes les règles CSS calculées pour l'élément sélectionné, ainsi qu'une représentation visuelle éditable du modèle de boite.

+ +

The Computed view within the Inspector.

+ +

 

+ +

Pour en savoir plus sur le modèle de boite, voir "Examiner et éditer le modèle de boite". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.

+ +

Pour plus de détails sur les déclarations CSS de cette vue, voir "Examiner le CSS calculé".

+ +

La vue "Polices"

+ +

Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.

+ +

 

+ +

The all-new Inspector panel in Firefox 57.

+ +

Voir "Voir les polices" pour plus de détails.

+ +

La vue "Animations"

+ +

Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.

+ +

 

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

 

+ +

Voir "Travailler avec les animations" pour plus de détails.

diff --git a/files/fr/tools/paint_flashing_tool/index.html b/files/fr/tools/paint_flashing_tool/index.html new file mode 100644 index 0000000000..408372ebed --- /dev/null +++ b/files/fr/tools/paint_flashing_tool/index.html @@ -0,0 +1,86 @@ +--- +title: Outil de mise en surbrillance des zones repeintes +slug: Outils/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +
{{ToolsSidebar}}
+ +

L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.

+ +

Les Repaints et la réactivité

+ +

Lorsque le navigateur affiche une page web, il parse l'HTML et le CSS, détermine comment l'organiser et ensuite le peint pour pouvoir afficher du contenu sur l'écran. Lorsqu'un évènement qui peut changer une partie visible de la page se produit, le navigateur doit alors repeindre une partie de la page. Par exemple, un repaint sera nécessaire si l'utilisateur scrolle la page ou, place son curseur sur un élément disposant de la pseudo classe :hover qui change le style de l'élément.

+ +

Repeindre peut être une opération couteuse, le navigateur essaie donc de minimiser la partie à repeindre au maximum. Le navigateur essaie de trouver quelles parties de l'écran sont "endommagées" et ne repeint que celles-ci. Le navigateur sépare également le modèle de la page en couches qui vont à son avis être mises à jour indépendamment les unes des autres. Ainsi, le changement d'une couche n'oblige pas un repaint sur une autre couche, et lorsque le changement n'affecte qu'une relation entre deux couches (une animation par exemple) aucun repaint n'est nécessaire.

+ +

Les choix faits par un développeur web peuvent gêner le navigateur, lui imposant de faire plus de repaints et sur de plus grandes surfaces que nécessaire. Cela peut causer des pertes de réactivité dans les saisies utilisateur (aussi connu sous le nom de "janky"). C'est dans ces moments-là que l'outil de mise en surbrillance des zones repeintes s'avère utile : En montrant les zones que le navigateur repeint en réponse à un évènement, il est possible de voir s’il repeint plus que de raison.

+ +

Utiliser l'outil de mise en surbrillance des zones repeintes

+ +

Ouvrir la Boite à outils, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :

+ +

+ +

Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :

+ +

Dans cet exemple il y a deux sources de repaints principales :

+ + + +

Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils.

+ +

Exemple : transitions CSS

+ +

Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les transitions CSS. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la margin-left de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété transform.

+ +
<body>
+    <div id="container">
+      <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div>
+      <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div>
+    </div>
+</body>
+
+
+ +
#container {
+  border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}
+ +

Pour voir la transition, placez la souris dans l'espace ce dessous :

+ +

{{ EmbedLiveSample('Exemple_transitions_CSS', 600, 300) }}

+ +

Maintenant, activez l'outil puis essayez à nouveau. Il apparait alors que la version "margin-left" cause une série de repaints tout au long du déplacement de l'élément, alors que la version "transform" ne cause qu'un repaint au début et à la fin.

+ +

Pourquoi ? Parce que lors de l'utilisation de transform, le navigateur crée une couche séparée pour l'élément. Ainsi lorsque celui est déplacé, la seule chose qui est changée c'est la relation entre les deux couches, ce qui est géré lors de la composition. Ainsi, aucune des deux couches n'a besoin de repaint.

+ +

Dans ce cas, avec un style très simple, les différences de performance ne se font pas réellement ressentir. Cependant, si le style était couteux en performance, la différence pourrait être importante. Il est difficile de savoir quelles optimisations le navigateur fait pour économiser des repaints, et celles-ci peuvent changer d'une version à une autre. Ainsi tester votre site avec cet outil permet de s'assurer qu'il fonctionne toujours de façon optimale.

diff --git a/files/fr/tools/performance/allocations/index.html b/files/fr/tools/performance/allocations/index.html new file mode 100644 index 0000000000..21cdf3b008 --- /dev/null +++ b/files/fr/tools/performance/allocations/index.html @@ -0,0 +1,86 @@ +--- +title: Allocations +slug: Outils/Performance/Allocations +translation_of: Tools/Performance/Allocations +--- +
{{ToolsSidebar}}
+

La vue Allocations de l'outil Performance affiche quelles fonctions dans une page web allouent le plus de mémoire durant le profil.

+ +

C'est important pour la performance, car allouer beaucoup de mémoire ou faire beaucoup d'allocations peut activer le ramasse-miette (garabage collector). Celui-ci peut affecter la réactivité de la page.

+
+ +
+

La vue Allocations est une des nouveautés de Firefox 46.

+
+ +

Pour activer la vue Allocations, il faut activer l'option "Enregistrer les Allocations" dans les options de l'outil Performance, avant d'enregister un profil. Il faut ensuite enregistrer un profil, un nouvel onglet nommé "Allocations" apparaitra alors dans la barre d'outils :

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Anatomie de la vue allocations

+ +

La vue allocations ressemble à ceci :

+ +

+ +

Cette vue fait périodiquement des échantillons des allocations qui sont faites durant l'enregistrement. Chaque ligne représente une fonction pour laquelle au moins un échantillon d'allocation a été pris durant l'enregistrement.

+ +

La vue inclut les colonnes suivantes :

+ + + +

Les lignes sont triées par la colonne "Self Bytes".

+ +

Anisi dans l'exemple ci-dessus :

+ + + +

À côté de chaque nom de fonction, se trouve une flèche de développement. Cliquer sur celle-ci affichera l'endroit d'où la fonction a été appelée :

+ +

+ +

Ici, il est possible de voir que signalLater() a été appelée depuis deux endroits : removeInner() et setSelectionInner(). Il est ainsi possible de remonter l'arbre d'appel et de mieux comprendre le contexte de ces allocations.

+ +

Self Cost et Total Cost

+ + + +

Les colonnes de coût sont séparées en "Self" et en "Total". La colonne "Self" correspond aux échantillons pris seulement dans cette fonction. La colonne "Total" correspond aux échantillons pris dans cette fonction ou dans les fonctions appelées par cette fonction. Au premier niveau, ces deux colones sont les mêmes, vu que la vue représente les dernières fonctions (il s'agit d'une vue inversée de l'arbre d'appel). Mais, si l'on remonte l'arbre en développant les lignes, alors la différence devient visible.

+ +

+ +

Ici, 8904 échantillons ont été pris dans signalLater(). Mais signalLater() a été appelé depuis deux endroits : removeInner() et setSelectionInner(). Mais ces deux fonctions ont 0 en Self Count, ce qui veut dire qu'aucune allocation n'a été faite depuis ces fonctions. Cependant removeInner() a 8901 en Total Count, tandis que setSelectionInner() a seulement 3 en Total Count. Cela révèle que sur les 8904 allocations faites dans signalLater(), toutes sauf trois proviennent de la branche removeInner().

+ +

Allocations et garbage collection

+ +

Bien sûr, en savoir plus sur l'utilisation mémoire d'un site est très utile. Cependant la connexion principale entre la réactivité d'un site et le profil d'allocation réside dans le coût de la garbage collection (GC) (ramasse-miette).

+ +

Dans un langage à ramasse miette comme JavaScript, le runtime a périodiquement besoin de parcourir la heap à la recherche d'objets qui ne sont plus accessibles, pour libérer l'espace mémoire qu'ils occupent. Lors du passage du ramasse-miette, le moteur JavaScript doit être mis en pause, le programme est donc suspendu et ne répondra pas.

+ +

Pour réduire l'impact de ce phénomène sur la réactivité des sites, SpiderMonkey (le moteur JavaScript de Firefox) possède un ramasse-miette incrémental. Celui-ci procède par petites étapes, lassant le programme tourner entre chaque incrémentation. Quelques fois cependant le moteur a besoin de réaliser un passage complet non incrémental et le programme doit alors attendre la fin du nettoyage.

+ +

Les passages du ramasse-miette sont affichés en rouge dans la vue Chronologie, et sont des véritables points noirs pour la réactivité, ils peuvent en effet prendre jusqu'a des centaines de millisecondes :

+ +

+ +

Que faire en cas de passage intempestif du ramasse-miette ? SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand et quel type de passage de ramasse-miette est nécessaire.

+ +

En général, cependant : "l'allocation pressure" - allouer beaucoup de mémoire ou allouer de la mémoire a haute fréquence - tend a augmenter la probabilité de SpiderMonkey à ordonner le passage du ramasse-miette, et tend également a faire plus de passages non incrémentaux.

+ +

Si un passage du ramasse-miette a été causé par de "l'allocation pressure", alors le panneau droit du marqueur dans la vue Chronologie contient un lien nommé "Show allocation triggers". Cliquer sur celui-ci passe la vue en vue allocations et sélectionne la période de temps entre la fin du dernier passage du ramasse-miette et le début de celui qui a été cliqué. Cela révèle toute les allocations qui ont amené à déclencher ce passage du ramasse-miette :

+ +

{{EmbedYouTube("tO5ovD9Jw4k")}}

+ +

Si vous rencontrez ces problèmes, il est conseillé d'essayer de réduire la taille de vos allocations. Par exemple :

+ + diff --git a/files/fr/tools/performance/call_tree/index.html b/files/fr/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..e8a3447894 --- /dev/null +++ b/files/fr/tools/performance/call_tree/index.html @@ -0,0 +1,122 @@ +--- +title: Arbre d'appels +slug: Outils/Performance/Call_Tree +translation_of: Tools/Performance/Call_Tree +--- +
{{ToolsSidebar}}
+ +
+

L'arbre d'appel permet de savoir dans quelles fonctions JavaScript le navigateur passe le plus de temps. En analysant ces résultats, il est possible de trouver les points noirs du code (les endroits ou le navigateur passe beaucoup trop de temps).

+ +

Ces points noirs sont les endroits où les optimisations auront le plus grand impact.

+
+ +

L'arbre d'appel est un profileur par échantillons. Il prend périodiquement des échantillons de l'état du moteur JavaScript, et enregistre la pile pour le code s'exécutant dans ce moment. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.

+ +
+

Cet article utilisera le résultat d'un programme simple comme exemple. Si vous voulez récupérer ce programme pour expérimenter l'outil vous-même, il est disponible ici. Vous pouvez trouver le profil discuté dans cet article ici - importez juste le profil dans l'outil Performance pour pouvoir voir le profil utilisé dans cet article.

+ +

Il y a une courte page décrivant la structure du programme disponible ici.

+ +

Il est à noter que le même programme et le même profil est utilisé pour la page de documentation sur le Flame Chart.

+
+ +

La capture d'écran ci-dessous montre les résultats d'un programme qui compare trois différents algorithmes de tri (tri à bulle, tri par sélection et tri rapide). Pour faire cela, il génère un nombre de tableaux remplis avec des int aléatoires et les tris avec chaque algorithme.

+ +

Nous avons zoomé dans une partie de l'enregistrement qui montre un long marker JavaScript :

+ +

+ +

L'arbre d'appel présente les résultats dans un tableau. Chaque ligne représente une fonction dans laquelle au moins un échantillon a été pris, et les lignes sont classées par nombre d'échantillons pris dans la fonction.

+ +

Échantillons correspond au nombre d'échantillons pris lors de de l'exécution de la fonction. Cela inclu ses enfants (les autres fonctions appelées par cette fonction).

+ +

Durée Totale correspond est ce nombre, traduit en millisecondes, basées sur le temps total couvert par la portion sélectionnée de l'enregistrement. Ces deux nombres devraient être approximativement les même.

+ +

Cout Total correspond à ce nombre traduit en pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

+ +

Coût individuel correspond au temps passé dans cette fonction en particulier, sans inclure ses enfants. Cela vient de la pille capturé lorsque cette fonction est la plus basse.

+ +

Durée individuelle est calculé depuis Coût individuel comme un pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

+ +

Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un Cout individuel important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.

+ +

Cette capture d'écran révèle ce que l'on savait déjà : bubbleSort() est un algorithme très inefficace. Il y a à peu près 6 fois plus d'échantillons dans bubbleSort() que de dans selectionSort(), et 13 fois plus dans que dans quickSort().

+ +

Se déplacer dans l'arbre d'appel

+ +

A coté de chaque nom de fonction, se trouve une flèche d'expansion : cliquer sur celle-ci révèle le chemin allant de l'appel de la fonction jusqu'a la racine. Par exemple, il est possible d'étendre l'entrée pour bubbleSort() :

+ +

+ +

On peut donc voir que le graphique d'appel est comme ceci :

+ +
sortAll()
+
+    -> sort()
+
+        -> bubbleSort()
+ +

Notez également que le Cout individuel pour sort() est ici de 1.45%, et notez également que ce chiffre est le même pour une autre ligne de sort() plus tard dans la liste. Cela révèle que quelques échantillons ont été pris dans sort() elle-même plutôt que dans la fonction qu'elle appelle.

+ +

Quelques fois, il y a plus d'un chemin menant à la même fonction. Essayons par exemple d'étendre la ligne de swap():

+ +

+ +

Il y a 253 échantillons qui ont été pris à l'intérieur de swap(). Mais swap() a été accédé par deux chemins différents car bubbleSort() et selectionSort() l'utilisent tous deux. Il est également possible de voir que 252 des 253 échantillons ont été pris dans la branche bubbleSort(), et uniquement un dans la branche selectionSort().

+ +

Cela signifie que le tri à bulle est encore moins efficient que ce que l'on pensait ! La fonction coute 252 échantillons de plus, soit 10% de cout supplémentaire.

+ +

Avec ce genre de recherche, il est possible de déduire le graphique d'appel complet, avec le nombre d'échantillons associés :

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

Données de la plateforme

+ +

Vous pouvez également remarquer des lignes nommées Gecko, Input & Events, et ainsi de suite. Cela représente les appels internes au navigateur.

+ +

Cela peut être utile comme informations. Par exemple si votre site donne beaucoup de travail au navigateur. Ces échantillons ne sont peut-être pas pris dans votre code, mais c'est quand même votre problème.

+ +

Dans notre exemple, il y a 679 échantillons assignés à Gecko - le deuxième plus gros groupe après bubbleSort(). étendons donc cela :

+ +

+ +

Cela révèle que 614 de ces échantillons, soit environ 20% du cout total, viennent de l'appel de sort(). Si nous regardons au code de la fonction, il devient évident que le cout élevé des données de plateforme viennent des appels répétés à console.log():

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

Il serait certainement intéressant de considérer des façons plus efficientes d'implémenter cela.

+ +

Une chose à garder en tête est que les périodes d'inactivité sont classifiées en tant que Gecko, donc les parties de votre profil où votre JavaScript ne tourne pas contribueront aux échantillons Gecko. Ces échantillons n'impactent pas la performance de votre site.

+ +
+

Par défaut, l'arbre d'appel ne sépare par les données de plateforme dans des fonctions séparées, car elles ajoutent beaucoup de nuisance et ces détails ont peu de chances d'être utiles à des personnes ne travaillant sur le développement de Firefox. Si vous voulez cependant voir ces détails, il faut cocher l'option "Afficher les données de la plateforme Gecko" dans les options.

+
+ +

 

+ +

Utiliser un arbre inversé ( Bottom-Up)

+ +

Un arbre d'appel inversé, inverse l'ordre de toutes les piles, en mettant la fonction la plus loin dans l'arbre au début. La conséquence directe est que cette vue se focalise plus sur l'information Durée Individuelle. Cette vue est pratique pour trouver les points "chauds" du code.

+ +

Pour afficher cette vue, cliquer sur l'icône en forme d'engrenage dans la partie droite et de cliquer sur L'arbre d'appel.

+ +

diff --git a/files/fr/tools/performance/examples/index.html b/files/fr/tools/performance/examples/index.html new file mode 100644 index 0000000000..e3ca28d9bd --- /dev/null +++ b/files/fr/tools/performance/examples/index.html @@ -0,0 +1,8 @@ +--- +title: Exemples +slug: Outils/Performance/Examples +translation_of: Tools/Performance/Examples +--- +
{{ToolsSidebar}}

Liste des pages de démos pour les scénarios de performances et walkthroughs.

+ +

{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}

diff --git a/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html b/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html new file mode 100644 index 0000000000..608691a9d5 --- /dev/null +++ b/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html @@ -0,0 +1,71 @@ +--- +title: Comparaison des algorithmes de tri +slug: Outils/Performance/Examples/Sorting_algorithms_comparison +translation_of: Tools/Performance/Examples/Sorting_algorithms_comparison +--- +
{{ToolsSidebar}}

Ce articlé décrit un programe simple qui est utilisé dans deux des guides de l'outil Performance : le guide pour l'arbre d'appel et le guide pour le diagramme de flamme.

+ +

Ce programme compare les performances de trois algorithmes de tri différents :

+ + + +

Ce programme est composé des fonctions suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
sortAll()Fonction principale. génère itérativement (200 itérations) des tableaux aléatoires et appellesort().
sort()Appelle les fonctions bubbleSort(), selectionSort(), et quickSort() tour à tour et affiche le résultat.
bubbleSort()Implémente un tri à bulles, retourne le tableau trié
selectionSort()Implémente un par sélection retourne le tableau trié
quickSort()Implémente un tri rapide, retourne le tableau trié
swap()fonction d'aide pour bubbleSort() et selectionSort().
partition()fonction d'aide pour quickSort().
+ +

le graphique d'appel ressemble à ceci :

+ +
sortAll()                     // (génère un tableau aléatoire puis appelle sort) x 200
+
+    -> sort()                 // tri le tableau avec chaque tri et affiche le résultat
+
+        -> bubbleSort()
+
+            -> swap()
+
+        -> selectionSort()
+
+            -> swap()
+
+        -> quickSort()
+
+            -> partition()
+ +

Les implémentations des algorithmes de tri dans ce programme ont été tirées du dépôt https://github.com/nzakas/computer-science-in-javascript/ et sont utilisées sous la licence MIT.

+ +

Vous pouvez tester ce programme d'exemple ici et cloner le code ici (soyez sûr de bien check out la branche gh-pages).

diff --git a/files/fr/tools/performance/flame_chart/index.html b/files/fr/tools/performance/flame_chart/index.html new file mode 100644 index 0000000000..0bcb285b4d --- /dev/null +++ b/files/fr/tools/performance/flame_chart/index.html @@ -0,0 +1,103 @@ +--- +title: Flame Chart +slug: Outils/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +--- +
{{ToolsSidebar}}
+

Le Flame Chart affiche l'état de la pile JavaScript de votre code à chaque milliseconde durant le profil de performance.

+ +

Cela permet de savoir exactement quelle fonction s'est exécutée à un moment donné dans l’enregistrement, combien de temps elle a mis, et d'où elle a été appelée.

+
+ +

L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.

+ +

Cependant, tandis que le Call Tree organise ces données pour mettre en évidence les endroits où le code passe le plus de temps, de manière cohérente à travers tout l'enregistrement, le Flame Chart lui utilise ces données pour afficher où exactement dans l'enregistrement les fonctions s'exécutent. Essentiellement, il affiche l'état de la pile d'appel à n’importe quel point donné de l'enregistrement.

+ +

Voici une capture d'écran montrant le Flame Chart pour une section d'un profil :

+ +

+ +

Tout d'abord, vous pouvez remarquer que dans le panneau de vue globale de l'enregistrement. Ici, une petite partie de l'enregistrement est sélectionné et affiché dans le Flame Chart. Le Flame Chart affiche beaucoup de données, donc pour obtenir des résultats pertinents, il est souvent nécessaire de zoomer.

+ +

Dans la vue du Flame Chart, l'axe X représente le temps. La capture d'écran couvre la période de 1435ms à un peu plus de 1465ms. Sur l'axe Y, on trouve les fonctions de la pile d'appel à ce point dans le temps, avec le haut niveau en haut, et les fonctions filles en bas. Les fonctions ont un code couleur pour pouvoir les distinguer facilement.

+ +

Cela fournit une façon de savoir à tout moment de l'enregistrement quelles fonctions sont exécutées, quand et pendant combien de temps, et également d'où elles ont été appelées.

+ +

Zoomer et faire un panoramique

+ +

Pour travailler efficacement avec le Flame Chart, il est nécessaire de pouvoir naviguer dedans. Il existe deux contrôles principaux pour naviguer dans le Flame Chart :

+ + + + + + + + + + + + +
Zoom : Augmente/diminue la portion du profil sélectionné qui est affiché dans le Flame Chart +

1) Souris : mollette vers le haut ou vers le bas dans le Flame Chart.

+ +

2) Pavé tactile : deux doigts vers le haut ou vers le bas dans le Flame Chart.

+
Déplacement : Déplace la portion du profil sélectionné qui est affiché dans le Flame Chart +

1) Clic puis glissement de la partie sélectionnée dans le panneau de la vue d'ensemble de l'enregistrement.

+ +

2) Clic puis glissement n'importe où dans le Flame Chart (attention, cliquer dans le panneau de vue d'ensemble à l’extérieur de la partie sélectionnée entraînera une nouvelle sélection)

+
+ +

{{EmbedYouTube("BzfkBRFucp8")}}

+ +

Exemple

+ +

Afin de voir comment le Flame Chart peut révéler le comportement d'un programme, nous utiliserons cet exemple simple. Nous utilisons le même programme dans la page de L'Arbre d'appel. Il s'agit d'un programme qui compare trois algorithmes de tri différents. Il existe une page séparée qui fournit une vue d'ensemble de la structure du programme.

+ +

Nous utiliserons le même profil que celui utilisé sur la page de l'Arbre d'appel. Le graphique d'appel et le nombre d'échantillons associé ressemblent à ceci :

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

Tout d'abord, sélectionnons toute la partie durant laquelle le programme était actif :

+ +

+ +

L'appelsortAll(), tout en haut et coloré en mauve court du début du programme à la fin. En dessous, on trouve en couleur olive les appels que cette fonction fait à sort(). Encore en dessous, comme les dents d'une scie, on trouve les appels à chacun des algorithmes de tri.

+ +

Zoomons un peu :

+ +

+ +

Cette partie dure à peu près 140ms, et montre plus de détails sur les fonctions appelées par sort(). Le code de sort() est celui-ci :

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

Les boites intitulées "bubb..." et colorées en vert olive sont vraisemblablement des bubbleSort(). Les boites colorées en vert sont vraisemblablement les autres fonctions de tri. Même au premier regard, il parait évident que les boites du tri à bulle sont bien plus grosses (et donc durent plus longtemps) que les autres.

+ +

Nous pouvons également voir quelques fonctions appelées par bubbleSort(), en violet.

+ +

Zoomons une deuxième fois :

+ +

+ +

Cette partie dure environ 20ms. Nous pouvons voir que les boites violettes en dessous de bubbleSort() sont les appels à swap(). Si voulions tous les compter, l'Arbre d'appel nous dirait facilement qu'il en existe 253 (le nombre d'échantillons pris dans cette fonction) . Tous les échantillons dans cette portion sont en dessous de bubbleSort(), mais l'on peut voir dans l'arbre d'appel que le profil contient un appel dans selectionSort().

+ +

Nous pouvons également voir que deux des boites vertes correspondent à selectionSort() et quickSort(), mais que les autres boites vertes correspondent à des appels à la plate-forme Gecko. Il est très probable qu'il s’agisse des console.log() dans sort().

diff --git a/files/fr/tools/performance/frame_rate/index.html b/files/fr/tools/performance/frame_rate/index.html new file mode 100644 index 0000000000..3f4c5016f0 --- /dev/null +++ b/files/fr/tools/performance/frame_rate/index.html @@ -0,0 +1,58 @@ +--- +title: Frame rate +slug: Outils/Performance/Frame_rate +translation_of: Tools/Performance/Frame_rate +--- +
{{ToolsSidebar}}
+

Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.

+ +

Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.

+ +

Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.

+
+ +

Frame rate et réactivité

+ +

Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.

+ +

Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.

+ +

Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.

+ +

Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).

+ +

En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.

+ +
+

Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.

+ +

Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.

+
+ +

Graphique du Frame rate

+ +

Le graphique du frame rate se trouve dans la vue d'ensemble de l'enregistrement de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.

+ +

L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.

+ +

Utiliser le graphique du frame rate

+ +

Le principal intérêt de ce graphique est que tout comme la Console web, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :

+ +

+ +

Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.

+ +

Le graphique du frame rate est en relation avec la vue d'ensemble de la Chronologie et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.

+ +

Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la Chronologie en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :

+ +

+ +

Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.

+ +

Pour savoir de quelle fonction il s'agit exactement, il faut passer au Flame Chart (Graphique JS) pour voir la pile d'appels à ce moment donné :

+ +

+ +

La fonction coupable est doPointlessComputations(), et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans requestAnimationFrame, ou bien même d'exécuter la fonction dans un worker. L'article JavaScript intensif expose des stratégies pour résoudre ce genre de problèmes.

diff --git a/files/fr/tools/performance/how_to/index.html b/files/fr/tools/performance/how_to/index.html new file mode 100644 index 0000000000..f7cd86402f --- /dev/null +++ b/files/fr/tools/performance/how_to/index.html @@ -0,0 +1,63 @@ +--- +title: Comment faire ? +slug: Outils/Performance/How_to +translation_of: Tools/Performance/How_to +--- +
{{ToolsSidebar}}

Ouvrir l'outil Performance

+ +

Pour ouvrir l'outil Performance, il existe plusieurs possibilités :

+ + + +

Enregistrer un profil

+ +

Pour commencer un nouvel enregistrement, il faut presser sur le bouton en forme de chronomètre dans le panneau des enregistrements. Pour arrêter l'enregistrement, il suffit d'appuyer à nouveau sur le bouton :

+ +

+ +

Il est également possible de démarrer et d'arrêter un enregistrement depuis la Console Web, en utilisant console.profile() et console.profileEnd().

+ +

Sauvegarder un profil

+ +

Pour sauvegarder un profil, il faut cliquer sur le lien "Enregistrer" dans le tableau des enregistrements :

+ +

+ +

Charger un profil

+ +

Pour charger un profil, il suffit de cliquer sur "Importer..." et sélectionner le fichier :

+ +

+ +

Effacer tous les profils chargés

+ +

Pour effacer tous les profils chargés, il faut cliquer sur "Effacer".

+ +
+

Attention, cette action entrainera la perte de tout profil non sauvegardé

+
+ +

+ +

Sélectioner un outil

+ +

Les outils Chronologie, Arbre d'appel, et Flame Chart (Graphique JS) proposent chacun une méthode de visualisation différente. Pour passer de l'une à l'autre, il faut utiliser leurs boutons associés :

+ +

+ +

Configurer les données affichées

+ +

Pour contrôler quels types de données sont affichées dans la chronologie, il faut utiliser ce bouton :

+ +

+ +

Zoomer

+ +

Pour zoomer sur une partie de l'enregistrement, il faut sélectionner cette partie dans la vue d'ensemble :

+ +

diff --git a/files/fr/tools/performance/index.html b/files/fr/tools/performance/index.html new file mode 100644 index 0000000000..503820e30f --- /dev/null +++ b/files/fr/tools/performance/index.html @@ -0,0 +1,94 @@ +--- +title: Performance +slug: Outils/Performance +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+ +

L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une vue d'ensemble des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du frame rate lors du profil est également affiché.

+ +

Il existe quatre sous-outils pour examiner les différents aspects du profil en détail :

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Débuter

+ +
+
+
+
UI Tour
+
+

Une visite guidée rapide pour s'y retrouver dans l'interface.

+
+
+
+ +
+
+
Comment faire ?
+
Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.
+
+
+
+ +
+

Composants de l'outil Performance

+ +
+
+
+
Frame rate
+
Comprendre la réactivité générale des sites.
+
Arbre d'appel
+
Trouver les points noirs dans le code JavaScript d'un site.
+
Allocations
+
Afficher les allocations faites par le code tout au long de l'enregistrement.
+
+
+ +
+
+
Chronologie
+
Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.
+
Graphique JS
+
Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.
+
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animer des propriétés CSS
+
Utiliser l'arbre d'appel pour comprendre comme le navigateur met à jour une page, et comment différentes animations de propriétés CSS peuvent impacter la performance.
+
+
+
+ +
+
+
JavaScript intensif
+
Utiliser le frame rate et l'arbre d'appel pour mettre en évidence les problèmes causés par du JavaScript à longue exécution et comment l'utilisation des workers peut aider à résoudre cette situation..
+
+
+
+ + + +
+
+
+
+
diff --git a/files/fr/tools/performance/scenarios/animating_css_properties/index.html b/files/fr/tools/performance/scenarios/animating_css_properties/index.html new file mode 100644 index 0000000000..b2767f6b32 --- /dev/null +++ b/files/fr/tools/performance/scenarios/animating_css_properties/index.html @@ -0,0 +1,154 @@ +--- +title: Animer des propriétés CSS +slug: Outils/Performance/Scenarios/Animating_CSS_properties +translation_of: Tools/Performance/Scenarios/Animating_CSS_properties +--- +
{{ToolsSidebar}}
+ +
+

Le cout en performance des animations CSS peuvent varier d'une propriété à une autre, et animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

+ +

Le Frame rate et la Chronologie peuvent fournir des renseignements sur les opérations que fait le navigateur lors d'une animation CSS, dans le but d'aider à diagnostiquer les problèmes de performances.

+
+ +

Avec les animations CSS, il est possible de spécifier un nombre keyframes, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.

+ +

Comparées à l'animation via JavaScript, les animations CSS peuvent être plus faciles à créer. Elles peuvent également donner de meilleures performances, car elles donnent plus de contrôle au navigateur pour afficher les frames au bon moment et les supprimer si nécessaire.

+ +

Cependant, le cout en performances de la modification des propriétés CSS varient d'une propriété à une autre. Animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

+ +

La chronologie du rendu CSS

+ +

Le processus que le navigateur utilise pour mettre à jour la page lorsqu'une propriété CSS a changé peut être décrit comme une chronologie consistant des étapes suivantes :

+ +

+ +
    +
  1. Recalculate Style (recalculer le style) : à chaque fois qu'une propriété CSS d'un élément change, le navigateur doit recalculer les styles calculés.
  2. +
  3. Layout (disposition) : ensuite, le navigateur utilise les styles calculés pour trouver la position et la géométrie des éléments. Cette opération est appelée "layout" mais peut être également appelée "reflow".
  4. +
  5. Paint (affichage) : enfin, le navigateur doit repeindre les éléments à l'écran. Une dernière étape qui n'est pas montrée dans cette séquence : la page peut être séparée en calques qui sont affichés indépendamment, puis combinés dans un processus appelé "Composition".
  6. +
+ +

Cette séquence doit tenir dans une seule frame, vu que l'écran n'est pas mis à jour avant sa complétion. Il est généralement accepté que 60 frames par secondes est le frame rate auquel les animations apparaitront fluides. Un frame rate de 60 frames par secondes (fps) donne au navigateur 16.7 millisecondes pour exécuter entièrement cette séquence.

+ +

Cout des propriétés CSS

+ +

Lors de l'exécution de la chronologie du rendu CSS, certaines propriétés sont plus couteuses que d'autres :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de la propriétéCoutExemples
Les propriétés qui impactent la forme d'un élément ou sa position déclenchent une recalculation du style, une disposition, et un repaint. +

left
+ max-width
+ border-width
+ margin-left
+ font-size

+
+

Les propriétés qui n'impactent pas la forme d'un élément ou sa position, mais qui ne sont pas dans leur propre calque, ne déclenchent pas de disposition (layout)

+
+

color

+
Les propriétés dans leur propre calque ne déclenchent même pas un repaint, car la mise à jour est gérée dans la composition. transform
+ opacity
+ +
+

Le site web CSS Triggers affiche le cout pour chacune des propriétés CSS. Cela n'est valable que pour les navigateurs WebKit, mais la plupart des couts seront les mêmes dans tous les navigateurs récents.

+
+ +

Example : margin contre transform

+ +

Dans cette section, la façon dont la Chronologie peut mettre en évidence la différence entre une animation utilisant margin et une utilisant transform serra démontrée.

+ +

L'intention de ce scénario n'est pas de convaincre que l'animation en utilisant margin est forcement une mauvaise idée. Mais plutôt de démontrer comment les outils de développement peuvent donner une idée du travail qu'effectue le navigateur pour afficher un site web, et comment utiliser ces renseignements pour régler les problèmes de performance..

+ +

Si vous voulez expérimenter en même temps, le site de la démo est disponible ici. Il ressemble à ceci :

+ +

Le site comporte deux boutons : un pour démarrer/arrêter l'animation, et un groupe pour sélectionner le type d'animation.

+ +

Il y a quelques éléments, et ceux-ci ont les propriétés CSS linear-gradient et box-shadow, car elles sont relativement couteuses.

+ +

Il existe également une version vidéo de cette démo.

+ +

{{EmbedYouTube("Tvu6_j8Qzfk")}}

+ +

Animer en utilisant margin

+ +

Il faut laisser l'option "Use margin" sélectionnée, puis lancer l'animation. Il faut ensuite ouvrir l'outil Performances (maj+F5) et faire un enregistrement, seulement quelques secondes sont nécessaires.

+ +

En ouvrant l'enregistrement, ce que vous verrez dépend grandement de votre machine et de la charge du système, mais cela devrait ressembler à ceci :

+ +

+ +

Cette capture d'écran montre trois vues distinctes : une vue d'ensemble de la chronologie, le frame rate, et les détails de la frise chronologique.

+ +

Vue d'ensemble de la chronologie

+ +

+ +

Il s'agit d'une représentation compressée de la Chronologie. La prédominance du vert révèle que la page passe beaucoup de temps à peindre..

+ +

Frame rate

+ +

+ +

Cette partie montre le frame rate. Le frame rate moyen est de 46.67fps, bien en dessous de la cible de 60fps. Pire, le frame rate n'est pas du tout constant, avec un nombre conséquent de décentes dans les 20fps. Il est donc peu probable que l'animation soit fluide, surtout si une interaction utilisateur est ajoutée.

+ +

Chronologie

+ +

Le reste de l'enregistrement montre la vue de la chronologie. En faisant défiler un peu, on trouve le pattern suivant :

+ +

+ +

Cela représente la chronologie du rendu. À chaque frame de l'animation, les styles de chaque élément sont recalculés, puis composés en une seule disposition, et enfin le repaint a lieu.

+ +

Il est facile de voir que le paint prend beaucoup de performance ici. Dans la capture d'écran ci-dessus, une opération paint est mise en surbrillance. La partie sur la droite révèle que cette opération prend 13.11ms. Avec seulement 16.7ms de budget temps par frame, il n'est pas surprenant d'avoir un frame rate si bas.

+ +

Vous pouvez expérimenter avec l'exemple : essayez d'enlever la propriété box-shadow en utilisant l'Inspecteur, et regardez comment cela affecte le temps que prend paint. Par la suite, nous verrons comment utiliser transform au lieu de margin élimine complètement ces paint couteux.

+ +

Animer en utilisant transform

+ +

En cliquant sélectionnant l'option "Use transform", et en effectuant un nouvel enregistrement, on obtient quelque chose ressemblant à ceci :

+ +

+ +

Vue d'ensemble de la chronologie

+ +

+ +

En comparaison avec la version utilisant margin, on remarque beaucoup moins de vert et beaucoup plus de rose, ce qui peut être soit du positionnement soit de la recalculation de style.

+ +

Frame rate

+ +

+ +

En comparaison avec la version utilisant margin, cela semble bien mieux. Le frame rate moyen est quasiment à 60fps et le frame rate est quasiment constant.

+ +

Chronologie

+ +

La frise chronologique montre la raison pour laquelle le frame rate s'est amélioré. The timeline view shows the reason for the improved frame rate. Contrairement à la version utilisant margin aucun temps n'est dépensé dans la disposition ou dans paint :

+ +

+ +

Dans ce cas-là, utiliser transform a considérablement amélioré la performance du site, et l'outil de performance permet de voir comment et pourquoi.

diff --git a/files/fr/tools/performance/scenarios/index.html b/files/fr/tools/performance/scenarios/index.html new file mode 100644 index 0000000000..1b5969c1ff --- /dev/null +++ b/files/fr/tools/performance/scenarios/index.html @@ -0,0 +1,8 @@ +--- +title: Scénarios +slug: Outils/Performance/Scenarios +tags: + - NeedsContent +translation_of: Tools/Performance/Scenarios +--- +
{{ToolsSidebar}}

Scénarios de performances

diff --git a/files/fr/tools/performance/scenarios/intensive_javascript/index.html b/files/fr/tools/performance/scenarios/intensive_javascript/index.html new file mode 100644 index 0000000000..9d9a2291de --- /dev/null +++ b/files/fr/tools/performance/scenarios/intensive_javascript/index.html @@ -0,0 +1,231 @@ +--- +title: Intensive JavaScript +slug: Outils/Performance/Scenarios/Intensive_JavaScript +translation_of: Tools/Performance/Scenarios/Intensive_JavaScript +--- +
{{ToolsSidebar}}
+

Par défaut, le navigateur n'utilise qu'un seul thread pour exécuter tout le JavaScript d'une page et pour effectuer les layout, reflows et garbage collections. Cela signifie que les fonctions JavaScript qui mettent trop de temps à s'exécuter peuvent bloquer le thread, empêchant ainsi à la page de répondre et donnant alors une mauvaise expérience utilisateur.

+ +

Il est possible d'utiliser les outils Frame rate et Chronologie pour repérer le code JavaScript qui cause des problèmes de performances, et pour mettre en évidence les fonctions qui demandent une attention particulière.

+ +

Dans cet article, nous prendrons un exemple d'un site où le JavaScript cause des problèmes de réactivité, et nous utiliserons deux approches différentes pour résoudre ce problème. La première approche est de fractionner les fonctions trop gourmandes en plusieurs morceaux et d'utiliser requestAnimationFrame pour planifier l'exécution de chaque morceau. La seconde approche est d'exécuter la fonction en entier dans un thread séparé en utilisant un web worker.

+
+ +

Si vous souhaitez expérimenter par vous même tout en lisant, le site web de démonstration est disponible ici.

+ +

Il existe également une version vidéo de cet article :

+ +

{{EmbedYouTube("Pcc6jQX6JDI")}}

+ +

Le site de démonstration ressemble à ceci :

+ +

Il y trois contrôles :

+ + + +

Afin de voir le problème de cette page, il faut laisser le bouton de sélection sur "Use blocking call in main thread" (appel de fonction bloquant dans le thread principal), puis faire un enregistrement. Pour ce faire, il faut réaliser les étapes suivantes :

+ + + +

Le résultat sera différent d'une machine à l'autre, mais globalement il devrait ressembler à ceci :

+ +

+ +

La partie haute est la vue d'ensemble de la chronologie. Cela donne une vue compressée de la Chronologie, qui affiche quels types d'opérations le navigateur effectue durant l'enregistrement. La partie rose indique que le navigateur effectue principalement des calculs CSS et potentiellement des reflows: il s'agit des animations CSS qui s'exécutent tout au long du profil. Il y a également des gros blocs orange, représentant l'exécution de JavaScript, il y a un bloc par appui de bouton "Do pointless computations!".

+ +

La partie basse qui est relation avec le résumé de la frise chronologique, montre le frame rate. Celui-ci est bon pendant la plus grande partie de l'enregistrement, mais s'effondre complètement à chaque appui de bouton.

+ +

Il est possible de sélectionner une de ces périodes afin d'obtenir des informations plus précises dans la vue principale de la chronologie :

+ +

+ +

Ici, lorsque le bouton est pressé, le navigateur a exécuté une fonction JavaScript, ou une série de fonctions qui ont bloqué le thread principal pendant 71.73ms, soit plus de trois fois le budget de temps pour une frame (1000ms/60frames = 16.67ms par frame).

+ +

Mais quelle est cette fonction qui prend tant de temps ? En passant à la vue du Flame Chart (Graphique JS), il est possible de le découvrir :

+ +

+ +

Cela révèle la pile d'appels JavaScript à cet instant de l'exécution. Sur le haut de la pile, on trouve une fonction nommée calculatePrimes(), le nom du fichier dans laquelle elle est contenue ainsi que le numéro de ligne à laquelle elle se trouve est également affiché. Le code incriminé est le suivant :

+ +
const iterations = 50;
+const multiplier = 1000000000;
+
+function calculatePrimes(iterations, multiplier) {
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  return primes;
+}
+
+function doPointlessComputationsWithBlocking() {
+  var primes = calculatePrimes(iterations, multiplier);
+  pointlessComputationsButton.disabled = false;
+  console.log(primes);
+}
+
+ +

Il s'agit tout simplement d'un test (mal optimisé) de nombre primaire réalisé 50 fois, pour des nombres assez grands.

+ +

Utilisation de requestAnimationFrame

+ +

La première manière de régler ce problème de performance consiste à fractionner la fonction en plusieurs parties plus restreintes, et de planifier l'exécution de chacune avec requestAnimationFrame().

+ +

requestAnimationFrame() ordonne au navigateur d'effectuer une fonction à chaque frame, juste avant qu'il effectue un repaint. Tant que les chaque fonction est raisonnablement courte, le navigateur devrait être capable de de ne pas dépasser le budget temps idéal.

+ +

Il est assez facile de fractionner calculatePrimes(): Il suffit de calculer la primarité de chaque nombre dans une fonction séparée :

+ +
function doPointlessComputationsWithRequestAnimationFrame() {
+
+  function testCandidate(index) {
+    // finishing condition
+    if (index == iterations) {
+      console.log(primes);
+      pointlessComputationsButton.disabled = false;
+      return;
+    }
+    // test this number
+    var candidate = index * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+    // schedule the next
+    var testFunction = testCandidate.bind(this, index + 1);
+    window.requestAnimationFrame(testFunction);
+  }
+
+  var primes = [];
+  var testFunction = testCandidate.bind(this, 0);
+  window.requestAnimationFrame(testFunction);
+}
+ +

Il est maintenant temps de tester cette version. Pour cela on répète les étapes précédentes. Cette fois par contre, l'enregistrement devrait ressembler à ceci :

+ +

+ +

Au lieu d'un seul bloc organe continu, chaque pression de bouton révèle une longue séquence de courts blocs orange. Ces blocs sont tous espacés d'une frame, et chacun représente une des fonctions appelées par requestAnimationFrame(). Il est à noter qu'il n'y a eu que deux pressions de bouton dans ce profil.

+ +

Ces appels de fonction sont en parallèle aux blocs roses des animations CSS, et chaque fonction est assez courte pour que le navigateur puisse l'exécuter sans faire baisser le frame rate.

+ +

Utiliser requestAnimationFrame pour résoudre le problème de réactivité a fonctionné ici. Cependant, il existe quelques problèmes potentiels à cette solution :

+ + + +

Utilisation des web workers

+ +

Cette solution tente de régler le problème en utilisant un web worker. Les web workers permettent d'exécuter du JavaScript dans un thread séparé. Le thread principal et le thread du worker ne peuvent pas s'appeler directement, mais peuvent cependant communiquer via une API de messagerie asynchrone.

+ +

Le code du thread principal doit ressembler à ceci :

+ +
const iterations = 50;
+const multiplier = 1000000000;
+
+var worker = new Worker("js/calculate.js");
+
+function doPointlessComputationsInWorker() {
+
+  function handleWorkerCompletion(message) {
+    if (message.data.command == "done") {
+      pointlessComputationsButton.disabled = false;
+      console.log(message.data.primes);
+      worker.removeEventListener("message", handleWorkerCompletion);
+    }
+  }
+
+  worker.addEventListener("message", handleWorkerCompletion, false);
+
+  worker.postMessage({
+    "multiplier": multiplier,
+    "iterations": iterations
+  });
+}
+ +

La différence avec le code original est que l'on a besoin de :

+ + + +

Un fichier "calculate.js", est également nécessaire, son code est le suivant :

+ +
self.addEventListener("message", go);
+
+function go(message) {
+  var iterations = message.data.iterations;
+  var multiplier = message.data.multiplier;
+  primes = calculatePrimes(iterations, multiplier);
+
+  self.postMessage({
+    "command":"done",
+    "primes": primes
+  });
+}
+
+function calculatePrimes(iterations, multiplier) {
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  return primes;
+}
+ +

Dans le worker, il est nécessaire d'être à l'écoute d'un message donnant l'ordre de démarrer. Il est également nécessaire d'envoyer un message "done" lorsque les calculs sont finis. La partie du code qui réalise les calculs elle n'a pas changé.

+ +

Comment s'en tire cette version ? Pour le savoir, il suffit de sélectionner "Use a worker", et de capturer un nouveau profil. Il devrait ressembler à ceci :

+ +

+ +

Dans ce profil, le bouton a été pressé trois fois. Comparé à l'original, chaque pression de bouton est visible dans le résumé sous la forme de deux blocs orange très courts :

+ + + +

Entre ces deux blocs, le worker effectue ses opérations, et n'a aucun effet visible sur le frame rate et donc sur la réactivité du thread principal. Cela peut sembler étrange, mais puisque le worker s'exécute dans thread séparé, l'ordinateur peut profiter de l'architecture multi coeurs, ce qu'un site web à thread unique ne peut pas faire.

+ +

La limitation principale des webs workers est que le code qui s'exécute dans un worker n'a pas accès à l'API DOM.

diff --git a/files/fr/tools/performance/ui_tour/index.html b/files/fr/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..b364f3029b --- /dev/null +++ b/files/fr/tools/performance/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: UI Tour +slug: Outils/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +
{{ToolsSidebar}}
+ +

La plateforme d'outils se découpe en 4 parties principales :

+ + + +

Outil

+ +

La boite à outils contient les boutons pour :

+ + + +

+ +

Recordings pane

+ +

The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.

+ +

+ +

Pour un temps donné, un enregistrement est sélectionné, et cet enregistrement est affiché dans le reste de l'outil. Pour sélectionner un enregistrement différent, cliquer sur son entrée dans le panneau. Pour sauvegarder l'enregistrement en tant que fichier d'extension JSON, appuyer sur "Save".

+ +

Vue d'ensemble de l'enregistrement

+ +

Ceci affiche une vue d'ensemble de la totalité de l'enregistrement.This displays an overview of the entire recording, with the x-axis representing time.

+ +

+ +

It contains two elements: an overview of the Waterfall and a frame rate graph.

+ +

Waterfall overview

+ +

This presents a compressed view of the Waterfall:

+ +

+ +

Recorded operations are color-coded using the same scheme as in the main Waterfall view.

+ +

Frame rate graph

+ +

The frame rate gives you an overview of the browser's responsiveness during the recording:

+ +

+ +

See the separate article on frame rate.

+ +

Correlating events

+ +

Because these elements are synchronized, you can correlate events in one element with events in another.

+ +

For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:

+ +

+ +

Zooming in

+ +

You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:

+ +

+ +

Details pane

+ +

The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.

+ +

Waterfall

+ +

The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.

+ +

+ +

To learn much more about the Waterfall, see the separate Waterfall page.

+ +

Call Tree

+ +

The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.

+ +


+ To learn much more about the Call Tree, see the separate Call Tree page.

+ +

Flame Chart

+ +

If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:

+ +

+ +

To learn much more about the Flame Chart, see the separate Flame Chart page.

+ +

Allocations

+ +
+

La vue Allocations est une des nouvautés de Firefox 46.

+
+ +

La vue Allocations ressemble à la vue Call tree view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.

+ +

+ +

The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

To learn much more about the Allocations view, see the separate Allocations page.

diff --git a/files/fr/tools/performance/waterfall/index.html b/files/fr/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..cf30f9a81d --- /dev/null +++ b/files/fr/tools/performance/waterfall/index.html @@ -0,0 +1,481 @@ +--- +title: Chronologie +slug: Outils/Performance/Waterfall +translation_of: Tools/Performance/Waterfall +--- +
{{ToolsSidebar}}
+ +
+

La chronologie vous donne des indications sur les opérations qu'effectue le navigateur lorsqu'il fait tourner une page web ou une application. Cet outil se base sur l'idée que les opérations qu'effectue un navigateur peuvent être divisées en plusieurs types : exécution du JavaScript, mise à jour du layout, et ainsi de suite... Ainsi que l'idée qu'à n'importe quel point donné dans le temps, le navigateur effectue l'une ou l'autre de ces actions.

+ +

Donc, si vous voyez un problème de performance - une chute du frame rate par exemple - vous pouvez utiliser la chronologie pour voir ce que le navigateur faisait à ce moment de l'enregistrement.

+
+ +

+ +

L'axe X représente le temps. Les opérations enregistrées, appelées marqueurs sont affichées sous la forme de barres de couleur horizontales. Ces marqueurs sont disposés en cascade pour refléter le caractère séquentiel de l'exécution du navigateur.

+ +

Lorsqu'un marqueur est sélectionné, des informations supplémentaires sur celui-ci s'affichent dans le panneau de droite. Ces informations intègrent la durée du marqueur et quelques informations spécifiques de son type.

+ +

Marqueurs

+ +

Les marqueurs possèdent un code couleur et un libellé. Les opérations suivantes sont enregistrées :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom et descriptionCouleurInformations détaillées
+

Évènements DOM

+ +

Le code JavaScript qui est exécuté en réponse à un évènement DOM.

+
+
+
Type de l'évènement
+
Par exemple, "click" ou "message".
+
+ +
+
Phase de l'évènement
+
Par exemple "Target" ou "Capture".
+
+
+

Les fonctions JavaScript exécutées dans la page ont le libellé de la raison pour laquelle la fonction a été appelée :

+ +

Script Tag
+ setInterval
+ setTimeout
+ requestAnimationFrame
+ Promise Callback
+ Promise Init
+ Worker
+ JavaScript URI
+ Event Handler

+
+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Parse HTML

+ +

Le temps passé à parser le HTML de la page.

+
+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Parse XML

+ +

Le temps passé à parser le XML de la page.

+
+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Recalcul des styles

+ +

Le calcul des styles qui s'appliquent aux éléments de la page.

+
+
+
Causes du recalcul
+
Une chaine de caractères indiquant quel type de recalcul est nécessaire. Elle peut prendre les valeurs suivantes :
+ Self
+ Subtree
+ LaterSiblings
+ CSSTransitions
+ CSSAnimations
+ SVGAttrAnimations
+ StyleAttribute
+ StyleAttribute_Animations
+ Force
+ ForceDescendants
+
+
+

Layout

+ +

Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".

+
 
+

Paint

+ +

Affichage des pixels à l'écran

+
 
+

Ramasse-miettes

+ +

évènement de garbage collection. Les évènements GC non incrémentaux sont nommés "non incrémentiel".

+
+
+
Raison
+
Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.
+
Raison du cycle non incrémentiel
+
Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.
+
 
+
+
+

Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.

+ +

Voir Allocations et Ramasse-miettes pour plus d'informations.

+
+
+
+
+

Cycle Collection

+ +

Récupération des structures de données C++ qui sont en "reference-count"

+ +

Semblable au ramasse-miette, mais pour les objets C++. Voir l'article de blog de Kyle Huey sur le cycle collection.

+
+
+
Type
+
Toujours "Collect"
+
+
+

Réduction d'arbre de ramasse-miettes

+ +

Préparation/préoptimisation pour le Cycle Collection.

+
  +

                  Type

+   + +
+
Toujours "ForgetSkippable".
+
+
+

Console

+ +

La période entre les appels à console.time() et console.timeEnd().

+
+
+
Nom du timer
+
L'argument passé aux fonctions console.
+
Pile au début
+
La pile d'appels à console.time(), avec des liens vers les fonctions.
+
Pile de fin
+
(Nouveau dans Firefox 41). La pile d'appels console.timeEnd(). S'il s'agit d'un appel dans un callback de Promise, cela montrera également la "Async stack".
+
+
+

Timestamp

+ +

Un appel unique à console.timeStamp().

+
+
+
Label
+
L'argument passé à timeStamp().
+
+
+

DOMContentLoaded

+ +

L'évènement DOMContentLoaded du document

+
 
+

Load

+ +

L'évènement load du document.

+
 
+

Évènement dans le thread principal du worker

+ +

Affiché lorsque le thread principal envoie un message à un worker, ou reçoit un message d'un worker.

+
+

Un parmi :

+ +
+
Sérialisation des données sur le thread principal
+
Le thread principal sérialise un message pour l'envoyer au worker
+
Déserialisation des données sur le thread principal
+
Le thread principal désérialise un message pour l'envoyer au worker
+
+
+

Worker event in worker thread

+ +

Affiché lorsque le worker  envoie un message à un worker, ou reçoit un message du thread principal.

+
+

Un parmi :

+ +
+
Serialisation des données dans le Worker
+
Le worker sérialise un message pour l'envoyer au thread principal
+
Déserialisation des données dans le Worker
+
Le worker désérialise un message pour l'envoyer au thread principal
+
+
+ +

Les marqueurs et leurs couleurs sont les mêmes dans la chronologie que dans la vue d'ensemble de la chronologie.

+ +

Filtrer les marqueurs

+ +

Il est possible de contrôler quels marqueurs sont affichés en utilisant le bouton dans la barre d'outils :

+ +

+ +

Motifs de la chronologie

+ +

Le contenu de l´enregistrement dépend énormément des opérations réalisées par le site : Les sites utilisant beaucoup de JavaScript auront un profil à dominance orange, alors que les sites à contenu visuel dynamique auront beaucoup de violet et de vert. Cependant certains motifs communs peuvent vous indiquer de possibles problèmes de performance.

+ +

Chronologie de rendu

+ +

Le motif suivant est très courant dans la vue de la chronologie :

+ +

+ +

C'est une visualisation de l´algorithme de base qu'utilise le navigateur pour mettre à jour la page en réponse à un évènement :

+ +
    +
  1. JavaScript Function Call: Un évènement quelconque - par exemple un évènement DOM - a pour effet de lancer du JavaScript. Le code change du DOM ou du CSSOM.
  2. +
  3. Recalculate Style: Si le navigateur pense que des styles calculés de la page ont changé, il les recalcule.
  4. +
  5. Layout: Puis, le navigateur utilise les styles calculés pour déterminer la position et la géométrie des éléments. Cette opération est étiquetée "layout", mais on l'appelle aussi « reflow ».
  6. +
  7. Paint: Enfin, le navigateur a besoin de réafficher les éléments à l'écran. Une dernière étape n'est pas représentée dans cette séquence: La page peut être divisée en couches, qui sont affichées indépendamment puis assemblées lors d'un processus appelé "Composition".
  8. +
+ +

Cette séquence doit se terminer en une seule image, puisque l'écran n'est pas mis à jour avant qu'elle soit terminée. Il est communément admis que 60 images/secondes est la vitesse à laquelle les animations apparaîtront fluides. Pour un taux de 60 images/secondes, cela laisse au navigateur 16,7 millisecondes pour exécuter le flow complet.

+ +

Il est important pour la réactivité à ce que le navigateur n´ait pas à passer par toutes ces étapes à chaque fois :

+ + + +

L'article Animer des propriétés CSS montre qu'animer différentes propriétés CSS peut donner des résultats de performance différents, et comment la chronologie peut aider à le voir.

+ +

JavaScript bloquant

+ +

Par défaut, le JavaScript des pages web est exécuté sur le même thread que celui que le navigateur utilise pour les mises à jour de layout, les repaints, les évènements DOM et ainsi de suite. Cela signifie que des fonctions JavaScript qui mettent longtemps à s´exécuter peuvent causer des ralentissements (jank). Les animations ne seront pas fluides et le site pourra même freezer.

+ +

En utilisant l'outil frame rate et la « chronologie », il est facile de voir lorsque des fonctions JavaScript posent problème. Dans la capture d´écran ci-dessous, un zoom a été fait sur une fonction JS qui cause une chute du frame rate :

+ +

+ +

L'article JavaScript Intensif montre comment la « chronologie » peut mettre en évidence les problèmes de réactivité causés par des fonctions JavaScript trop gourmandes, et comment utiliser des méthodes asynchrones pour garder le thread principal réactif.

+ +

« Décorations » coûteuses

+ +

Certains effets tels que box-shadow, peuvent être coûteux ; surtout lors de transitions où le navigateur doit recalculer cet effet à chaque image. Si vous remarquez des chutes de frame rate surtout lors d'opérations et transitions graphiques couteuses, recherchez les longs marqueurs verts (repaint) dans la chronologie.

+ +

Ramasse-miettes (Garbage Collection)

+ +

Les marqueurs rouges dans la chronologie représentent le passage du ramasse-miettes (GC), pour lequel SpiderMonkey (le moteur JavaScript de Firefox) parcourt la pile à la recherche d´éléments en mémoire qui ne sont plus accessible pour les libérer. La GC est un indice de performance, car lorsqu’elle « tourne », le moteur JavaScript doit être en pause et donc le programme est mis en pause et ne répondra pas.

+ +

Pour aider à réduire la durée de ces pauses, SpiderMonkey implémente une GC morcelée. Cela signifie qu´il peut faire de la garbage collection par petites « passes », permettant au programme de tourner entre celles-ci. Parfois, le moteur à besoin de réaliser une garbage collection complète et non par morceaux et alors, le programme a besoin d'attendre la fin de cette opération.

+ +

Pour essayer d’éviter les évènements GC et surtout les passages complets, il est sage de ne pas essayer d'optimiser pour l'implémentation spécifique du moteur JavaScript. SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand la GC est nécessaire, et quand une GC non incrémentale en particulier est nécessaire. En général cependant :

+ + + +

Lorsque la Chronologie enregistre un marqueur GC, cela indique :

+ + + +

Ajouter des marqueurs avec la console API

+ +

Deux marqueurs peuvent être contrôlés par des appels à la console API : "Console" et "Timestamp".

+ +

Marqueurs de console

+ +

Ces marqueurs permettent de marquer une section spécifique de l'enregistrement.

+ +

Pour faire un marqueur console, il faut appeler console.time() au début d'une section, et console.timeEnd() à la fin. Ces fonctions prennent un argument qui est le nom de la section.

+ +

Par exemple si nous avons un code comme ceci :

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+
+  console.timeEnd("calculating...");
+
+  return primes;
+}
+ +

La sortie de la Chronologie ressemblera à ceci :

+ +

+ +

Le marqueur est nommé par l'argument passé à console.time(), et lorsque le marqueur est sélectionné, il est possible de voir la pile du programme dans l'encadré sur le coté droit.

+ +

Tache Async

+ +

Nouveau dans Firefox 41.

+ +

À partir de Firefox 41, l'encadré de droite affichera également la stack à la fin de la période. C´est à dire au moment où console.timeEnd() a été appelé. Si console.timeEnd() a été appelé par la résolution d'une Promise, l'encadré affichera également le label "(Async: Promise)", sous lequel sera affiché la "async stack" : Il s'agit de la pile d'appels au moment où la promise a été faite.

+ +

Par exemple, avec ce code :

+ +
var timerButton = document.getElementById("timer");
+timerButton.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  console.time("timer");
+  runTimer(1000).then(timerFinished);
+}
+
+function timerFinished() {
+  console.timeEnd("timer");
+  console.log("ready!");
+}
+
+function runTimer(t) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, t);
+  });
+}
+ +

La Chronologie affichera un marqueur pour la période entre time() et timeEnd(), et s’il est sélectionné, la pile async apparaitra dans l'encadré :

+ +

+ +

Marqueurs de temps

+ +

Les Timestamps permettent de marquer un instant dans l'enregistrement.

+ +

Pour faire un timestamp, il faut appeler console.timeStamp(). Il est possible de passer un argument pour nommer le timestamp.

+ +

Par exemple, supposons que nous adaptions le code au-dessus pour faire un timestamp toutes les 10 itérations de la boucle ayant pour nom le nombre de l'itération :

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+
+    if (i % 10 == 0) {
+      console.timeStamp(i.toString());
+    }
+
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  console.timeEnd("calculating...");
+  return primes;
+}
+ +

Dans la Chronologie, vous verrez quelque chose comme ceci :

+ +

diff --git a/files/fr/tools/remote_debugging/chrome_desktop/index.html b/files/fr/tools/remote_debugging/chrome_desktop/index.html new file mode 100644 index 0000000000..1e1580b614 --- /dev/null +++ b/files/fr/tools/remote_debugging/chrome_desktop/index.html @@ -0,0 +1,49 @@ +--- +title: Déboguer Chrome Desktop à distance +slug: Outils/Débogage_distant/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +
{{ToolsSidebar}}

Cet article explique comment connecter les outils de développement Firefox à Google Chrome si celui-ci est lancé sur l'ordinateur.

+ +
+

Note : Ce support dépend du module complémentaire Valence qui effectue le lien entre le protocole de débogage utilisé par Firefox et celui utilisé par Chrome. Le support de Valence est toujours expérimental.

+
+ +

Ce guide est organisé en deux parties : la première concerne les prérequis nécessaires, la seconde partie concerne la partie de connexion.

+ +

Prérequis

+ +

Pour connecter les outils de développement avec Google Chrome, vous aurez besoin de :

+ + + +

Connexion

+ +

{{EmbedYouTube("g5p9__OiaMY")}}

+ +

Lancer Chrome

+ +

Pour activer le débogage distant sur Chrome (pour ordinateur), vous aurez besoin de le lancer avec le flag suivant : --remote-debugging-port=9222. Pour plus d'informations, voir ce guide pour démarrer Chrome avec des options en ligne de commande.

+ +

D'autres options peuvent s'avérer utiles. En lançant Chrome avec --no-first-run, --no-default-browser-check, et --user-data-dir, on peut lancer une instance de Chrome en parallèle d'une autre déjà lancée.

+ +

Par exemple, sur OS X, on peut lancer la commande suivante pour démarrer une instance de Chrome qui soit débogable et qui puisse être séparée des autres instances éventuellement déjà lancées :

+ +
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')
+ +

Effectuer la connexion avec WebIDE

+ +

Sous Firefox, ouvrez WebIDE. Dans WebIDE, cliquez sur « Sélectionner l'environnement » puis sélectionnez « Chrome Desktop » dans le menu déroulant.

+ +

Ensuite, cliquez sur le menu « Ouvrir une application » de WebIDE. Cela affichera une liste des onglets ouverts sur l'instance. Cliquez sur un onglet pour y connecter les outils de développement. Vous pourrez ensuite utiliser la plupart des outils de développement Firefox. À l'heure actuelle, les outils suivants ne sont pas encore supportés :

+ + diff --git a/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..c6f18c479b --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,44 @@ +--- +title: Déboguer Firefox Desktop +slug: Outils/Débogage_distant/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +

{{draft}}

+ +
{{ToolsSidebar}}
+ +
+ +

Ce guide explique comment utiliser des outils de développement de Firefox pour déboguer une instance différente de Firefox pour ordinateur tournant sur la même machine. Dans ce guide, l'instance de Firefox qui sera déboguée sera référencée sous l'appellation le débogué. tournant l’instance qui fait le débogage sera appelé le déboguant.

+ +

Activer le débogage distant

+ +

Tout d'abord, il est nécessaire de s'assurer que le déboguant et le débogué aient tous les deux les options "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant" d'activés dans les options des outils de développement. Si vous utilisez Firefox Developer Edition, les options devraient être activées par défaut.

+ +

+ +

Cette étape n'est nécessaire qu'une seule fois : les valeurs de ces options sont persistantes et resteront les mêmes jusqu'à ce que vous les changiez de nouveau.

+ +

Lancer le serveur de débogage

+ +

Ensuite, il faut lancer le serveur de débogage dans le débogué.

+ +

Depuis Firefox 37 la méthode ci-dessus fonction toujours, mais il existe une alternative : lancez le débogué en ligne de commande avec l'option --start-debugger-server :

+ +
/path/to/firefox --start-debugger-server
+ +

Passée sans argument, --start-debugger-server lance l'écoute sur le port 6000. Pour utiliser un port différent, il faut passer le port désiré :

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Note: Sous Windows, l'appel start-debugger-server n'a qu'un seul tiret :

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Note: Par défaut, et pour des raisons de sécurité, l'option devtools.debugger.force-local est activé. Si vous voulez déboguer une instance de Firefox sur une machine externe, il est possible de changer cette option, mais il est extrêmement recommandé de faire cela que sur un réseau de confiance ou d'avoir au préalable instauré une règle de pare-feu forte pour déterminer quelle machine peut y accéder.

+
diff --git a/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..1c09d2f521 --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -0,0 +1,70 @@ +--- +title: Déboguer Firefox pour Android avec WebIDE +slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +
{{ToolsSidebar}}

Cet article décrit comment connecter les Outils de développement de Firefox de Firefox pour Android à partir de Firefox 36.

+ +

Cela fait un moment qu'il est possible de connecter les outils de développement de Firefox à Firefox pour Android afin de pouvoir déboguer des sites pour mobiles. Cependant, jusqu'à maintenant il s'agissait d'un procédé complexe et prompt à l'erreur. Depuis Firefox 36 le procédé est beaucoup plus simple : en particulier, il n'est plus du tout nécessaire de passer directement par l'outil adb. La connexion se fait maintenant par WebIDE, qui lui s'occupe d'adb.

+ +
+

Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour connecter les outils de développement à Firefox pour Android.

+
+ +

 

+ +

+ +

Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.

+ +

Prérequis

+ +

Tout d'abord, vous aurez besoin d'avoir :

+ + + +

ADB Helper

+ +

Votre Firefox Desktop doit également posséder le module complémentaire ADB Helper version 0.7.1 ou plus récent. Ce module devrait s'être installé automatiquement à la première ouverture de WebIDE. Pour vérifier la version, tapez about:addons dans la barre d'adresse du navigateur et ADM devrait être listé.

+ +

Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :

+ +

Cliquez sur "désinstaller", puis sur  "installer", et vous devriez maintenant avoir la dernière version.

+ +

Configurer l'appareil Android

+ +

Tout d'abord, activez le débogage USB en suivant les étapes2 et 3 de ce lien et uniquement ce lien.

+ +

Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis  "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :

+ +

+ +

Le navigateur peut alors afficher une notification vous rappelant de configurer le "port forwarding", ignorez cette notification.

+ +

Connexion

+ +

Connectez l'appareil Android à l'ordinateur grâce au câble USB, ouvrez WebIDE, et dans le panneau "Environnement", vous verrez un Firefox pour Android dans la catégorie "Périphériques USB" :

+ +

+ +

Sélectionnez-le. Sur l'appareil Android, le message d'avertissement suivant apparait :

+ +

+ +

Cliquez sur OK. Maintenant, cliquez sur "Ouvrir une application" dans le menu de WebIDE? Vous verrez alors une liste des onglets ouverts sur l'appareil :

+ +

+ +

Sélectionnez un onglet pour y attacher les outils de développement :

+ +

+ +

Maintenant, vous devriez pouvoir utiliser tous les outils de développement de Firefox qui supporte le débogage distant. Voir la page débogage distant pour plus de détails.

diff --git a/files/fr/tools/remote_debugging/index.html b/files/fr/tools/remote_debugging/index.html new file mode 100644 index 0000000000..bc7965065b --- /dev/null +++ b/files/fr/tools/remote_debugging/index.html @@ -0,0 +1,20 @@ +--- +title: Débogage distant +slug: Outils/Débogage_distant +tags: + - Outils +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}
+ +

Il est possible d'utiliser les outils de développement de Firefox de votre ordinateur pour déboguer des sites et des applications web tournant dans d'autres navigateurs ou environnements d'exécution. Les autres navigateurs peuvent être sur le même appareil que les outils ou sur un appareil différent, tel qu'un téléphone connecté en USB.

+ +

Les instructions détaillées pour connecter les outils de développement dépendent de l’environnement d'exécution.

+ +

Il est possible de connecter les outils de développement aux environnements d'exécution Gecko tels que : Firefox sur ordinateur, Firefox pour Android, et Thunderbird.

+ + diff --git a/files/fr/tools/remote_debugging/thunderbird/index.html b/files/fr/tools/remote_debugging/thunderbird/index.html new file mode 100644 index 0000000000..cf55624731 --- /dev/null +++ b/files/fr/tools/remote_debugging/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Débogage distant de Thunderbird +slug: Outils/Débogage_distant/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +
{{ToolsSidebar}}

Ce guide décrit comment utiliser le débogage distant pour inspecter et déboguer du code dans Thunderbird.

+ +

De nombreux outils de développeent sont compatibles avec Thunderbird en utilisant de mécanisme de connexion à distante de Firefox. Les outils actuellement compatibles sont : La Console Web, l'Inspecteur, le Débogeur, l'Éditeur de Style, Performance, et Réseau. D'autres outils seront disponibles dans le futur.

+ +

Configurer Thunderbird

+ +

Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu Outils dans la barre d'outils  (alt + Outils) et en sélectionnant Activer le débogage distant. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence devtools.debugger.remote-port.

+ +

Configurer Firefox

+ +

Firefox agit comme le client et fournit l'interface utilisateur pour contrôler les outils de développement pour Thunderbird. Il est recommandé d'utiliser une version de Firefox et Thunderbird majeure, mais dans certains cas, cela fonctionnera avec d'autres versions.

+ +

Pour configurer Firefox, il faut activer l'option "Activer le débogage distant" dans les options des outils de développement. Pour cela, il faut ouvrir la boite à outils, cliquer sur l'icône "Options" button dans la barre d'outils, et cocher "Activer le débogage distant" :

+ +

+ +

Vous pouvez maintenant ouvrir la page de connections de Firefox en passant par le menu outils :

+ +

+ +

Un page s'ouvrira alors dans le navigateur, il est possible de l'ajouter aux favoris. Dans le cas ou le port est celui par défaut, les champs seront déjà remplis correctement. Cliquez sur le bouton de connexion pour initialiser la connexion distante. Si vous avez changé le port par défaut, rentrez le port que vous avez choisi dans le champ approprié.

+ +

+ +

Vous serez ensuite présenté avec une liste d'onglets et de processus distants. Comme la notion d'onglets de Thunderbird n'est pas la même que celle de Firefox, les onglets distants qui sont affichés sont les éléments xul:browser dans Thunderbird. Cela peut être un onglet à contenu, ou le lecteur de message. Dans la plupart des cas cependant, vous voudrez sélectionner "Processus principal" pour déboguer le code de Thunderbird lui-même. Une nouvelle fenêtre s'ouvre alors avec les outils de développement connectés à l'instance de Thunderbird.

+ +

+ +

Utiliser les outils de développement

+ +

L'utilisation des outils de développement est explicite. Si vous avez des problèmes avec un outil en particulier, jetez un oeil à la documentation des outils de développement. Du faite de la nature distante de la connexion, il peut y avoir quelques menues différences. Certains outils peuvent ne pas être disponibles, et il est également possible que la performance ne soit pas la même. Par exemple utiliser l'outil Débogeur prend pas mal de temps à charger, car les fichiers doivent être transférés par une connexion réseau interne.

+ +

Résolution des problèmes

+ +

Si vous rencontrez une erreur, la première chose à faire est de vérifier que les numéros de version de Firefox et Thunderbird sont les mêmes : si vous utilisez Firefox 24, vous devriez utiliser également Thunderbird 24. Ensuite, il est important de savoir si le problème vient des outils de développement ou du code distant dans Thunderbird. Pour vérifier cela, essayez de reproduire le problème en utilisant uniquement Firefox. Par exemple si vous vous rendez compte que vous ne pouvez pas modifier un attribut dans l'Inspecteur, essayez de changer un attribut dans Firefox. SI vous ne pouvez pas le reproduire, déclarez un bug dans le produit Thunderbird, sinon, déclarez un bug dans les outils de développement de Firefox.

diff --git a/files/fr/tools/responsive_design_mode/index.html b/files/fr/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..e9de1226c9 --- /dev/null +++ b/files/fr/tools/responsive_design_mode/index.html @@ -0,0 +1,213 @@ +--- +title: Vue adaptative +slug: Outils/Vue_adaptative +tags: + - Firefox + - Mobile + - Responsive Design + - Tools + - Web Development +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +

Le responsive design (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).

+ +

Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.

+ +

Activation et désactivation du mode de vue adaptative

+ +

Il existe trois façons d’activer la vue adaptative :

+ + + +

Utiliser la vue adaptative

+ +

Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.

+ +
+

Note: L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.

+
+ +

 

+ +

+ +

 

+ +

Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :

+ +

Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.

+ +

Sélectionner un appareil

+ +

Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :

+ + + +

En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

+ +

Sauvegarder des appareils personnalisés

+ +

Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :

+ + + +

Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.

+ +

+ +

Contrôler les appareils

+ +

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

+ +

Modifier la taille d'écran

+ +

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

+ +

+ +

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

+ +

Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.

+ +

Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.

+ +

Modifier le ratio pixel de l'appareil

+ +

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

+ +

Activer/désactiver la simulation du touch

+ +

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

+ +

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

+ +

Contrôler le comportement de rechargement de page

+ +

Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :

+ +

+ +

Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :

+ + + +

Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.

+ +

Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.

+ +

Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :

+ +

+ +

Activer/désactiver l'orientation

+ +

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

+ +

+ +

Bridage réseau

+ +

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

+ +

Les caractéristiques émulées sont :

+ + + +

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélectionVitesse de téléchargementVitesse d'uploadLatence minimum (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

+ +

Prendre une capture d'écran

+ +

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

+ +

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

+ +

Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.

diff --git a/files/fr/tools/rulers/index.html b/files/fr/tools/rulers/index.html new file mode 100644 index 0000000000..fc08120e48 --- /dev/null +++ b/files/fr/tools/rulers/index.html @@ -0,0 +1,27 @@ +--- +title: Règles +slug: Outils/Rulers +translation_of: Tools/Rulers +--- +
{{ToolsSidebar}}
+ +

Il est possible de superposer des règles verticales et horizontales dans une page web :

+ +

Les unités sont en pixels.

+ +

Les dimensions de la fenêtre sont affichées en haut en droite de celle-ci.

+ +

Pour pouvoir utiliser cet outil, il est nécessaire d'activer son bouton dédié en cochant la case "Afficher/Masquer les règles pour la page" dans la catégorie "Boutons de la boîte à outils" des options des outils de développement.

+ +

+ +

Une fois activé le bouton "Afficher/Masquer les règles pour la page" apparait en haut à droite de la barre d'outils à coté du bouton des options.

+ +

+ +

Comportements à garder à l'esprit lors de l'utilisation des règles :

+ + diff --git a/files/fr/tools/settings/index.html b/files/fr/tools/settings/index.html new file mode 100644 index 0000000000..485f527522 --- /dev/null +++ b/files/fr/tools/settings/index.html @@ -0,0 +1,168 @@ +--- +title: Options +slug: Outils/Settings +translation_of: Tools/Settings +--- +
{{ToolsSidebar}}
+ +

Ouvrir les options

+ +

À partir de Firefox 62, l'icône pour afficher les options des outils de développement a été déplacé dans un menu accessible en cliquant sur les "..." tout à droite de la fenêtre :

+ +

+ +

Ce menu inclut les options d'emplacement des outils. Il est possible de les afficher en bas, à droite, à gauche, ou bien dans une fenêtre séparée.

+ +

Le menu inclut également l'option "Afficher la console scindée" qui permet d'ajouter la Console Web en bas de n'importe quel autre outil. Cela permet d'afficher une ou deux lignes de messages, et surtout de rendre disponible la ligne de commande.

+ +

+ +

La dernière option, l'option "paramètres" affiche les autres options des outils de développement. Cela ressemble à ceci :

+ +

Depicts the Toolbox options

+ +

Catégories

+ +

Outils de développement par défaut

+ +

Ce groupe de cases à cocher détermine quels outils sont activés dans la boit à outils. Les nouveaux outils sont souvent inclus dans Firefox, mais ne sont pas activés par défaut.

+ +

Boutons de la boite à outils

+ +

Ce groupe de cases à cocher détermine quels outils possèdent une icône dans la barre d'outils.

+ +

Depuis Firefox 62, si l'option "Sélectionner un iframe en tant que document cible" est activée, l'icône apparaitra dans la barre d'outils, et ce même si la page ne contient aucun iframe.

+ +

Il est à noter que depuis Firefox 52 l'option "Sélectionner un élément" a été supprimée. Le bouton "Sélectionner un élément" est maintenant toujours présent.

+ +

Thèmes

+ +

Cette option permet de choisir un des deux thèmes :

+ + + +

Préférences générales

+ +

Ce sont les options qui s'appliquent à plusieurs outils. Il n'y a qu'une seule option :

+ +
+
Activer les journaux persistants
+
Elle sert à contrôler si les outils Console et Réseau vident leur contenu lors d'un changement de page.
+
+ +
+

Si les préférences générales ne sont pas incluses dans les options, les journaux persistants peuvent être activés en utilisant l'url 'about:config' du navigateur et passer la clé 'devtools.webconsole.persistlog' à true

+
+ +

Inspecteur

+ +
+
Afficher les styles du navigateur
+
Contrôle les styles appliqués par le navigateur (user-agent styles) doivent être affichées dans la vue des Règles. Il est à noter que cette option est indépendante de l'option "Styles navigateur" dans la vue "Calculé".
+
Tronquer les attributs DOM
+
Par défaut, l'Inspecteur tronque les attributs DOM de plus de 120 caractères. Décocher cette case empêche ce comportement. Cette option fonctionne en activant/désactivant la préférence "devtools.markup.collapseAttributes dans la page about:config. Pour changer la limite de caractères, il est possible d'éditer la préférence "devtools.markup.collapseAttributeLength", toujours dans la page about:config.
+
Unité par défaut pour les couleurs
+
Cette option permet de contrôler l'unité des couleurs représentées dans l'Inspecteur. Les différentes valeurs sont : +
    +
  • Hex
  • +
  • HSL(A)
  • +
  • RGB(A)
  • +
  • noms de couleur
  • +
  • unité d'origine
  • +
+
+
+ +

Console web

+ +
+
Activer l'horodatage
+
Contrôle si la Console affiche les timestamp. Par défaut cette option n'est pas activée.
+
Enable new console frontend (l'option n'est pas traduite dans les outils de développement)
+
Active la nouvelle Console expérimentale. Cette option n'est disponible que dans Firefox Nightly
+
+ +

Débogueur

+ +
+
Afficher les sources originales
+
Activer le support des source map dans le Débogueur.
+
Enable new debugger frontend (l'option n'est pas traduite dans les outils de développement)
+
Active le nouveau Débogueur. Enable the new debugger. Cette option n'est disponible que dans Firefox Nightly
+
+ +

Éditeur de style

+ +
+
Afficher les sources originales
+
Lorsqu'un préprocesseur supportant les sources maps est utilisé, cette option permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. Vous pouvez en apprendre plus sur le support des sources maps CSS ici.. Lorsque cette option est activée la vue des règles de l'Inspecteur affichera également un lien vers les sources originales.
+
Compléter automatiquement le CSS
+
Autorise l'Éditeur de style à offrir des suggestions d'autocomplétion.
+
+

Comportement pour les captures d'écran

+
+
Enregistrer dans le presse-papiers
+
Copie l'image dans le presse papier lors d'un clic sur l'outil Capture d'écran (l'image sera également enregistrée dans le dossier Téléchargement). Nouveau dans Firefox 53.
+
Jouer un son d'obturateur d'appareil photo
+
Lors d'un clic sur l'outil Capture d'écran, un son sera joué. Nouveau dans Firefox 53.
+
+ +

Préférences de l'éditeur

+ +

Préférences de l'éditeur de code source CodeMirror, qui est inclut dans Firefox et utilisé dans plusieurs outils de développement (incluant l'Ardoise JavaScript et l'Éditeur de style.

+ +
+
Détecter l'indentation
+
indenter automatiquement les nouvelles lignes en se basant sur l'indentation actuelle..
+
Fermer automatiquement les parenthèses et les accolades
+
Détermine si rentrer un caractère ouvrant comme [ ou { causera l'éditeur à insérer automatiquement un caractère fermant comme ] ou }.
+
Indenter à l'aide d'espaces
+
Si coché, l'indentation sera faite en utilisant des espaces, si désactivé, l'indentation sera faite en utilisant des tabulations.
+
Taille des tabulations
+
La taille des tabulations dans l'éditeur. Les options possibles sont 2, 4, ou 8.
+
Raccourcis clavier
+
Permet de choisir les raccourcis clavier par défaut de CodeMirror, il y a le choix entre : +
    +
  • Vim
  • +
  • Emacs
  • +
  • Sublime Text
  • +
+
+
+ +

Paramètres avancés

+ +
+
Afficher les données de la plate-forme Gecko
+
Cette option sert à contrôler si les profils doivent inclure des symboles de la plateforme Gecko ou non.
+
+ +
+
Désactiver le cache HTTP
+
Désactive le cache HTTP pour simuler les performances du premier chargement. Cela s'applique à tout les onglets qui ont la boite à outils ouverte. Cette option est persistante, cela veut dire que si elle est activée, la mise en cache sera désactivée à chaque réouverture des outils de développement. La mise en cache est automatiquement réactivée lorsque les outils de développement sont fermés. Il est à noter que les service workers ne sont pas affectés par cette option. +
Note : Cette option était appelée "Désactiver le cache" dans les versions antérieures à Firefox 49. Elle a été renommée afin de rendre plus explicite le fait que cette option n'affecte que le cache HTTP et pas les Service Workers ou le Cache API.
+
+
Désactiver le JavaScript
+
Recharge la page actuelle avec le JavaScript désactivé.
+
Activer les Service Workers via HTTP
+
Autorise les enregistrements de Service Worker depuis des sites web non sécurisés.
+
Activer le débogage du chrome du navigateur et des modules
+
Permet d'utiliser les outils de développement dans le contexte du navigateur lui-même au lieu du contenu web uniquement.
+
Activer le débogage distant
+
Autorise le débogage des instances de Firefox distantes.
+
Activer le débogage des workers
+
Active un panneau dans le Débogueur pour déboguer les workers. +

Note: Cette option a été supprimée de l'interface utilisateur dans Firefox 56, car cette version contient une nouvelle interface utilisateur du Débogueur, l'option peut toujours être activée pour l'ancienne interface en passant la préférence devtools.debugger.workers à true dans (about:config).

+
+
diff --git a/files/fr/tools/shader_editor/index.html b/files/fr/tools/shader_editor/index.html new file mode 100644 index 0000000000..013fd7da49 --- /dev/null +++ b/files/fr/tools/shader_editor/index.html @@ -0,0 +1,63 @@ +--- +title: Éditeur de Shaders +slug: Outils/Editeur_de_shaders +tags: + - Tools + - Web Development +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}
+ +
+

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

+
+ +

L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par WebGL

+ +

{{EmbedYouTube("hnoKqFuJhu0")}}

+ +

WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du  processus d’affichage d'OpenGL Le premier shader est un vertex shader, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un fragment shader qui fournit la couleur de chaque pixel qui doit être affiché.
+
+ Ces shaders sont codés dans le langage OpenGL Shading, ou GLSL. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.

+ +

Avec l'Éditeur de Shaders il est possible d’examiner et d'éditer la sources de vertex shaders et de fragment shaders.

+ +

Voici une autre vidéo montrant comment utiliser l'Éditeur de Shader pour des applications complexes (dans ce cas, la démo l'Unreal Engine) :

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Ouvrir l'Éditeur de Shaders

+ +

L'Éditeur de Shaders est désactivé par défaut. Pour l'activer, il faut ouvrir les paramètres de la Boite à Outils et cocher "Éditeur de shaders" dans la section "Outils de développement par défaut". L'Éditeur de Shaders apparaitra alors dans la barre d'outils de la Boite à Outils. Cliquez dessus pour ouvrir l'Éditeur de Shaders.

+ +


+ Au début il y a qu'une fenêtre vide avec un bouton demandant de recharger la page :

+ +

+ +

Pour commencer, il faut charger une page qui crée un contexte WebGL et charge un programme dedans. Les captures d'écran ci-dessous sont tirées de la démo de l'Unreal Engine.

+ +

Une fenêtre apparait alors divisée en trois panneaux : une liste de tous les programmes GLSL sur la gauche, le vertex shader en cours du programme sélectionné au milieu et le fragment shader en cours du programme sélectionné sur la droite :

+ +

+ +

Gérer les programmes

+ +

Le panneau de gauche liste tous les programmes utilisés par le contexte WebGL. En survolant un élément dans la liste, la figure géométrique affichée par le programme est coloré en rouge vif :

+ +

Cliquer sur l’icône en forme d'œil sur la gauche d'un programme désactivera ce programme. Ceci est pratique pour se concentrer sur certains shaders ou pour cacher des éléments qui se superposent :

+ +

+ +

Si vous cliquez sur un programme, ses vertex et fragment shaders sont affichés dans les deux autres panneaux et vous pouvez les modifier.

+ +

Modifier des shaders

+ +

Cliquer sur un programme affichera son vertex shader (panneau du milieu) et son fragment shader (panneau de droite), il sera alors possible de les modifier.
+ Les changements réalisés seront visibles lors du ré-affichage du contexte WebGL (par exemple lors de la prochaine frame). Il est par exemple possible de modifier des couleurs :

+ +

L'éditeur met en surbrillance les erreurs dans le code :

+ +

Survoler la croix affiché à coté d'une ligne contenant une erreur montrera plus de détails sur le problème :

+ +

diff --git a/files/fr/tools/style_editor/index.html b/files/fr/tools/style_editor/index.html new file mode 100644 index 0000000000..dfbd8fb61f --- /dev/null +++ b/files/fr/tools/style_editor/index.html @@ -0,0 +1,113 @@ +--- +title: Éditeur de Style +slug: Outils/Éditeur_de_style +tags: + - CSS + - Stylesheets + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}
+ +

L'Éditeur de Style permet de :

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Pour ouvrir l'Éditeur de Style, choisissez l'option "Éditeur de Style" du menu "Développement Web" (qui lui-même est un sous-menu du menu "Outils"). La Boite à outils apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :

+ +

+ +

L'Éditeur de Style est divisé en trois grandes parties :

+ + + +

Le panneau des feuilles de style

+ +

Le panneau des feuilles de style sur la gauche, liste toutes les feuilles de style utilisées par le document actuel. Vous pouvez Activer/Désactiver rapidement l'affichage d'une feuille en cliquant sur l’icône en forme d'œil à gauche de son nom. Vous pouvez sauvegarder toutes les modifications de la feuille de style sur votre ordinateur en cliquant sur le bouton "Enregistrer" situé en bas à droite de chaque feuille dans la liste.

+ +

Depuis Firefox 40, le panneau des feuilles de styles inclut également un menu contextuel qui permet d'ouvrir la feuille de style sélectionnée dans un nouvel onglet.

+ +

Le panneau d'édition

+ +

Le panneau d'édition est au centre. C'est là que le code source de la feuille de style sélectionnée peut être lu et édité. Toutes les modifications sont automatiquement appliquées à la page. Ceci rend facile l'expérimentation, les corrections et les tests. Quand vous êtes satisfait(e) de vos modifications, vous pouvez sauvegarder une copie locale en cliquant sur le bouton sauvegarder de la feuille dans le panneau des feuilles de style.

+ +

L'éditeur affiche les numéros de ligne et la coloration syntaxique pour vous aider et rendre la lecture de vos CSS plus facile. Il supporte aussi une partie des raccourcis clavier.

+ +

L'Éditeur de Style dé-minimifie automatiquement les feuilles de style qu'il détecte, sans altérer le fichier original. Ce qui rend le travail sur des pages optimisées beaucoup plus facile.

+ +

L'Éditeur de Style supporte l’autocomplétion. Commencez simplement à taper et il vous affichera une liste de suggestions :

+ +

Vous pouvez désactiver cette fonctionnalité dans les Paramètres de l'Éditeur de Style.

+ +

Le volet média

+ +

L'éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des règles @media. Le volet liste les règles et fournit un lien vers la ligne de la feuille de style définissant la règle. Cliquez sur une des entrées pour basculer sur la règle. La règle est affichée grisée, si la média query n'est pas actuellement appliquée.

+ +

+ +

Le volet média est très utile quand associé à la Vue adaptative pour créer et déboguer des mises en pages responsive :

+ +

{{EmbedYouTube("aVUXmvLSwoM")}}

+ +

Depuis Firefox 46, si une règle @media contient une taille d'écran dans une condition, alors il est possible de cliquer dessus. Cela redimensionne l'écran à la taille en question en utilisant la Vue Adaptative :

+ +

{{EmbedYouTube("XeocxoW2NYY")}}

+ +

Créer et importer des feuilles de style.

+ +

Vous pouvez créer une nouvelle feuille de style en cliquant sur le bouton "Nouveau" dans la barre d'outils. Puis vous pouvez commencer à écrire du CSS dans le nouvel éditeur et observer comment les nouveaux styles s'appliquent en temps réel de la même manière que les modifications sur les autres feuilles.

+ +

Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"

+ +

Support de "Source map"

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Les développeurs web créent souvent des fichiers CSS en utilisant un préprocesseur comme Sass, Less, ou Stylus. Ces outils génèrent des fichiers CSS depuis une syntaxe plus riche et plus déclarative. Ainsi, être capable de modifier le CSS généré n'est pas très utile, car le code maintenu est le code écrit dans la syntaxe du préprocesseur, pas le CSS généré. Il faudrait alors éditer le CSS généré puis se débrouiller pour réappliquer manuellement les changements au code source d'origine.

+ +

Les "Source maps" permettent aux outils de remonter depuis le CSS généré jusqu’à la syntaxe d'origine, pour pouvoir afficher et donner la possibilité d'éditer les fichiers dans la syntaxe d'origine. Depuis Firefox 29, l'Éditeur de style peut comprendre les "CSS source maps".

+ +

Cela veut dire que si vous utilisez par exemple Sass, l'éditeur affichera et permettra d'éditer les fichiers Sass plutôt que le CSS généré grâce à eux.

+ +

Pour que cela fonctionne, il est nécessaire de :

+ + + +

Voir les sources d'origine

+ +

Si vous activez "Montrer les sources d'origine" dans les options de l'Éditeur de Style, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.

+ +

Depuis Firefox 35, les sources originales sont affichées par défaut.

+ +

Éditer les sources d'origine

+ +

Il est également possible d'éditer les sources d'origine dans l'Éditeur de style et voir les résultats appliqués à la page immédiatement. Pour que cela fonctionne, il y a deux étapes supplémentaires.

+ +

Premièrement, configurer le préprocesseur pour qu'il surveille les sources d'origine et régénère automatiquement le CSS. Quand les sources changent. Avec Sass c'est possible simplement en passant le paramètre --watch :

+ +
sass index.scss:index.css --sourcemap --watch
+ +

Deuxièmement, il faut sauvegarder les sources d'origine dans l'Éditeur de Style. en cliquant sur le bouton "Enregistrer" à côté du fichier CSS.

+ +

Il est alors possible de faire des modifications du fichier source dans l'Éditeur de Style, le CSS est régénéré automatiquement et les changements sont visibles immédiatement.

+ +

Raccourcis clavier

+ +

Éditeur de source

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/fr/tools/taking_screenshots/index.html b/files/fr/tools/taking_screenshots/index.html new file mode 100644 index 0000000000..5e1fda8c8f --- /dev/null +++ b/files/fr/tools/taking_screenshots/index.html @@ -0,0 +1,48 @@ +--- +title: Taking screenshots +slug: Outils/Taking_screenshots +tags: + - Outils +translation_of: Tools/Taking_screenshots +--- +
{{ToolsSidebar}}
+ +

Il est possible d'utiliser les outils de développement pour prendre une capture d'écran de la page entière, ou d'un unique élément de la page.

+ +

Prendre une capture d'écran de la page

+ +

Utilisez le bouton de capture d'écran: pour prendre une capture d'écran en pleine page de la page actuelle.

+ +

Par défaut, le bouton de capture d'écran n'est pas activé. Pour l'activer :

+ + + +

Vous verrez dorénavant le bouton dans la barre d'outils :

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Cliquez sur le bouton pour faire une capture d'écran de la page en cours. La capture est enregistrée dans le dossier « Téléchargements » de votre navigateur.

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Prendre la capture d'écran d'un élément

+ +

Pour prendre une capture d'écran d'un seul élément dans la page, activez le menu contextuel de cet élément dans le panneau HTLM, et sélectionnez « Prendre une capture du nœud ». La capture d'écran est enregistrée dans le dossier « Téléchargements » du navigateur :

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copier des captures d'écran dans le presse-papier

+ +

Dans Firefox 53, il est possible de copier la  capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Maintenant, dès que vous effectuerez une capture d'écran, celle-ci sera automatiquement copiée dans le presse-papier.

+ +

Options additionnelles

+ +

Depuis Firefox 62, il est possible de préciser un ratio-pixel, de mettre un délai avant la capture, ou de spécifier le nom du fichier. Pour cela, il faut utiliser la fonction d'aide :screenshot dans la Console Web.

diff --git a/files/fr/tools/tips/index.html b/files/fr/tools/tips/index.html new file mode 100644 index 0000000000..45a45cf7c1 --- /dev/null +++ b/files/fr/tools/tips/index.html @@ -0,0 +1,129 @@ +--- +title: Astuces +slug: Outils/Tips +tags: + - Dev Tools + - Développement Web + - Outils + - outils de développement +translation_of: Tools/Tips +--- +
{{ToolsSidebar}}
+ +

Géneral

+ +

Capture d'écran:

+ + + +

Paramètres:

+ + + +

Inspecteur de page

+ +

Dans l'onglet Inspecteur:

+ + + +

Lors de la sélection des éléments:

+ + + +

Dans la vue des règles CSS:

+ + + +

Console web

+ +

Dans tous les onglets:

+ + + +

Dans la ligne de commande:

+ + + +

Dans la sortie de la console:

+ + + +

Débogueur

+ + + +

Éditeur de feuilles de style CSS

+ + + +

Réseau

+ + + +

Stockage

+ + diff --git a/files/fr/tools/tools_toolbox/index.html b/files/fr/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..5b5987fc71 --- /dev/null +++ b/files/fr/tools/tools_toolbox/index.html @@ -0,0 +1,102 @@ +--- +title: Boite à Outils +slug: Outils/Outils_boite_à_outils +tags: + - Toolbox + - Tools +translation_of: Tools/Tools_Toolbox +--- +
{{ToolsSidebar}}
+ +

La boîte à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit.

+ +

Vous pouvez l'ouvrir de plusieurs façons :

+ + + +

Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :

+ +

Cette fenêtre est séparée en deux parties : la barre d'outils en haut et la partie principale en dessous :

+ +

+ +

Mode d'ancrage

+ +

Par défaut, la boîte à outils apparait ancrée en bas de la fenêtre du navigateur. Mais il est possible de l'ancrer sur la droite du navigateur, ou de la faire apparaitre dans sa propre fenêtre. Pour cela il faut utiliser les boutons de la barre d'outils.

+ +

Barre d'outils

+ +

La barre d'outils contient les boutons pour activer les outils, pour attacher, détacher ou fermer la boîte à outils.

+ +

+ +

Le sélecteur d'élément

+ +

Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir "Sélectionner un élément".

+ +

Outils de la boîte à outils

+ +

Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Boîte à outils. La barre peut contenir les boutons suivants :

+ + + +

Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple : tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).

+ +

Outils supplémentaires

+ +

La barre de boutons à gauche de la barre d'outils peut être personnalisée dans les options de développement. Par défaut, elle inclut :

+ + + +

Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les options :

+ + + +

Contrôles de la boîte à outils :

+ +

Grâce à ces boutons il est possible de :

+ + + +

Options

+ +

Voir la page sur les options des outils de développement.

+ +

Panneau principal

+ +

Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par, et est spécifique à l'outil actuellement sélectionné.

+ +

Raccourcis clavier

+ +

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

+ +

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

diff --git a/files/fr/tools/validators/index.html b/files/fr/tools/validators/index.html new file mode 100644 index 0000000000..d2a3c64358 --- /dev/null +++ b/files/fr/tools/validators/index.html @@ -0,0 +1,71 @@ +--- +title: Validateurs +slug: Outils/Validateurs +tags: + - Tools +translation_of: Tools/Validators +--- +
{{ToolsSidebar}}

Ce document liste les différentes ressources aidant les développeurs à valider leurs pages web.

+ +
Les onglets de la barre latérale ne sont pas encore disponibles.
+L'assistant de mise en conformité renverra vers Devedge
+
+ +

Si vous écrivez du code qui ne valide pas, regardez du côté des outils respectueux des standards et des outils de développement.

+ +

Extension Firefox pour la validation

+ +

Panneau des références rapides pour la barre latérale

+ +

Installez le panneauDevEdge Toolbox pour la barre latérale pour accéder rapidement aux références rapides de développement Web.

+ +

Checky

+ +

Checky ajoute un sous-menu au menu contextuel de Netscape, de Mozilla, et de Firefox qui permet d'accéder rapidement à l'un des 18 services de validation et d'analyse actuellement en service.

+ +

Applications et Services

+ +

Assistant de mise en conformité Web de DevEdge

+ +

Cette interface des services du W3C guide les développeurs Web débutants à travers tout le processus de mise en conformité d'un contenu pour le support de Netscape 7.x, Mozilla et de tous les autres navigateurs respectueux des standards du W3C.

+ +

Validateur HTML du W3C

+ +

Le validateur HTML du W3C permet de valider une page Web selon les HTML standards du W3C. Il est particulièrement utile pour détecter les balises propriétaires aussi bien que le code HTML non valide.

+ +

Validateur CSS du W3C

+ +

La validateur CSS du W3C permet de valider les CSS contenues dans une page Web ou d'un fichier externe, selon les standards CSS du W3C.

+ +

Validateur RDF du W3C

+ +

Le service de validation RDF permet de valider le code RDF/XML contenu dans une URI.

+ + + +

Cet outil vérifie la validité des liens d'un page Web.

+ +

HTML Tidy

+ +

HTML Tidy est un outil qui peut être utiliser pour rapporter les erreurs de codage d'une page HTML et formater ce code pour une plus grande lisibilité (certains outils de développement Web, tels que HTML-Kit, intègrent HTML Tidy ce qui rend plus rapide et plus facile la validation).

+ +

Validation JavaScript

+ +

JSLint (externe)

+ +

Services d'accessibilité

+ +

Lynx Viewer

+ +

Vérifie une page Web en utilisant la visualisation Lynx et permet la validation des mesures d'accessibilité.

+ +
+

Informations sur le document original

+ + +
+ +

Interwiki Languages Lin

diff --git a/files/fr/tools/view_source/index.html b/files/fr/tools/view_source/index.html new file mode 100644 index 0000000000..9605a917b1 --- /dev/null +++ b/files/fr/tools/view_source/index.html @@ -0,0 +1,79 @@ +--- +title: Affiche le Code source +slug: Outils/View_source +translation_of: Tools/View_source +--- +
{{ToolsSidebar}}
+ +

"Code source de la page" permet de visualiser le code HTML ou XML de la page. Pour activer cet outil, il faut :

+ + + +

Avant Firefox 42, Une nouvelle fenêtre s'ouvre alors pour afficher le code source de la page.

+ +

Depuis Firefox 42, cet outil ouvrira par défaut un nouvel onglet (à la place d'une fenêtre). Pour changer cette préférence, il faut passer la variable view_source.tab à false dans about:config.

+ +

Depuis Firefox 60 la préférence view_source.tab a été supprimée ({{bug(1418403)}}), il n'est donc plus possible de changer le mode d'ouverture, les sources s'ouvriront toujours dans un nouvel onglet.

+ +

Fonctionnalités

+ +

Cet outil possède trois fonctionnalités supplémentaires. Celles-ci depuis Firefox 40 peuvent être utilisées via le menu contextuel dans l'onglet du code source :

+ + + +

Lorsque la coloration syntaxique est activée, l'outil met également les erreurs de parsage en surbrillance rouge. Survoler les messages d'erreurs affiche une infobulle expliquant l'erreur.

+ +

Pour utiliser la fonctionnalité aller à la ligne avec le clavier, il suffit d'utiliser le raccourci clavier Alt + Shift + L sur Windows et Linux ou Control + Option + L sur Mac.

+ +

Lien vers un numéro de ligne

+ +

Il est possible de faire un lien vers une ligne en particulier. Il suffit d'ajouter l'ancre #lineNNN dans l'URL du navigateur pour sauter à la ligne NNN.

+ +

Par exemple : view-source:https://www.mozilla.org/#line100

+ +

Code source de la sélection

+ +

Si une partie de la page est sélectionnée, alors l'option "Code source de la sélection" est disponible dans le menu contextuel de la page. Le comportement est le même que pour "Code source de la page" sauf que la partie du code source affiché ne sera que celle correspondant à la sélection.

+ +

Code MathML de la sélection

+ +

Si la souris survole du code MathML lors d'un clic droit, alors l'option "Code MathML de la sélection" est disponible, il sert à visualiser le code MathML.

+ +

Limitations

+ +

Il existe des limitations à l'outil qu'il faut connaitre :

+ +

Le reporteur d'erreurs n'est PAS un validateur

+ +

L'outil ne reporte que les erreurs de parsing, PAS les erreurs de validité HTML. Par exemple mettre un élément {{ HTMLElement("div") }} en enfant d'un élément {{ HTMLElement("ul") }} n'est pas une erreur de parsing, mais ce n'est pas de l'HTML valide ! Cette erreur n'apparaitra donc pas dans l'outil. Pour valider un code HTML, il est nécessaire d'utiliser un validateur HTML tel que celui proposé par le W3C.

+ +

Toutes les erreurs de parsing ne sont pas supportées

+ +

Même si toutes les erreurs affichées sont des erreurs de parsing, toutes les erreurs de parsing ne sont pas affichées. Parmi celles qui ne sont pas supportées, on retrouve :

+ + + +

Coloration syntaxique XML

+ +

L'outil utilise le HTML tokenizer lorsqu'il met en surbrillance le code XML. Bien que le tokenizer supporte les processing instructions lors de la coloration de code XML, il s'agit de la seule fonctionnalité orientée XML fournie. À cause de cela, les doctypes qui ont un sous-ensemble interne ne sont pas colorés correctement, et les références d'entités des entités personnalisées ne sont pas non plus colorées correctement.

+ +

Cette mauvaise coloration peut être observée en regardant le code source des fichiers chrome de Firefox (tel que les documents XUL). Cependant, cela ne devrait pas être un problème pour analyser des fichiers XML ordinaires.

+ +

A voir également

+ + diff --git a/files/fr/tools/web_audio_editor/index.html b/files/fr/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..116b495b29 --- /dev/null +++ b/files/fr/tools/web_audio_editor/index.html @@ -0,0 +1,71 @@ +--- +title: Éditeur Web Audio +slug: Outils/Editeur_Web_Audio +tags: + - Tools +translation_of: Tools/Web_Audio_Editor +--- +
{{ToolsSidebar}}
+ +
+

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

+
+ +

Avec l'API Web Audio, les développeurs peuvent créer un {{domxref ("AudioContext", "contexte audio")}}. Dans ce contexte, ils peuvent créer différents {{domxref ("AudioNode", "nœuds audio")}} comme :

+ + + +

Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété gain alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés frequency  et detune.

+ +

Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.

+ +

L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété AudioParam pour chaque nœud du graphique. Quelques propriétés non-AudioParam  comme une propriété OscillatorNode's type, sont également affichées et il est aussi possible de les éditer.

+ +

Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les reportiez dans Bugzilla. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, dev-developer-tools ou Twitter sont de bon endroit pour les partager.

+ +

Ouvrir l'Éditeur Web Audio

+ +

L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les options des outils de développement et cocher l'option "Web Audio".  Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :

+ + + +

Visualiser le graphique

+ +

L'Éditeur Web Audio affiche alors le graphique correspondant au contexte audio chargé. Voici le graphique du contexte audio de la démo Violent Theremin :

+ +

Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.

+ +

Connections aux AudioParams

+ +
+

Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.

+
+ +

Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si un nœud est connecté à un AudioParam d'un autre nœud, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de l'AudioParam :

+ +

Inspecter et modifier les nœuds audio

+ +

Cliquer sur un nœud le mettra en surbrillance et affichera un inspecteur de nœuds sur la partie droite. Cet inspecteur, liste les valeurs des propriétés AudioParam du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :

+ +

Avec la démo Violent Theremin, le paramètre de fréquence est modifié lorsque l'utilisateur bouge la souris, cela se répercute sur l'inspecteur. Malheureusement la valeur n'est pas modifiée en temps réel : il faut cliquer à nouveau sur le nœud pour voir la nouvelle valeur.

+ +

En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur Entrée ou Tabulation, la nouvelle valeur est automatiquement prise en compte.

+ +

Contourner des nœuds

+ +
+

Nouveau dans Firefox 38.

+
+ +

Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :

+ +

Cliquer sur ce bouton modifiera le graphique pour contourner le nœud. Le nœud contourné n'aura alors plus aucun effet et sera affiché avec un fond haché :

+ +

diff --git a/files/fr/tools/web_console/console_messages/index.html b/files/fr/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..6115351784 --- /dev/null +++ b/files/fr/tools/web_console/console_messages/index.html @@ -0,0 +1,469 @@ +--- +title: Console messages +slug: Outils/Console_Web/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +
{{ToolsSidebar}}
+ +

La majorité de la Console Web est occupée par le panneau d'affichage des messages :

+ +

+ +

Chaque message est affiché sur une nouvelle ligne.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TempsLa date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils
Catégorie +

Indique le type de message :

+ +
    +
  • Noir : Requête HTTP
  • +
  • Bleu  : Avertissement/erreur CSS
  • +
  • Orange  : Avertissement/erreur JavaScript
  • +
  • Rouge : Avertissement/erreur de sécurité
  • +
  • Vert : Logs serveur
  • +
  • Gris léger  : Message de l'API Console
  • +
  • Gris foncé : Messages d'entrées/sorties de la ligne de commande JavaScript
  • +
+
TypePour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif
MessageLe message lui-même
Nombre d’occurrencesSi une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée
Nom du fichier et numéro de ligne +

Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.

+ +

Depuis Firefox 36, cela inclut le nombre de colones également.

+
+ +

Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.

+ +

Categories de messages

+ +

Requêtes réseau

+ + + +
+

Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de filtrage pour les afficher.

+
+ + + +

Les requêtes résseau sont affichées sous cette forme :

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TempsLa date et heure à laquelle le message a été enregistré
CatégorieIndique que ce message concerne une requête HTTP
Méthode +

La méthode HTTP utilisée

+ +

Si la requête à été faite avec XMLHttpRequest, il y a une notre aditionelle :

+ +

+
URIL'URI cible
RésuméLa version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer
+ +

Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :

+ +

Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.

+ +

Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.

+ +

Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.

+ +

XHR

+ +

From Firefox 38 onwards, the Web Console indicates when a network request was made as an XMLHttpRequest:

+ +

+ +

Also from Firefox 38 onwards, you can filter the network requests so as to only see XMLHttpRequests.

+ +

Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the filtering feature to show them.

+ +

Erreurs et avertissements JavaScript

+ +

Les messages JavaScript ressemblent à :

+ +

+ +

+ +

Erreurs CSS, avertissements et évènements de reflow

+ +

Les messages CSS ressemblent à ceci :

+ +

+ +

Par défaut, les avertissements CSS ne sont pas affichés.

+ +

Évènements de reflow

+ +

La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.
+ Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.
+
+ Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.
+
+ Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".
+
+ Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :
+
+
+ Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :

+ +


+ Cliquez sur le lien pour ouvrir le fichier dans le Débogueur.

+ +

Reflows synchrones et asynchrones

+ +

Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("computed style") à retourner.

+ +

Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+
+ +

A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.

+ +

Avertissements et erreurs de sécurité

+ +

Les avertissements et les erreurs de sécurité ressemblent à ceci :

+ +

Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.

+ +

La liste complète des messages de sécurité est la suivante :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocage du chargement du contenu mixte actifLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Blocage du chargement du contenu mixte non actifLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte non actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.Voir Content Security Policy pour plus de détails.
Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.Voir Content Security Policy pour plus de détails.
Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.
Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Le site a spécifié un en-tête Strict-Transport-Security invalide.Voir HTTP Strict Transport Security pour plus d'informations
+
+

New in Firefox 36

+
+ +

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+
+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Le Bug 863874 est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.

+ +

Message console API

+ +


+

+ +

Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa page de documentation.

+ +

Messages d'erreurs

+ + + + + + + + + + + + + + + + + + + + + + +
APIContenu du message
error() +

L'argument à  error().

+ +
+console.error("an error");
+ +

A partir de Firefox 31, la console affiche la pile complète des erreurs :

+ +
+function error() {
+  console.error("an error");
+}
+
+function call_error() {
+  error();
+}
+
+call_error();
+ +

+
exception()Un alias de error().
assert() +

Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :

+ +
+console.assert(false, "My assertion always fails");
+ +

A partir de Firefox 31, la console affiche la pile complète des insertions :

+ +
+function assertion() {
+  console.assert(false, "assertion failed");
+}
+
+function call_assertion() {
+  assertion();
+}
+
+call_assertion();
+ +

+
+ +

Messages d'avertissement

+ + + + + + + + + + + + + + +
APIContenu du message
warn() +

L'argument à warn().

+ +
+console.warn("a warning");
+
+ +

Messages d'information

+ + + + + + + + + + + + + + +
APIContenu du message
info() +

L'argument à info().

+ +
+console.info("some info");
+
+ +

Message de log

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIContenu du message
count() +

Le label fourni, si présent, et le nombre d'occurrences que count() a appelé avec le label donné.

+ +
+console.count(user.value);
+ +

+
log() +

L'argument à log().

+ +
+console.log("logged");
+
trace()Trace de la pile. +
+console.trace();
+
dir() +

Liste les propriétés d'un objet.

+ +
+var user = document.getElementById('user');
+console.dir(user);
+
time() +

Notifie que le timer a démarré.

+ +
+console.time("t");
+
timeEnd() +

Durée du timer.

+ +
+console.timeEnd("t");
+
table() +
+

Ce message est une des nouveautés de Firefox 34.

+
+ +

Affiche des données de tableau comme un tableau.

+
+ +

Messages groupés

+ +

il est possible d'utiliser console.group() pour créer des groupes indentés dans la console. Voir Using groups in the console pour plus d'informations.

+ +

Personnalisation des messages

+ +

Depuis Firefox 31, il est possible d'utiliser le spécificateur de format "%c" pour personnaliser les messages console :

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +

Messages d'entrée/sortie

+ +

Les commandes envoyées au navigateur en utilisant la ligne de commande de la Console Web, et les réponses correspondantes, sont affichés de cette façon :

+ +

La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.

+ +

Filtrer et rechercher

+ +

Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :

+ +

To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Enfin, vous pouvez aussi vider la Console Web de tous ses messages.

diff --git a/files/fr/tools/web_console/helpers/index.html b/files/fr/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..f367005482 --- /dev/null +++ b/files/fr/tools/web_console/helpers/index.html @@ -0,0 +1,82 @@ +--- +title: Fonctions d'aide de la Console Web +slug: Outils/Console_Web/Fonctions_d_aide +tags: + - Debugging + - Web Development + - web console +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}
+ +

Les commandes

+ +

La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.

+ + + +
+
$()
+
Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.
+
$$()
+
Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}
+
Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.
+
$0
+
L'élément actuellement inspecté sur la page.
+
$_
+
Nouveau dans Firefox 39. Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis entrée et ensuite $_ puis entrée, la console affichera 4.
+
$x()
+
Evalue une expression XPath et renvoie un tableau des nœuds correspondant.
+
keys()
+
À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.
+
values()
+
À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().
+
clear()
+
Vide l'affichage des messages de la console.
+
inspect()
+
À partir d'un objet, ouvre un inspecteur d'objet.
+
pprint()
+
Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.
+
help()
+
Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.
+
cd()
+
Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :
+
Voir travailler avec des iframes.
+
copy()
+
Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papier.
+
clearHistory()
+
Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souvient des commandes tapées.
+
Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.
+
+ +

Variables

+ +
+
tempN
+
L'option "Utiliser dans la Console" de l'Inspecteur génère une variable pour un noeud nommé temp0, temp1, temp2, etc. Afin de référencer le noeud.
+
+ +

Exemples

+ +

Exemple : Voir le contenu d'un nœud DOM

+ +

Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.

+ +

Regardez le contenu du nœud en utilisant les fonctions $() et inspect() :

+ +
inspect($("#content"))
+ +

Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".

+ +

Exemple : Afficher le contenu d'un nœud DOM

+ +

Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction  pprint() :

+ +
pprint($("#content"))
+
+ +

Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.

diff --git a/files/fr/tools/web_console/index.html b/files/fr/tools/web_console/index.html new file mode 100644 index 0000000000..7660506e93 --- /dev/null +++ b/files/fr/tools/web_console/index.html @@ -0,0 +1,47 @@ +--- +title: Console Web +slug: Outils/Console_Web +tags: + - Debugging + - Guide + - Security + - Tools + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

La Console Web :

+ +
    +
  1. Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.
  2. +
  3. Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.
  4. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Ouvrir la Console Web
+
Commencer à utiliser la Console Web.
+
L'interpréteur de ligne de commande
+
Interagir avec un document en utilisant la Console.
+
Console scindée
+
Utiliser la Console à côté d'autres outils.
+
+
+ +
+
+
Les messages de la console
+
Les détails des messages que la Console enregistre.
+
Informations détaillées
+
Voir et interagir avec les objets affichés par la Console.
+
Raccourcis clavier
+
Référence des raccourcis.
+
+
+
diff --git a/files/fr/tools/web_console/keyboard_shortcuts/index.html b/files/fr/tools/web_console/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..ddff3cf238 --- /dev/null +++ b/files/fr/tools/web_console/keyboard_shortcuts/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Console_Web/Keyboard_shortcuts +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Global shortcuts

+ +

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

diff --git a/files/fr/tools/web_console/rich_output/index.html b/files/fr/tools/web_console/rich_output/index.html new file mode 100644 index 0000000000..cf1a2a8146 --- /dev/null +++ b/files/fr/tools/web_console/rich_output/index.html @@ -0,0 +1,77 @@ +--- +title: Informations Détaillées +slug: Outils/Console_Web/Rich_output +translation_of: Tools/Web_Console/Rich_output +--- +
{{ToolsSidebar}}
+ +

Lorsque la console Web, affiche des objets, elle inclut un ensemble d'informations plus riche que juste le nom de l'objet. En particulier elle :

+ + + +

Information spécifique aux types

+ +

La Console Web fournit des informations supplémentaires pour une bonne partie des types d'objets, cela inclut les types suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

New in Firefox 36

+
+ +

+
RegExp
Window
Document
Element
Event
+ +

Examiner les propriétés d'un objet

+ +

Lorsqu'un objet est affiché dans la console, il apparait avec une petite icône en forme de triangle en début de ligne. Cliquer dessus affichera une liste de son contenu.

+ +

+ +

Mettre en surbrillance les noeuds DOM

+ +

Lors d'un survol, sur un noeud DOM affiché dans la console, il sera mis en surbrillance dans la page :

+ +

Dans la capture d'écran ci-dessous, il est possible de remarquer une "cible" bleue à côté de du noeud : cliquer dessus ouvrira l'Inspecteur avec ce noeud sélectionné.

diff --git a/files/fr/tools/web_console/split_console/index.html b/files/fr/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..8ead94713a --- /dev/null +++ b/files/fr/tools/web_console/split_console/index.html @@ -0,0 +1,20 @@ +--- +title: Console scindée +slug: Outils/Console_Web/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +

Il est possible (et très pratique) d'utiliser la Console web en parallèle d'autres outils. Il suffit pour cela d'être dans un autre outil de développement et d'appuyer sur Échap ou bien d'appuyer sur le bouton "Afficher la console scindée" dans le menu de la Barre d'outils. La boite à outils sera alors scindée, avec l'outil de base en haut et la console en dessous.

+ +

Il est possible de fermer la console scindée en appuyant à nouveau sur Échap, ou en utilisant le bouton "Fermer la console scindée".

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Comme d'ordinaire $0 sert de raccourci pour l'élément sélectionné actuellement dans l'inspecteur :

+ +

Lors de l'utilisation de la Console scindée avec le Débogueur, la portée (scope) de la console correspond à celle du Débogueur. Ainsi si le code s'arrête à un point d'arrêt dans une fonction, la portée sera celle de la fonction. En comme si ça n'était pas assez, il y a également de l'auto complétion en fonction de la portée, cela permet par exemple de modifier les objets de la fonction facilement et rapidement :

+ +

diff --git a/files/fr/tools/web_console/the_command_line_interpreter/index.html b/files/fr/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..631bcd0ef8 --- /dev/null +++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,161 @@ +--- +title: Interpreteur de ligne de commande +slug: Outils/Console_Web/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la Console Web. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.

+ +

Le mode ligne unique

+ +

Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de >>.

+ +

Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web

+ +

Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur Entrée. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser MajEntrée au lieu de Entrée.

+ +

L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :

+ +

Retour de la Console Web avec coloration syntactique

+ +

Si votre expression n'a pas l'air d'être complète lorsque Entrée est pressée, alors la console considère qu'il s'agit en fait d'un Maj+Entrée , permettant ainsi de finir l'expression.

+ +

Par exemple, si vous tapez :

+ +
function toto() {
+ +

et que vous appuyiez sur Entrée, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé Maj+Entrée , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.

+ +

Le mode éditeur multiligne

+ +

Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" Icone passer en mode éditeur multiligne à droite de la zone de saisie du mode ligne unique ou pressez Ctrl+B (Windows/Linux) ou Cmd+B (macOS). L'éditeur multiligne s'ouvre à gauche de la Console Web

+ +

Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web

+ +

À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche Entrée. Pour exécuter le morceau de code que vous avez saisi, cliquez sur le bouton "Exécuter" au dessus de la zone d'édition ou appuyez sur Ctrl+Entrée (ou Cmd+Return sur MacOS).

+ +

Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :

+ + + +

Pour revenir au mode ligne unique, cliquez sur l'icône X au-dessus de la zone d'édition ou appuyez sur Ctrl+B (Windows/Linux) ou Cmd+B (MacOS).

+ +

Accéder à des variables

+ +

Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme window et des variables ajoutées par du code JavaScript comme jQuery :

+ +

+ +

Autocomplétion

+ +

La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :

+ +

+ +

Appuyer sur Entrée, Tab, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.

+ +

Les suggestions d'autocomplétion sont sensibles à la case.

+ +

La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.

+ +

Les suggestions fonctionnent pour les tableaux également :

+ +

+ +

Définir des variables

+ +

Il est possible de définir ses propres variables et d'y accéder par la suite :

+ +

Console output showing syntax highlighting

+ +

Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.

+ +
+

Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.

+
+ +

Historique de commandes

+ +

La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.

+ +

Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser fonction d'aide clearHistory().

+ +

À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.
+
+ Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R

+ +

+ +

Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.

+ +

+ +

Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.

+ +

Travailler avec des iframes

+ +

Si une page contient des iframes, il est possible d'utiliser la commande cd() pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant cd():

+ +

Il est possible de passer l'élément DOM de l'iframe :

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Il est possible de passer un sélecteur CSS qui correspond à l'iframe :

+ +
cd("#frame1");
+ +

Il est possible de passer l'objet global window de l'iframe :

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+ +

Pour revenir au contexte de la fenêtre principale, il suffit d'appeler cd() sans paramètres :

+ +
cd();
+ +

Par exemple, supposons que nous avons un document qui inclut une iframe :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

Cette iframe définit une nouvelle fonction :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Il est possible de changer de contexte comme ceci :

+ +
cd("#frame1");
+ +

Le document de l'objet global window est maintenant celui de l'iframe :

+ +

Et il est alors possible d'appeler la fonction définie dans l'iframe :

+ +

+ +

Commandes d'aide

+ +

{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}

diff --git a/files/fr/tools/web_console/ui_tour/index.html b/files/fr/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..aa1a5fd0d7 --- /dev/null +++ b/files/fr/tools/web_console/ui_tour/index.html @@ -0,0 +1,29 @@ +--- +title: Ouvrir la Console web +slug: Outils/Console_Web/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Pour ouvrir la Console web, il faut :

+ + + +

La Boite à outils apparaitra en bas de la fenêtre du navigateur, avec la Console Web activée (elle s'appelle simplement "Console" dans la barre d'outils des outils de développement) :

+ +

+ +

L'interface de la Console web est séparée en trois sections horizontales :

+ + + +
+

Note: Il est possible de vider le contenu de la console avec le raccourci clavier Ctrl + L (Windows, Linux) ou Cmd + K sous macOS.

+
diff --git a/files/fr/tools/working_with_iframes/index.html b/files/fr/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..114074c320 --- /dev/null +++ b/files/fr/tools/working_with_iframes/index.html @@ -0,0 +1,25 @@ +--- +title: Travailler avec les iframes +slug: Outils/Travailler_avec_les_iframes +tags: + - DevTools + - Frames + - Tools + - debogueur + - iframe + - outils de développement +translation_of: Tools/Working_with_iframes +--- +
{{ToolsSidebar}}
+ +

Il est possible d'assigner les outils de développement à un iframe spécifique à l’intérieur d'un document.

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

Il existe un bouton dans la barre d'outils :

+ +

Cliquer dessus affichera une liste de tous les iframes du document en pop up ainsi que le document lui même.

+ +

+ +

Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. -  seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.

-- cgit v1.2.3-54-g00ecf