Preferências

Sofia Emelianova
Sofia Emelianova

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

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

A seção "Aparência" na guia "Preferências".

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

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

  • Caixa de seleção. Caixas de seleção
  • Listas suspensas Menu suspenso.
  • Obsoleto. 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 das Ferramentas do desenvolvedor.

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

Temas: Mudança do tema das DevTools de preferência do sistema para escuro e claro.
  • Preferências do sistema
  • Claro
  • Escuro

O layout de painéis Menu suspenso. organiza painéis em painéis.

Afetará Elementos > Estilos e guias relacionados, além do painel Origens > Depuração. A opção auto faz com que o layout dependa da largura do DevTools.

Layout do painel: Mudar o layout do painel do elemento de horizontal para vertical.
  • horizontal
  • categoria
  • automático

Language Menu suspenso. define a localidade da interface do DevTools.

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

Idioma: O painel "Configurações" em chinês.
  • Idioma da interface do navegador
  • Uma das opções de localidade, neste exemplo, chinês

Caixa de seleção. Ativar o atalho Ctrl/Cmd + 0-9 para trocar de painel permite abrir painéis usando o teclado.

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

Caixa de seleção. Desativar a sobreposição no estado pausado oculta a sobreposição Botões "Play" e "Step over". Paused in debugger na viewport quando a execução do código está pausada.

Caixa de seleção. Mostrar novidades após cada atualização abre automaticamente a guia Novidades da gaveta após cada atualização do Chrome.

Guia "Novidades" da gaveta.

Fontes

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

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

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

Caixa de seleção. Revelar arquivos automaticamente na barra lateral seleciona arquivos no painel Origens > Página quando você alterna entre as guias no Editor.

Este vídeo mostra como, com essa opção ativada, o painel Origens seleciona arquivos na árvore de navegação ao alternar entre as guias.

Caixa de seleção. Ativar mapas de origem JavaScript permite que as Ferramentas do desenvolvedor encontrem origens de arquivos JavaScript gerados ou minificados.

O painel "Sources" mostra um link para o arquivo minificado na barra de status.

Caixa de seleção. Ativar mudança de foco com a tecla Tab faz com que a tecla Tecla Tab. Tab mova o foco dentro das Ferramentas do desenvolvedor em vez de inserir um caractere Tab no Editor.

É necessário recarregar o DevTools.

Este vídeo mostra primeiro os caracteres de tabulação inseridos com a tecla Tab. Quando você ativar essa opção e recarregar o DevTools, a tecla Tab vai mover o foco.

Caixa de seleção. Detect indentation define a indentação como a do arquivo de origem aberto no Editor.

É necessário recarregar o DevTools.

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

Caixa de seleção. O preenchimento automático ativa sugestões úteis no Editor.

Este vídeo não mostra nenhuma sugestão. Quando você ativa essa opção, o Editor mostra sugestões para a conclusão do comando.

Caixa de seleção. Fechamento automático de parênteses adiciona automaticamente uma chave ou tag de fechamento quando você digita uma de abertura.

Este vídeo mostra como digitar chaves de abertura antes e depois de ativar o fechamento automático de chaves.

Caixa de seleção. A correspondência de colchetes sublinha e destaca em vermelho claro no Editor um colchete, colchete angular ou parêntese sem um par.

Um colchete sem par sublinhado em vermelho.

Caixa de seleção. O dobramento de código permite dobrar e desdobrar blocos de código em colchetes 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 Menu suspenso. mostra caracteres de espaço em branco no Editor.

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

  • All (todos) denota todos os caracteres de espaço em branco como pontos (...). Além disso, o Editor denota o caractere Tab como uma linha ().
  • Trailing destaca os caracteres de espaço em branco no final das linhas em vermelho claro.
Mostrar caracteres de espaço em branco: Opções selecionadas: "All" e "Trailing".
  • Nenhum
  • Todas (...)
  • Trailing

Caixa de seleção. 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.

O depurador pausado durante a execução da função mostra os valores das variáveis ao lado das instruções de atribuição.

