Preferências

Sofia Emelianova
Sofia Emelianova

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

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

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

Para descobrir a função de cada configuração, procure o nome dela nesta página e use o comando para expandir a descrição.

Esta referência indica configurações diferentes 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 do DevTools.

Temas: Mudando o tema do DevTools de preferência do sistema para escuro para claro.
  • Preferências do sistema
  • Claro
  • Escuro

Afeta Elementos > Estilos e guias irmãs e o painel Origens > Debugger. 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

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, em chinês

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

Fontes

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

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

O painel Origens mostra um link para o arquivo reduzido na barra de status.

É necessário recarregar o DevTools.

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

É necessário recarregar o DevTools.

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

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

Esse vídeo mostra como digitar a abertura de parênteses antes e depois de ativar o fechamento automático de parênteses.

Exige recarregar o DevTools.

Este vídeo mostra como dobrar blocos de código quando você ativa essa opção.

É 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 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

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 Sources e mostra a linha de código com o ponto de interrupção.

Com muito texto, 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".
O painel Origens mostra arquivos .scss na seção Authored da árvore de navegação. O painel Styles no painel Elements mostra links para fontes .scss ao lado das regras CSS.

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

Se essa opção estiver desativada, o DevTools registrará as mensagens do Console semelhantes às seguintes:

Uma mensagem no Console informando que o carregamento de um caminho de arquivo remoto é proibido por motivos de segurança.
Recuo padrão: Desativação das opções de substituição e alteração do recuo padrão de dois espaços para oito e, em seguida, 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 opções que personalizam o painel Elementos.

Neste vídeo, mostramos 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.

Rede

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

Preservar registro no painel Rede. Salva solicitações nos 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.

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".

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ção de rede vai bloquear essas solicitações.

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.

Desempenho

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

Ação da roda do mouse no Flame Chart: Mudança da ação da roda do mouse de rolagem para zoom no gráfico de chamas.
  • 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 são as mesmas das Configurações do console.

Opções semelhantes no Console e nas Configurações.

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

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

Em outras palavras, ele define navigator.userActivation.isActive como true após a avaliação. A mesma opção está disponível 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.

Extensão

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

Processamento de links: Escolher uma opção para abrir links.
  • Automático. Abre os 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 as DevTools salvam as alterações feitas.

Debugger

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

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 Sources.

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

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* o DevTools.

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.

Este vídeo mostra primeiro como o DevTools "pula" quando 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

Esta seção permite definir a sincronização de configurações entre dispositivos.