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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Configurações
slug: Tools/Settings
tags:
- Barra de Ferramentas
- Desenvolvimento
- Ferramentas
- Firefox
translation_of: Tools/Settings
---
<div>{{ToolsSidebar}}</div><h2 id="Configurações_de_Abertura">Configurações de Abertura</h2>
<p>Para ver o painel de configurações, abra qualquer uma das Ferramentas do Desenvolvedor e então:</p>
<ul>
<li>clique no botão "Configurações" (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; width: 24px;">) na barra de ferramentas:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li>
<li>ou pressione <kbd>F1</kbd> (novo no Firefox 43) para alternar entre a ferramenta ativa e o painel de Configurações</li>
<li>ou pressione <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> para alternar entre a ferramenta ativa e o painel de Configurações</li>
</ul>
<p>O painel de Configurações deve ser assim:</p>
<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/13154/devtools-settings-shadowed.png" style="display: block; height: 1726px; margin-left: auto; margin-right: auto; width: 816px;"></p>
<h2 id="Categorias">Categorias</h2>
<h3 id="Ferramentas_de_Desenvolvedor_Padrão_do_Firefox">Ferramentas de Desenvolvedor Padrão do Firefox</h3>
<p>Esse grupo de checkboxes determina as ferramentas habilitadas na caixa de ferramentas. Novas ferramentas são frequentemente incluídas no Firefox, mas não habilitadas por padrão.</p>
<h3 id="Botões_Disponíveis_na_Caixa_de_Ferramentas">Botões Disponíveis na Caixa de Ferramentas</h3>
<p>Esse grupo de checkboxes determina as ferramentas com <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">um ícone disponível na barra de ferramentas</a>.</p>
<h3 id="Altere_o_Tema_das_Ferramentas_de_Desenvolvedor">Altere o Tema das Ferramentas de Desenvolvedor</h3>
<p>É permitido alterar entre três temas diferentes.</p>
<p>O tema light, que é o padrão:</p>
<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p>
<p>O tema dark (que é tema padrão no <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p>
<p class="geckoVersionNote">Uma novidade no Firefox 48!</p>
<p>Existe também o tema Firebug, que se parece com a <a href="https://getfirebug.com/">extensão Firebug</a>, permitindo que você se sinta em casa caso já esteja acostumado com o Firebug:</p>
<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p>
<h3 id="Preferências_Comuns">Preferências Comuns</h3>
<p>As configurações que se aplicam para mais de uma ferramenta, são as seguintes:</p>
<dl>
<dt><em>Habilitar </em><em>logs (registros) persistentes</em></dt>
<dd>A configuração para o controlar ou não o Console Web e Monitor de Rede não são limpas quando você navegar para uma nova página.</dd>
</dl>
<h3 id="Inspetor">Inspetor</h3>
<dl>
<dt><em>Mostrar os estilos no navegador</em></dt>
<dd>Uma configuração para controlar os estilos aplicados pelo navegador (<a href="/en-US/docs/Web/CSS/Cascade">agente-de-estilo-de-usuario</a>) deve ser mostrada na <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Regras de exibição </a>do inspetor. Observe que esta configuração é independente dos "estilos do navegador" nos inspetores de <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Exibição computada</a>.</dd>
<dt><em>Retirar atributos DOM</em> (novidade<em> </em>no Firefox 47)</dt>
<dd>Por padrão, o inspetor trunca atributos DOM e mais de 120 caracteres. Desmarque essa caixa para impedir esse comportamento. Essa configuração funciona alternando o about:config "devtools.markup.collapseAttributes". Para mudar o limiar no qual atributos são truncados, você consegue editar o about:config preferência "devtools.markup.collapseAttributeLength".</dd>
<dt><em>Unificar a cor padrão</em></dt>
<dd>Uma configuração para controlar como as cores são representadas no inspetor:</dd>
<dd>
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>Nome da cor</li>
<li>Como autor ( novo no Firefox 44).</li>
</ul>
</dd>
</dl>
<h3 id="Console_Web">Console Web</h3>
<dl>
<dt><em>Habilitar timestamps</em></dt>
<dd>
<div class="textArea" id="destText" style="direction: ltr;">
<div><span id="ouHighlight__0_7TO0_7">Controla</span><span id="noHighlight_0.9287595761391253"> </span><span id="ouHighlight__9_15TO9_10">se</span><span id="noHighlight_0.9334492220918578"> </span><span id="ouHighlight__17_19TO12_12">o</span><span id="noHighlight_0.9954516048383718"> </span><span id="ouHighlight__25_31TO14_20">Console</span><span id="noHighlight_0.4553237512269448"> </span><span id="ouHighlight__21_23TO22_24">Web</span><span id="noHighlight_0.2539094102645578"> </span><span id="ouHighlight__33_40TO26_30">exibe</span><span id="noHighlight_0.32719765213609675"> os carimbos de </span><span id="ouHighlight__42_51TO47_50">hora</span><span id="noHighlight_0.9055325451246086">.</span><span id="noHighlight_0.4307004313541585"> </span><span id="ouHighlight__54_56TO53_53">O</span><span id="noHighlight_0.13575833787067504"> </span><span id="ouHighlight__62_68TO55_61">Console</span><span id="noHighlight_0.6387119609038014"> </span><span id="ouHighlight__58_60TO63_65">Web</span><span id="noHighlight_0.7741752524148612"> </span><span id="ouHighlight__70_77TO67_72">padrão</span><span id="noHighlight_0.9117182084222228"> </span><span id="ouHighlight__82_87TO74_83">escondendo</span><span id="noHighlight_0.3174826976799109"> os <em>timestamps</em></span><span id="noHighlight_0.9957832702877994">.</span></div>
</div>
.</dd>
</dl>
<h3 id="Editor_de_Estilos">Editor de Estilos</h3>
<dl>
<dt><em>Mostrar fonte original</em></dt>
<dd>Quando o pré-processador suporta a fonte do mapa usado, isto abilita o estilo de editor no display original, pré-processador, fontes preferidas quando gerado o CSS.<a href="/en-US/docs/Tools/Style_Editor#Source_map_support"> Aprenda mais sobre o Editor de Estilo suportado para fontes dos mapas CSS</a>. Com a configuração estando checada, a <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Exibição de página do inspetor de regras também irá fornecer links para as fontes originais</a>.</dd>
<dt><em>Autocomplete CSS</em></dt>
<dd>
<div><span id="ouHighlight__0_5TO0_4">Ative</span><span id="noHighlight_0.25012715404993047"> </span><span id="ouHighlight__7_9TO6_6">o</span><span id="noHighlight_0.025617941019710377"> </span><span id="ouHighlight__17_22TO8_13">Editor</span><span id="noHighlight_0.09302131460612217"> de </span><span id="ouHighlight__11_15TO18_24">Estilos</span><span id="noHighlight_0.9680297053130326"> </span><span id="ouHighlight__24_25TO26_29">para</span><span id="noHighlight_0.4663926296344244"> </span><span id="ouHighlight__27_31TO31_38">oferecer</span><span id="noHighlight_0.6965895657157833"> </span><span id="ouHighlight__46_56TO40_48">sugestões</span><span id="noHighlight_0.3126477494907086"> do </span><span id="ouHighlight__33_44TO53_65">auto completar</span><span id="noHighlight_0.4215687138569931">.</span></div>
</dd>
</dl>
<h3 id="Perfil_JavaScript">Perfil JavaScript</h3>
<dl>
<dt><em>Mostrar a plataforma de dados Gecko</em></dt>
<dd>
<div class="textArea" id="destText" style="direction: ltr;">
<div><span id="ouHighlight__0_0TO0_2">Uma</span><span id="noHighlight_0.9962875701500744"> </span><span id="ouHighlight__2_8TO4_15">configuração</span><span id="noHighlight_0.9524127286232588"> </span><span id="ouHighlight__10_11TO17_20">para</span><span id="noHighlight_0.07622512888342514"> </span><span id="ouHighlight__13_19TO22_30">controlar</span><span id="noHighlight_0.03139054094723315"> </span><span id="ouHighlight__29_30TO32_33">ou</span><span id="noHighlight_0.6583050313158842"> </span><span id="ouHighlight__32_34TO35_37">não</span><span id="noHighlight_0.5421641174642587"> </span><span id="ouHighlight__36_43TO39_44">perfis</span><span id="noHighlight_0.6851419806707744"> </span><span id="ouHighlight__45_50TO46_50">devem</span><span id="noHighlight_0.3833705113575805"> </span><span id="ouHighlight__52_58TO52_58">incluir</span><span id="noHighlight_0.19241351568253373"> </span><span id="ouHighlight__75_81TO60_67">símbolos</span><span id="noHighlight_0.7514281071325736"> de </span><span id="ouHighlight__66_73TO72_81">plataforma</span><span id="noHighlight_0.009275912509310924"> </span><span id="ouHighlight__60_64TO83_87">Gecko</span>.</div>
</div>
</dd>
</dl>
<h3 id="Editor_de_Preferências">Editor de Preferências</h3>
<p>Preferências para o <a href="http://codemirror.net/">CodeMirror</a> editor de código fonte, que é incluido no Firefox e usado por várias ferramentas de desenvolvedor, incluindo <a href="/en-US/docs/Tools/Scratchpad">Bloco de anotações</a> e o <a href="/en-US/docs/Tools/Style_Editor">Editor de Estilo</a>.</p>
<dl>
<dt><em>Detectando identação</em></dt>
<dd>Auto identar novas linhas baseadas na atual identação.</dd>
<dt>
<div><em><span id="ouHighlight__10_17TO0_8">Colchetes</span><span id="noHighlight_0.9986819027694629"> de </span><span id="ouHighlight__0_8TO13_33">fechamento automático</span></em></div>
<div><em><span id="ouHighlight__0_5TO0_8">Identação</span><span id="noHighlight_0.8273644223289824"> </span><span id="ouHighlight__7_11TO10_15">usando</span><span id="noHighlight_0.1171574839061873"> </span><span id="ouHighlight__13_18TO17_23">espaços</span></em></div>
<div><em><span id="ouHighlight__4_7TO5_11">Tamanho da aba</span></em></div>
</dt>
<dt> </dt>
<dt><em>Atalhos de teclado</em></dt>
<dd>Escolha o padrão <em>CodeMirror</em> atalho de teclado, ou atalhos de teclado de um dos vários editores populares:
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</dd>
</dl>
<h3 id="Configurações_avançadas">Configurações avançadas</h3>
<dl>
<dt><em>Desabilitar cache</em></dt>
<dd>Desabilite o simulador de cache do navegador para simular uma primeira performance de carregamento. Essa configuração persiste, significa que se ele estiver definido, o cache será desativado qua você reabrir o devtools. Cache é reativado quado os devtools estão fechados.</dd>
<dt><em>Desabilitar JavaScript</em></dt>
<dd>Recarregue a aba atual com o JavaScript desabilitado.</dd>
<dt><em>Habilitar Service Workers over HTTP</em></dt>
<dd>Habilitar <em>Service Worker </em>para registro de sites inseguros.</dd>
<dt><em>Habilitar browser chrome e add-on depuração toolboxes</em></dt>
<dd>Possibilita que você use as ferramentas de desenvolvimento no contexto do próprio navegador (Firefox), e não somente no conteúdo da web.</dd>
<dt><em>Habilitar depuração remota</em></dt>
<dd>Permite que as ferramentas de desenvolvimento <a href="/en-US/docs/Tools/Remote_Debugging">depurem remotamente as instâncias do Firefox</a>.</dd>
</dl>
|