Caixa de seleção. O painel "Focus Sources" ao acionar um ponto de interrupção abre Sources > Editor na linha com o ponto de interrupção que pausou a execução.

O vídeo mostra primeiro o painel Origens desfocado quando pausado em um ponto de interrupção. 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.

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

Quando mostrado em formato legível, 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.

Código formatado no painel "Origens".

Caixa de seleção. Ativar mapas de origem de CSS permite que as Ferramentas do desenvolvedor encontrem e mostrem as origens dos arquivos CSS gerados, por exemplo, .scss.

O painel "Sources" mostra arquivos .scss na seção "Authored" da árvore de navegação. O painel "Estilos" no painel "Elementos" mostra links para origens .scss ao lado das regras CSS.

Caixa de seleção. Permitir rolagem após o fim do arquivo permite que você role além da última linha no Editor.

Este vídeo mostra como rolar além do final do arquivo quando você ativar essa opção.

Caixa de seleção. Permitir que as Ferramentas do desenvolvedor carreguem recursos, como mapas de origem, de caminhos de arquivo remotos. Desativado por padrão por motivos de segurança.

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

Uma mensagem no console informando que o carregamento de um caminho de arquivo remoto é proibido por motivos de segurança.

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

Recuo padrão: Desativação de opções de substituição e mudança da indentação padrão de dois espaços para oito e depois para a tecla Tab.
  • 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.

Caixa de seleção. Mostrar o shadow DOM do user agent exibe os nós do shadow DOM na árvore do DOM.

O painel "Elements" mostra os nós DOM de sombra.

Caixa de seleção. O quebra automática de palavras divide linhas longas na árvore DOM e as transfere para a próxima linha.

O painel "Elements" divide as linhas longas por palavras e as exibe na próxima linha.

Caixa de seleção. Mostrar comentários HTML exibe comentários HTML na árvore DOM.

O painel "Elementos" mostra comentários HTML.

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

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

Caixa de seleção. Mostrar dica de inspeção detalhada mostra a dica na visualização no modo de inspeção Inspecionar. ao passar o cursor sobre um elemento.

A dica detalhada mostrada no modo de inspeção.

Caixa de seleção. Mostrar réguas ao passar o cursor mostra as réguas na viewport ao passar o cursor sobre elementos na árvore DOM.

Réguas mostradas na janela de visualização.

Caixa de seleção. A opção Mostrar dica da documentação do CSS exibe uma dica com uma breve descrição quando você passa o cursor sobre uma propriedade no painel Styles.

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

A dica com documentação sobre uma propriedade CSS.

Rede

Esta seção lista as opções que personalizam o painel Rede. A maioria das opções é igual às configurações do painel.

Caixa de seleção. Preservar registro é igual a Preservar registro no painel Rede. Salva solicitações em vários carregamentos de página.

Este vídeo mostra primeiro o registro de solicitações atualizado na recarga da página e depois mantido quando você ativa essa opção.

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

Botão "Record network log" no painel "Network".

Caixa de seleção. 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 que você ativar essa opção, um padrão na gaveta Bloqueio de solicitações de rede vai bloquear essas solicitações.

Caixa de seleção. Desativar o cache (enquanto o DevTools está aberto) é o mesmo que Desativar o cache no painel Rede. Desativa o cache do navegador.

Caixa de seleção "Desativar cache".

Caixa de seleção. A opção Permitir a geração de HAR com dados sensíveis adiciona opções ao botão Exportar 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.

As duas opções do botão "Export HAR".

Caixa de seleção. Tipos de recursos com codificação de cores destaca solicitações em cores diferentes, dependendo do tipo delas, na coluna Cascata do registro de rede.

Coluna "Cascata" na guia "Rede" sem e com codificação por cores.

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

O registro de solicitações de rede com solicitações agrupadas por frames inline.

Caixa de seleção. A opção Forçar o bloqueio de anúncios nesse site bloqueia os anúncios detectados na página enquanto o DevTools está aberto.

Uma solicitação de rede relacionada a anúncios mostrada no painel de rede com o filtro "Solicitações bloqueadas" ativado.

