Preferências

Sofia Emelianova

Configure a aparência e o comportamento do DevTools e dos painéis dele em Configurações > Preferências. Essa guia lista as opções de personalização gerais e específicas do painel.

Para definir as preferências, abra Settings > Preferences e role até uma das seções descritas a seguir.

Para saber o que cada configuração faz, pesquise o nome dela nesta página e clique em add_circle para abrir a descrição.

Esta referência indica configurações diferentes com os seguintes ícones:

• Caixas de seleção
• Listas suspensas
• Descontinuado

Para restaurar as preferências padrão, role até o final da guia Preferências e clique em Restaurar padrões e recarregar.

Aparência

Esta seção lista as opções que personalizam a aparência do DevTools.

Temas define um tema de cores para a interface do DevTools.

Temas:

• Preferências do sistema
• Claro
• Escuro

Layout do painel organiza os painéis em painéis.

Afeta as guias Elementos > Estilos e as guias irmãs, além do painel Fontes > Depurador. A opção auto faz com que o layout dependa da largura do DevTools.

Layout do painel:

• horizontal
• vertical
• automático

Idioma define a localidade da interface do DevTools.

Para aplicar essa configuração, recarregue o DevTools.

Idioma:

• Idioma da interface do navegador
• Uma das opções de localidade, neste exemplo, chinês

Ativar o atalho Ctrl/Cmd + 0-9 para alternar entre painéis permite abrir painéis usando o teclado.

Este vídeo mostra como alternar entre as guias usando os atalhos de teclado correspondentes.

Desativar a sobreposição de estado pausado oculta a sobreposição Pausado no depurador na janela de visualização quando a execução de código é pausada.

Mostrar as novidades após cada atualização abre automaticamente a guia Novidades após cada atualização do Chrome.

Fontes

Esta seção lista as opções que personalizam o painel Origens.

A opção Pesquisar em scripts anônimos e de conteúdo permite pesquisar todos os arquivos JavaScript carregados, incluindo os de extensões do Chrome, usando a guia Pesquisar.

Este vídeo mostra como pesquisar texto em um arquivo de origem de extensão.

Revelar arquivos automaticamente na barra lateral seleciona arquivos no painel Fontes > Página quando você alterna entre as guias no Editor.

Este vídeo mostra como, com essa opção ativada, o painel Fontes seleciona arquivos na árvore de navegação conforme você alterna entre as guias.

Ativar mapas de origem JavaScript permite que o DevTools encontre origens de arquivos JavaScript gerados ou minificados.

Importante: essa opção só funciona se os mapas de origem estiverem disponíveis. O painel Fontes também coloca um link para o arquivo gerado ou minificado na barra de status.

Ativar o tab para mover o foco faz com que a tecla Tab mova o foco dentro do DevTools em vez de inserir um caractere de tabulação no Editor.

É necessário recarregar o DevTools.

Importante: essa configuração desativa a Recuo padrão do porque a tecla Tab do não insere caracteres nesse caso.

Este vídeo mostra primeiro os caracteres de tabulação inseridos com a tecla Tab. Em seguida, quando você ativa essa opção e recarrega o DevTools, a tecla Tab move o foco.

Detectar recuo define o recuo como o do arquivo de origem aberto no Editor.

É necessário recarregar o DevTools.

Importante: essa configuração substitui a Recuo padrão. No vídeo a seguir, a indentação padrão está definida como oito espaços, enquanto a indentação detectada no arquivo é de dois espaços. Mostrar caracteres de espaço em branco: todos permite que você veja caracteres de espaço em branco como pontos (...) e tabulações como linhas (—).

Este vídeo mostra primeiro o recuo padrão de oito espaços. Quando você ativa essa opção, ela substitui o recuo padrão pelo do arquivo de origem.

O preenchimento automático ativa sugestões úteis no Editor.

Este vídeo não mostra sugestões. Quando você ativa essa opção, o Editor mostra sugestões para completar comandos.

