1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Comment faire ?
slug: Tools/Performance/How_to
translation_of: Tools/Performance/How_to
original_slug: Outils/Performance/How_to
---
<div>{{ToolsSidebar}}</div><h2 id="Ouvrir_l'outil_Performance">Ouvrir l'outil Performance</h2>
<p>Pour ouvrir l'outil Performance, il existe plusieurs possibilités :</p>
<ul>
<li>Utiliser le raccourci clavier Maj + F5.</li>
<li>Selectioner "Performances" depuis le menu "Développement" présent dans le menu de Firefox (ou du menu outils sous OS X).</li>
<li>Ouvrir la <a href="/fr/docs/Tools/Tools_Toolbox">boite à outils</a> (F12).</li>
<li>Sélectionner l’icône de l'outil depuis la barre d'outils si vous en avez une :<img alt="" src="devtools-button.png"></li>
</ul>
<h2 id="Enregistrer_un_profil">Enregistrer un profil</h2>
<p>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 :</p>
<p><img alt="" src="perf-record.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Il est également possible de démarrer et d'arrêter un enregistrement depuis la Console Web, en utilisant <code><a href="/fr/docs/Web/API/Console/profile">console.profile()</a></code> et <code><a href="/fr/docs/Web/API/Console/profileEnd">console.profileEnd()</a></code>.</p>
<h2 id="Sauvegarder_un_profil">Sauvegarder un profil</h2>
<p>Pour sauvegarder un profil, il faut cliquer sur le lien "Enregistrer" dans le tableau des enregistrements :</p>
<p><img alt="" src="perf-save.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Charger_un_profil">Charger un profil</h2>
<p>Pour charger un profil, il suffit de cliquer sur "Importer..." et sélectionner le fichier :</p>
<p><img alt="" src="perf-load.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Effacer_tous_les_profils_chargés">Effacer tous les profils chargés</h2>
<p>Pour effacer tous les profils chargés, il faut cliquer sur "Effacer".</p>
<div class="note">
<p>Attention, cette action entrainera la perte de tout profil non sauvegardé</p>
</div>
<p><img alt="" src="perf-clear.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Sélectioner_un_outil">Sélectioner un outil</h2>
<p>Les outils <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a>, <a href="/fr/docs/Tools/Performance/Call_Tree">Arbre d'appel</a>, et <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart (Graphique JS)</a> proposent chacun une méthode de visualisation différente. Pour passer de l'une à l'autre, il faut utiliser leurs boutons associés :</p>
<p><img alt="" src="perf-select.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Configurer_les_données_affichées">Configurer les données affichées</h2>
<p>Pour contrôler quels types de données sont affichées dans la chronologie, il faut utiliser ce bouton :</p>
<p><img alt="" src="perf-markers.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Zoomer">Zoomer</h2>
<p>Pour zoomer sur une partie de l'enregistrement, il faut sélectionner cette partie dans la vue d'ensemble :</p>
<p><img alt="" src="perf-zoom.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
|