Desempenho

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

A ação da roda do mouse no Flame Chart Menu suspenso. atribui a ação de rolagem ou zoom à roda do mouse quando você navega pelo gráfico.

Ação da roda do mouse no Flame Chart: Mudança da ação da roda do mouse de rolagem para zoom no Flame Chart.
  • Rolagem
  • Zoom

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

Console

Esta seção lista as opções que personalizam o console. A maioria das opções é igual às Configurações do console.

Opções semelhantes no console e nas configurações.

Caixa de seleção. 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 Configurações. e nas Configurações do console.

Caixa de seleção. Somente contexto selecionado faz com que o Console mostre mensagens apenas para o contexto selecionado: superior, iframe, worker ou extensão.

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

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

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

Caixa de seleção. Mostrar carimbos de data/hora faz com que o console mostre os carimbos de data/hora ao lado das mensagens.

Mensagens com marcações de tempo listadas no console.

Caixa de seleção. O preenchimento automático do histórico faz com que o Console sugira comandos que você executou anteriormente enquanto você digita.

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

Menu suspenso de preenchimento automático com uma opção de comando do histórico do Console.

Caixa de seleção. 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.

Caixa de seleção. A opção Agrupar mensagens parecidas no console faz com que o Console agrupe mensagens semelhantes.

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

Mensagens semelhantes no console agrupadas.

Caixa de seleção. Mostrar erros do CORS no console faz com que o console mostre os erros do CORS registrados.

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

O console mostra erros do CORS.

Caixa de seleção. A avaliação antecipada faz com que o Console mostre uma prévia de uma saída enquanto você digita um comando.

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

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

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

Em outras palavras, ele define navigator.userActivation.isActive como true após a avaliação. Você pode encontrar 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.

Caixa de seleção. Abrir automaticamente as mensagens console.trace() faz com que o console mostre as mensagens console.trace() abertas quando elas forem registradas.

Uma mensagem console.trace() expandida no console.

Caixa de seleção. Preservar o registro na navegação faz com que o console registre uma mensagem Navigated to em cada navegação e salve os registros em todas as páginas.

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

O console mostra mensagens "Navegou para" e salva registros em diferentes páginas.

Extensão

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

Processamento de links: Como escolher uma opção para abrir 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

Esta seção lista as opções que controlam como o DevTools salva as mudanças feitas.

Caixa de seleção. Ativar substituições locais faz com que o DevTools mantenha as mudanças feitas nas origens durante o carregamento da página.

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

Debugger

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

Caixa de seleção. Desativar JavaScript permite que você veja como sua página da Web fica e se comporta quando o JavaScript está desativado.

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

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

Um ícone na barra de endereço e um ícone de aviso ao lado de "Origens" no DevTools.

Caixa de seleção. Desativar stack traces assíncronos oculta a "história completa" da operação assíncrona na stack de chamadas.

Por padrão, o Depurador tenta rastrear operações assíncronas se o framework usado oferecer suporte a esse tipo de rastreamento.

A operação assíncrona na pilha de chamadas.

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

Global

Esta seção lista as opções que têm efeitos globais nas Ferramentas do desenvolvedor.

Primeiro, este vídeo mostra como clicar em um link e abrir uma nova guia *sem* usar o DevTools. Quando você ativa essa opção, uma nova guia é aberta *com* as ferramentas do desenvolvedor.

Caixa de seleção. A pesquisa ao digitar faz com que o DevTools "pule" para o primeiro resultado de pesquisa à medida que você digita a consulta. Se desativado, o DevTools só vai mostrar o resultado quando você pressionar Enter.

Neste vídeo, mostramos primeiro como as Ferramentas do desenvolvedor "pulam" à medida que você digita uma consulta de pesquisa. Quando você ativar essa opção, o DevTools vai levar você ao primeiro resultado quando você pressionar Enter.

Sincronização

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

Caixa de seleção. A opção Ativar a sincronização de configurações permite sincronizar as configurações das Ferramentas do desenvolvedor em vários dispositivos.

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