O fechamento automático de colchetes adiciona automaticamente um colchete ou uma tag de fechamento quando você digita um de abertura.

Este vídeo mostra a digitação de colchetes de abertura antes e depois de ativar o fechamento automático de colchetes.

A correspondência de colchetes sublinha e destaca em vermelho claro no Editor um colchete, uma chave ou um parêntese sem par.

Com a dobra de código, é possível dobrar e desdobrar blocos de código entre chaves no Editor.

É necessário recarregar o DevTools.

Este vídeo mostra como dobrar blocos de código ao ativar essa opção.

Mostrar caracteres de espaço em branco exibe caracteres de espaço em branco no Editor.

É necessário recarregar o DevTools. As opções fazem o seguinte:

• All indica todos os caracteres de espaço em branco como pontos (...). Além disso, o Editor indica o caractere Tab como uma linha (—).
• Trailing destaca caracteres de espaço em branco no final das linhas em vermelho-claro.

Mostrar caracteres de espaço em branco:

• Nenhum
• Todos (...)
• Trailing

Mostrar valores de variáveis inline durante a depuração mostra os valores das variáveis ao lado das instruções de atribuição enquanto a execução está pausada.

Focar no painel "Fontes" ao acionar um ponto de interrupção abre Fontes > Editor na linha com o ponto de interrupção que pausou a execução.

Este vídeo mostra primeiro o painel Fontes fora de foco quando pausado em um ponto de interrupção. Em seguida, quando você ativa essa opção, o DevTools abre o Editor no painel Fontes e mostra a linha de código com o ponto de interrupção.

Aplicar estilos de formatação automaticamente a fontes minificadas torna essas fontes legíveis.

Quando os estilos de formatação são aplicados, o Editor pode mostrar uma única linha de código longa em várias linhas, precedida por - para indicar que é uma continuação de linha.

Com a opção Ativar mapas de origem de CSS, o DevTools encontra as origens dos arquivos CSS gerados, por exemplo, .scss, e as mostra para você.

Importante: essa opção só funciona se os mapas de origem estiverem disponíveis.

• O painel Fontes mostra os arquivos .scss na seção Criado da árvore de navegação.
• O painel Elementos > Estilos mostra links para fontes ao lado das regras CSS aplicadas a um elemento.

Permitir rolagem além do fim do arquivo permite que você role além da última linha no Editor.

Este vídeo mostra como rolar além do fim do arquivo ao ativar essa opção.

Permitir que o DevTools carregue recursos, como mapas de origem, de caminhos de arquivo remotos. Recurso desativado por padrão por motivos de segurança.

Atenção: os caminhos de arquivos remotos são uma vulnerabilidade de segurança. É melhor usar essa opção apenas se você estiver ciente das consequências.

Se essa opção estiver desativada, o DevTools vai registrar no Console mensagens semelhantes a esta:

Recuo padrão permite escolher o número de espaços que a tecla Tab insere no Editor.

Importante: Detectar recuo substitui essa configuração e define o recuo como o do arquivo de origem. É necessário recarregar o DevTools. Ativar o tab para mover o foco substitui a tecla Tab. Ele move o foco em vez de inserir caracteres. Mostrar caracteres de espaço em branco: todos permite que você veja caracteres de espaço em branco como pontos (...) e tabulações como linhas (—).

Recuo padrão:

• 2 espaços
• 4 espaços
• 8 espaços
• Caractere de tabulação

Este exemplo mostra como definir o recuo padrão para oito espaços primeiro e, em seguida, para um caractere de tabulação.

Elementos

Esta seção lista as opções que personalizam o painel Elementos.

Mostrar o shadow DOM do user agent exibe nós do shadow DOM na árvore do DOM.

A opção Quebra automática de linha divide as linhas longas na árvore do DOM e as quebra para a linha seguinte.

Mostrar comentários HTML exibe comentários HTML na árvore do DOM.

Revelar nó do DOM ao passar o cursor seleciona o nó correspondente na árvore do DOM quando você passa o cursor sobre um elemento na janela de visualização no modo de inspeção .

