diff options
Diffstat (limited to 'files/pt-br/tools/performance/index.html')
| -rw-r--r-- | files/pt-br/tools/performance/index.html | 380 |
1 files changed, 380 insertions, 0 deletions
diff --git a/files/pt-br/tools/performance/index.html b/files/pt-br/tools/performance/index.html new file mode 100644 index 0000000000..880187e7e2 --- /dev/null +++ b/files/pt-br/tools/performance/index.html @@ -0,0 +1,380 @@ +--- +title: Performance +slug: Tools/atuação +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">é nova no</span> <span class="hps">Firefox</span> <span class="hps">34</span><span>.</span></span></p> + +<p><span id="result_box" lang="pt"><span class="hps">As colunas no</span> <span class="hps">perfil de amostragem</span> <span class="hps">foram expandidos e</span> <span class="hps">renomeado no</span> <span class="hps">Firefox</span> <span class="hps">35:</span> <span class="hps">esta página</span> <span class="hps">descreve os novos</span> <span class="hps">nomes das colunas.</span></span></p> +</div> + +<p><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">é</span> <span class="hps">o substituto para o</span> <span class="hps">perfil de amostragem</span> <span class="hps">JavaScript.</span> <span class="hps">Ele inclui</span> <span class="hps">uma versão atualizada</span> <span class="hps">do</span> <span class="hps">perfil de amostragem</span><span>,</span> <span class="hps">mas acrescenta</span> <span class="hps">um cronograma</span> <span class="hps">taxa de quadros para</span> <span class="hps">ajudar a avaliar</span> <span class="hps">a capacidade de resposta</span><span>.</span> <span class="hps">Temos a intenção de</span> <span class="hps">adicionar mais recursos</span> <span class="hps">em versões futuras.</span></span></p> + +<h2 id="Abrindo_a_ferramenta_de_desempenho"><span class="short_text" id="result_box" lang="pt"><span class="hps">Abrindo a</span> <span class="hps">ferramenta de desempenho</span></span></h2> + +<p><span id="result_box" lang="pt"><span class="hps">Você pode iniciar</span> <span class="hps">a ferramenta de desempenho</span><span class="atn">, selecionando "</span><span>Performance"</span><span>, no menu</span> <span class="atn hps">"</span><span>Web Developer</span><span>"</span><span>.</span> <span class="hps">Você encontrará o</span> <span class="atn hps">menu "</span><span>Web Developer</span><span>" sob o</span> <span class="atn hps">menu "</span><span>Ferramentas</span><span>"</span> <span class="hps">no Linux e</span> <span class="hps">OS</span> <span class="hps">X,</span> <span class="hps">e</span> <span class="hps">diretamente sob o</span> <span class="atn hps">menu "</span><span>Firefox"</span> <span class="hps">no Windows.</span> <span class="hps">Alternativamente</span><span>, Shift</span> <span class="hps">+</span> <span class="hps">F5</span> <span class="hps">irá</span> <span class="hps">abrir a ferramenta</span><span>.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8575/performance-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<div id="gt-src-tools-r"> </div> +</div> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"> +<div id="tts_button"> </div> + +<h2 id="A_criação_de_perfis"><span class="short_text" id="result_box" lang="pt"><span class="hps">A criação de perfis</span></span></h2> +</div> +</div> + +<p><span id="result_box" lang="pt"><span class="hps">Para começar a gravar</span> <span class="hps">um novo perfil</span><span>, clique no</span> <span class="hps">ícone do cronômetro</span><span>.</span> <span class="hps">Clique novamente para</span> <span class="hps">terminar a gravação</span><span>.</span> <span class="hps">O perfil</span> <span class="hps">será imediatamente</span> <span class="hps">aberto.</span> <span class="hps">Você pode</span> <span class="hps">salvar o perfil</span> <span class="hps">como um arquivo</span> <span class="hps">JSON</span> <span class="hps">e importação</span> <span class="hps">salva</span> <span class="hps">perfis.</span> <span class="hps">A barra lateral</span> <span class="hps">à esquerda</span> <span class="hps">permite que você alterne</span> <span class="hps">entre</span> <span class="hps">vários perfis</span> <span class="hps">abertos.</span></span></p> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<div id="gt-src-tools-r"> </div> +</div> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"> +<div id="tts_button"> </div> + +<h2 id="Análise_de_perfis"><span class="short_text" id="result_box" lang="pt"><span class="hps">Análise de</span> <span class="hps">perfis</span></span></h2> +</div> +</div> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">Um perfil</span> <span class="hps">é algo como isto</span><span>:</span></span></div> +</div> +</div> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8823/performance-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p><span id="result_box" lang="pt"><span class="hps">Ele consiste em</span> <span class="hps">quatro seções principais</span> <span class="hps">camadas</span> <span class="hps">horizontalmente</span><span>:</span></span></p> + +<ol> + <li> + <div id="gt-src-tools-l"> + <div id="gt-input-tool" style="display: inline-block;"> + <div id="tts_button"><span id="result_box" lang="pt"><span class="hps">um conjunto</span> <span class="hps">de migalhas de pão</span> <span class="hps">que</span> <span class="hps">você pode usar para</span> <span class="hps">zoom in e out</span></span></div> + </div> + </div> + <a href="/en-US/docs/Tools/Performance#Zooming_in"><img alt="" src="https://mdn.mozillademos.org/files/8825/performance-breadcrumbs.png" style="display: block; margin-left: auto; margin-right: auto;"></a> + + <div id="gt-src-tools"> + <div id="gt-src-tools-l"> + <div id="gt-input-tool" style="display: inline-block;"> + <div id="itamenu"> </div> + </div> + </div> + + <div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">um cronograma</span> <span class="hps">taxa de quadros</span></span></div> + </div> + <img alt="" src="https://mdn.mozillademos.org/files/8827/performance-framerate.png" style="display: block; margin-left: auto; margin-right: auto;"></li> + <li> + <div id="gt-src-tools-l"> + <div id="gt-input-tool" style="display: inline-block;"> + <div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">um cronograma para</span> <span class="hps">a execução de código</span> <span class="hps">plataforma</span></span></div> + </div> + </div> + <img alt="" src="https://mdn.mozillademos.org/files/8841/performance-js-timeline.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="pt"><span class="hps">a saída</span> <span class="hps">detalhada do</span> <span class="hps">perfil de amostragem</span> <span class="hps">JavaScript</span></span></li> + <li><img alt="" src="https://mdn.mozillademos.org/files/8845/performance-js-profiler.png" style="display: block; margin-left: auto; margin-right: auto;"></li> +</ol> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<div id="gt-src-tools-r"> </div> +</div> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"> +<div id="tts_button"> </div> + +<h2 id="O_cronograma_taxa_de_quadros"><span class="short_text" id="result_box" lang="pt"><span class="hps">O cronograma</span> <span class="hps">taxa de quadros</span></span></h2> +</div> +</div> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">O cronograma</span> <span class="hps">taxa de quadros</span> <span class="hps">dá-lhe</span> <span class="hps">uma visão geral de</span> <span class="hps">capacidade de resposta do</span> <span class="hps">navegador</span> <span class="hps">no período coberto</span> <span class="hps">pelo perfil.</span></span></div> +</div> + +<p><span id="result_box" lang="pt"><span class="hps">Um quadro</span> <span class="hps">encapsula</span> <span class="hps">o trabalho</span> <span class="hps">do</span> <span class="hps">navegador precisa</span> <span class="hps">fazer a fim de</span> <span class="hps">pintar</span> <span class="hps">em resposta a algum</span> <span class="hps">evento.</span> <span class="hps">Por exemplo, se</span> <span class="hps">movendo o mouse sobre</span> <span class="hps">algum elemento</span> <span class="hps">página</span> <span class="hps">desencadeia</span> <span class="hps">alguns</span> <span class="hps">JavaScript</span> <span class="hps">que</span> <span class="hps">muda a aparência do</span> <span class="hps">elemento,</span> <span class="hps">e</span> <span class="hps">que desencadeia</span> <span class="hps">um</span> <span class="hps">refluxo e</span> <span class="hps">um</span> <span class="hps">repaint</span><span>,</span> <span class="hps">depois</span> <span class="hps">de todo esse trabalho</span> <span class="hps">precisa ser concluída</span> <span class="hps">nesse quadro.</span> <span class="hps">Se demorar</span> <span class="hps">muito tempo para o</span> <span class="hps">navegador para</span> <span class="hps">processar o quadro</span><span>,</span> <span class="hps">em seguida,</span> <span class="hps">o navegador irá</span> <span class="hps">aparecer</span> <span class="hps">sem resposta</span></span> (<a href="/en-US/docs/Glossary/Jank">janky</a>).</p> + +<div class="g-unit" id="gt-src-c"> +<div id="gt-src-p"> +<div id="gt-src-wrap"> +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">leva um</span> <span class="hps">timestamp</span> <span class="hps">quando o navegador</span> <span class="hps">termina</span> <span class="hps">um quadro,</span> <span class="hps">e</span> <span class="hps">usa isso para</span> <span class="hps">manter o controle</span> <span class="hps">da taxa de quadros</span><span>:</span></span></div> +</div> +</div> +</div> +</div> +</div> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8827/performance-framerate.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">O eixo x</span> <span class="hps">é o tempo</span> <span class="hps">durante o período de</span> <span class="hps">perfil</span><span>,</span> <span class="hps">e há três</span> <span class="hps">anotações:</span> <span class="hps">a taxa de</span> <span class="hps">quadro de destino</span> <span class="hps">(sempre</span> <span class="hps">60 quadros</span> <span class="hps">por segundo),</span> <span class="hps">a média de frames</span><span>,</span> <span class="hps">ea menor</span> <span class="hps">taxa de quadros.</span></span></div> +</div> +</div> +</div> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<div id="gt-src-tools-r"> +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="itamenu"> </div> +</div> +</div> + +<h2 id="Execução_de_código_Platform"><span class="short_text" id="result_box" lang="pt"><span class="hps">Execução de código</span> <span class="hps">Platform</span></span></h2> +</div> +</div> +</div> + +<div id="gt-src-tools"> +<div id="gt-src-tools-l"> +<div id="gt-input-tool" style="display: inline-block;"> +<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">Isto dá-lhe</span> <span class="hps">uma visão geral de</span> <span class="hps">execução de código</span> <span class="hps">no período coberto</span> <span class="hps">pelo perfil.</span> <span class="hps">Tal como acontece com</span> <span class="hps">o cronograma</span> <span class="hps">taxa de quadros</span><span>, o eixo</span> <span class="hps">x</span> <span class="hps">representa o tempo</span> <span class="hps">durante o período de</span> <span class="hps">perfis,</span> <span class="hps">e as amostras</span> <span class="hps">são colocadas para fora</span> <span class="hps">como barras</span> <span class="hps">verticais</span> <span class="hps">na ordem em que</span> <span class="hps">foram tiradas,</span> <span class="hps">esquerda para a direita</span><span>:</span></span></div> +</div> +</div> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8841/performance-js-timeline.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="pt"><span class="hps">A altura</span> <span class="hps">de</span> <span class="hps">cada</span> <span class="hps">barra representa</span> <span class="hps">a profundidade</span> <span class="hps">da pilha de chamadas</span> <span class="hps">neste ponto</span><span>.</span></span></p> + +<p><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">examina</span> <span class="hps">a pilha de chamadas</span> <span class="hps">e</span> <span class="hps">descobre</span> <span class="hps">os</span> <span class="hps">tipos de coisas</span> <span class="hps">o código</span> <span class="hps">JavaScript</span> <span class="hps">está fazendo,</span> <span class="hps">e divide o</span> <span class="hps">bar</span> <span class="hps">em</span> <span class="hps">cores</span> <span class="hps">de acordo:</span></span></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td>Network</td> + <td><span id="result_box" lang="pt"><span class="hps">Envio e</span> <span class="hps">processamento de</span> <span class="hps">pedidos e respostas</span> <span class="hps">de rede</span></span></td> + </tr> + <tr> + <td>JIT</td> + <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Compilação de código</span> <span class="hps">JavaScript</span></span></td> + </tr> + <tr> + <td>GC</td> + <td>Garbage collection</td> + </tr> + <tr> + <td>Inputs & events</td> + <td>Eventos como de mouse ou eventos de DOM</td> + </tr> + <tr> + <td>Styles</td> + <td>Análise de CSS</td> + </tr> + <tr> + <td>Graphics</td> + <td>Inclue manipulção de reflows e repaints assim como WebGL</td> + </tr> + <tr> + <td>Storage</td> + <td>Na maioria das vezes é o IndexedDB</td> + </tr> + <tr> + <td>Gecko</td> + <td><span id="result_box" lang="pt"><span class="hps">Tudo o que</span> <span class="hps">não se encaixa</span> <span class="hps">em nenhuma das</span> <span class="hps">outras categorias</span></span></td> + </tr> + </tbody> +</table> + +<p>Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8843/performance-js-timeline-category-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.</p> + +<div class="note"> +<p><span id="result_box" lang="pt"><span class="alt-edited hps">Note que</span> essa visão <span class="hps">mostra</span> <span class="hps">tudo o que a</span> <span class="hps">plataforma</span> <span class="hps">está fazendo,</span> <span class="hps">não apenas o seu</span> <span class="hps">próprio código.</span></span></p> +</div> + +<h3 id="Perfil_de_amostragem_JavaScript">Perfil de amostragem JavaScript</h3> + +<p>O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, <span id="result_box" lang="pt"><span class="hps">o número</span> <span class="hps">de amostras colhidas</span> <span class="hps">que</span> <span class="alt-edited hps">executavam</span> <span class="hps">uma determinada função</span> <span class="hps">corresponde à</span> <span class="hps">quantidade de</span> <span class="hps">tempo que o navegador</span> <span class="hps">está gastando para</span> <span class="hps">executá-la</span><span>, assim é possível </span><span class="hps">identificar gargalos</span> <span class="hps">em seu código.</span></span><br> + <br> + <a name="profiling-example">Por exemplo, considere um programa como este:</a></p> + +<pre class="brush: js">function doSomething() { + var x = getTheValue(); + x = x + 1; // -> A (from the top level) + logTheValue(x); +} + +function getTheValue() { + return 5; // -> B (from doSomething()) +} + +function logTheValue(x) { + // -> C (from doSomething()) + // -> D (from doSomething()) + // -> E (from the top level) + console.log(x); +} + +doSomething(); + +logTheValue(6);</pre> + +<p>Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.</p> + +<p>Four are taken from inside <code>doSomething()</code>. Of those, <code>A</code> is directly inside <code>doSomething()</code>. <code>B</code> is inside <code>getTheValue()</code>, and <code>C</code> and <code>D</code> are inside <code>logTheValue()</code>. Finally, the program makes a call to <code>logTheValue()</code> from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:</p> + +<pre>Sample A: doSomething() +Sample B: doSomething() > getTheValue() +Sample C: doSomething() > logTheValue() +Sample D: doSomething() > logTheValue() +Sample E: logTheValue()</pre> + +<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p> + +<h4 id="Profile_structure">Profile structure</h4> + +<p>The sampling profiler's details pane looks something like this:<img alt="" src="https://mdn.mozillademos.org/files/8845/performance-js-profiler.png" style="display: block; margin-left: auto; margin-right: auto;">It presents the samples collected as a table.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Samples</td> + <td> + <p>The number of samples that were taken in which the corresponding "Function" appeared in the call stack. For example, given the profiling example above, the corresponding "Samples" and "Functions" columns would look like:</p> + + <pre> +4 doSomething() +2 > logTheValue() +1 > getTheValue() +1 logTheValue()</pre> + + <p>Note that <code>logTheValue()</code> appears twice, because it's called from two different places.</p> + </td> + </tr> + <tr> + <td>Function</td> + <td>This includes the function name, source file, line number and domain that served the file. Clicking on the file name takes you to that file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</td> + </tr> + <tr> + <td>Total Cost</td> + <td>A direct translation of the "Samples" column into a percentage.</td> + </tr> + <tr> + <td>Self Cost</td> + <td> + <p>The "Samples" column includes not only samples that were taken while the JavaScript engine was executing this function, but also samples taken while executing functions called by this function.</p> + + <p>For example, in the example above we record 4 samples for <code>doSomething()</code>, but 3 of those samples were taken while the JavaScript engine was executing functions called by <code>doSomething()</code>.</p> + + <p>"Self Cost" is the number of samples taken while the JavaScript engine was actually executing this function, translated into a percentage. In the example above, the "Self Cost" for <code>doSomething()</code> is 20% (1 sample out of 5 in total was taken while actually executing the function).</p> + </td> + </tr> + <tr> + <td>Total Time</td> + <td> + <p>A statistical estimate of the amount of time spent inside the function, given the number of samples that were taken in it.</p> + + <p>This value is derived from "Samples" but is not a direct translation, because we don't always take samples at exactly the right time, so we attempt to correct for this irregularity.</p> + </td> + </tr> + <tr> + <td>Self Time</td> + <td> + <p>A statistical estimate of the amount of time spent executing the function, exclusive of any functions called by this function.</p> + + <p>Just as "Total Time" is not a direct translation of "Samples", so "Self Time" is not a direct translation of "Self Cost".</p> + </td> + </tr> + </tbody> +</table> + +<p>For a deeper look into the way the sampling profiler presents data, see this <a href="/en-US/docs/Tools/Performance/Profiler_walkthrough">walkthrough of a profile</a>.</p> + +<h4 id="Inverting_the_call_tree">Inverting the call tree</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 36</p> +</div> + +<p>By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:</p> + +<pre>4 doSomething() +2 > logTheValue() +1 > getTheValue() +1 logTheValue()</pre> + +<p>This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.</p> + +<p>From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:</p> + +<ul> + <li>makes a list of all functions with a <em>Self Cost</em> greater than zero: that is, functions which were actually executing when the sample was taken</li> + <li>orders the list by the number of samples taken while in that function</li> + <li>for each entry in the list, shows the call stack backwards to the top-level function.</li> +</ul> + +<p>This is usually a more effective way to highlight where your code is spending its time.</p> + +<h4 id="Zooming_in">Zooming in</h4> + +<p>Clicking on a row highlights all the samples in the <a href="/en-US/docs/Tools/Performance#The_sampling_profiler_timeline">timeline view</a> in which this function appears:<img alt="" src="https://mdn.mozillademos.org/files/8835/performance-js-profiler-frame-selected.png" style="display: block; margin-left: auto; margin-right: auto;">If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:<br> + <img alt="" src="https://mdn.mozillademos.org/files/8833/performance-js-profiler-frame-made-root.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Note that this also <a href="/en-US/docs/Tools/Performance#Zooming_in">zooms in</a> on the section of the profile in which these samples were taken.</p> + +<h3 id="Zooming_in_2">Zooming in</h3> + +<p>If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:</p> + +<ul> + <li>a section of the timeline is highlighted</li> + <li>the sampling profiler details view now shows only samples that were recorded in that section</li> + <li>you'll see a "+" appear in the toolbar at the top:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8839/performance-js-profiler-timeslice-selected.png" style="display: block; margin-left: auto; margin-right: auto;">Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8837/performance-js-profiler-timeslice-open.png" style="display: block; margin-left: auto; margin-right: auto;">You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8829/performance-js-profiler-2nd-timeslice-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </p> + +<p> </p> |