aboutsummaryrefslogtreecommitdiff
path: root/files/fr/tools/performance/how_to/index.html
blob: f7cd86402fe04094ff7f2c9cc0e57d54376aed02 (plain)
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
---
title: Comment faire ?
slug: Outils/Performance/How_to
translation_of: Tools/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/Outils/Outils_boite_%C3%A0_outils">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="https://m311pxdn.mozillademos.org/files/10997/devtools-button.png" style="height: 76px; width: 728px;"></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="https://mdn.mozillademos.org/files/13230/perf-record.png" style="display: block; height: 346px; margin-left: auto; margin-right: auto; width: 744px;"></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="https://mdn.mozillademos.org/files/13232/perf-save.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></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="https://mdn.mozillademos.org/files/13226/perf-load.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 733px;"></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="https://mdn.mozillademos.org/files/13224/perf-clear.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></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="https://mdn.mozillademos.org/files/13234/perf-select.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></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="https://mdn.mozillademos.org/files/13228/perf-markers.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></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="https://mdn.mozillademos.org/files/13236/perf-zoom.png" style="display: block; height: 311px; margin-left: auto; margin-right: auto; width: 733px;"></p>