Este vídeo mostra primeiro que os nós do DOM não estão selecionados na árvore do DOM. Em seguida, quando você ativa essa opção, o painel Elementos seleciona os nós ao passar o cursor.

Mostrar dica com inspeção detalhada exibe a dica na janela de visualização no modo de inspeção ao passar o cursor sobre um elemento.

Mostrar réguas ao passar o cursor exibe as réguas na janela de visualização quando você passa o cursor sobre os elementos na árvore do DOM.

Mostrar dicas da documentação do CSS exibe uma dica com uma breve descrição quando você passa o cursor sobre uma propriedade no painel Estilos.

O link Saiba mais leva você a uma referência de CSS do MDN sobre a propriedade.

Rede

Nesta seção, listamos as opções para personalizar o painel Rede. A maioria das opções é igual às configurações do painel.

Preservar registro é o mesmo que Preservar registro no painel Rede. Salva solicitações em carregamentos de página.

Este vídeo mostra primeiro o registro de solicitações atualizado ao recarregar a página e, em seguida, mantido quando você ativa essa opção.

Gravar registro de rede é o mesmo que Gravar registro de rede no painel Rede. Inicia ou interrompe a gravação de solicitações no registro de rede.

Ativar o bloqueio de solicitações de rede bloqueia solicitações que correspondem a padrões na gaveta Bloqueio de solicitações de rede.

Este vídeo mostra primeiro que as solicitações não estão bloqueadas. Depois de ativar essa opção, um padrão na gaveta Bloqueio de solicitação de rede vai bloquear as solicitações.

Desativar o cache (enquanto o DevTools estiver aberto) é o mesmo que Desativar o cache no painel Rede. Desativa o cache do navegador.

A opção Permitir a geração de HAR com dados sensíveis adiciona opções ao botão downloadExportar HAR que permitem exportar com ou sem dados sensíveis (limpos).

Os dados sensíveis são os dados nos cabeçalhos Cookie, Set-Cookie e Authorization.

Tipos de recursos com código de cores destaca as solicitações em cores diferentes, dependendo do tipo, na coluna Cascata do registro de rede.

Agrupar registro de rede por frame é o mesmo que Agrupar por frames no painel Rede. Essa opção agrupa as solicitações iniciadas por frames inline.

Forçar o bloqueio de anúncios neste site bloqueia os anúncios detectados na página enquanto o DevTools está aberto.

Desempenho

Nesta seção, listamos as opções para personalizar o painel Desempenho.

Ação da roda do mouse no Flame Chart atribui a ação de rolagem ou zoom à roda do mouse ao navegar no Flame Chart.

Ação da roda do mouse no Flame Chart:

• Rolar
• Zoom

Este exemplo mostra as ações de rolagem e zoom da roda do mouse em um Flame Chart no painel Performance.

Console

Nesta seção, listamos as opções para personalizar o Console. A maioria das opções é igual às de Configurações do console.

Ocultar mensagens de rede oculta as mensagens de rede no Console.

Este vídeo mostra como ocultar mensagens de rede com essa opção nas Configurações do e nas Configurações do console.

Somente contexto selecionado faz com que o Console mostre mensagens apenas para o contexto selecionado: top, iframe, worker ou extension.

Este vídeo mostra como ativar essa opção em Configurações e em Console > Configurações e selecionar o contexto no Console.

Registrar XMLHttpRequests faz com que o Console registre solicitações XHR e de busca.

Este vídeo mostra como ativar essa opção em Configurações e Console > Configurações e registrar as mensagens de XHR finished loading no Console.

Mostrar carimbos de data/hora faz com que o Console mostre carimbos de data/hora ao lado das mensagens.

O Preenchimento automático usando o histórico faz com que o Console sugira comandos que você executou anteriormente enquanto digita.

Você encontra a mesma opção em Console > Configurações.

Aceitar a sugestão de preenchimento automático ao pressionar Enter faz com que o Console aceite a sugestão selecionada no menu suspenso de preenchimento automático quando você pressiona Enter.

Este vídeo mostra o que acontece quando você pressiona Enter antes e depois de ativar essa opção.

Agrupar mensagens semelhantes no console faz com que o Console agrupe mensagens semelhantes.

Você encontra a mesma opção em Console > Configurações.

Mostrar erros de CORS no console faz com que o Console mostre os erros de CORS registrados.

Você encontra a mesma opção em Console > Configurações.

Com a avaliação antecipada, o Console mostra uma prévia da saída enquanto você digita um comando.

Você encontra a mesma opção em Console > Configurações.

Este vídeo mostra várias prévias de saída.

Tratar a avaliação do código como uma ação do usuário transforma qualquer comando executado no Console em uma interação do usuário.

Em outras palavras, ele define navigator.userActivation.isActive como true após a avaliação. Você encontra a mesma opção em Console > Configurações.

Este vídeo mostra o resultado da avaliação de navigator.userActivation.isActive antes e depois de ativar essa opção.

Abrir automaticamente as mensagens console.trace() faz com que o Console mostre as mensagens console.trace() abertas ao registrá-las.

Preserve log upon navigation faz com que o Console registre uma mensagem Navigated to em cada navegação e salve os registros em todas as páginas.

Você encontra a mesma opção em Console > Configurações.

Extensão

Esta seção lista as opções que personalizam o processamento de links para extensões do Chrome DevTools.

Processamento de links define uma opção para abrir arquivos quando você clica em um link para um arquivo de origem, por exemplo, no painel Elementos > Estilos.

Processamento de links:

• Automático. Abre arquivos no painel Origens por padrão.
• Opção arbitrária que pode ser adicionada por uma extensão do DevTools.

Persistência

Nesta seção, listamos as opções que controlam como o DevTools salva as mudanças que você faz.

A opção Ativar substituições locais faz com que o DevTools mantenha as mudanças feitas nas origens em todos os carregamentos de página.

Para mais informações, consulte Substituições locais.

Debugger

Esta seção lista as opções que controlam o comportamento do Debugger.

Com a opção Desativar JavaScript, você pode ver como sua página da Web fica e se comporta quando o JavaScript está desativado.

Atualize a página para ver se e como ela depende do JavaScript durante o carregamento.

Quando o JavaScript está desativado, o Chrome mostra o ícone correspondente na barra de endereço, e o DevTools mostra um ícone de aviso ao lado de Sources.

Disable async stack traces oculta a "história completa" da operação assíncrona na pilha de chamadas.

Por padrão, o Debugger tenta rastrear operações assíncronas se o framework que você está usando for compatível com esse rastreamento.

Para mais informações, consulte Ver stack traces assíncronos.

Global

Esta seção lista as opções que têm efeitos globais no DevTools.

Abrir o DevTools automaticamente para pop-ups abre o DevTools quando você clica em links que abrem novas guias. Ou seja, todos os links com target=_blank.

Primeiro, o vídeo mostra como clicar em um link e abrir uma nova guia *sem* o DevTools. Em seguida, quando você ativa essa opção, uma nova guia é aberta *com* o DevTools.

Pesquisar enquanto digita faz com que o DevTools "pule" para o primeiro resultado da pesquisa enquanto você digita a consulta de pesquisa. Se desativado, o DevTools só vai levar você ao resultado quando você pressionar Enter.

Este vídeo mostra como o DevTools "pula" conforme você digita uma consulta de pesquisa. Em seguida, quando você ativa essa opção, o DevTools leva você ao primeiro resultado ao pressionar Enter.

Sincronizar

Nesta seção, você pode configurar a sincronização de configurações entre dispositivos.

Ativar a sincronização de configurações permite sincronizar as configurações do DevTools em vários dispositivos.

Para usar essa configuração, primeiro ative a Sincronização do Chrome. Para mais informações, consulte Configurações de sincronização.