Preferências

Sofia Emelianova
Sofia Emelianova

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

Para definir as 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, pesquise o nome dela nesta página e add_circle para expandir sua 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 fim da guia Preferências e clique em Restaurar padrões e atualizar.

Aparência

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

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

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

O layout de painel Menu suspenso. organiza os painéis.

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: Mudando o layout do painel do elemento de horizontal para vertical.
  • horizontal
  • categoria
  • automático

O Language Menu suspenso. define a localidade para a interface do DevTools.

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

Idioma: Painel "Configurações" em chinês.
  • Idioma da interface do navegador
  • Uma das opções de local. 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 de estado pausado oculta a sobreposição Pausada no depurador Botões Play e Step over. na janela de visualização quando a execução do código é pausada.

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

A guia da gaveta "What's New".

Fontes

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

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

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

Caixa de seleção. Revelar automaticamente arquivos na barra lateral seleciona arquivos no painel Sources > 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 conforme você alterna entre as guias.

Caixa de seleção. A opção Ativar mapas de origem JavaScript permite que o DevTools encontre origens de arquivos JavaScript gerados ou minimizados.

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

Caixa de seleção. Ativar a guia move o foco faz com que a tecla Tecla Tab. Tab mova o foco no DevTools em vez de inserir um caractere de tabulação no Editor.

É necessário recarregar o DevTools.

Este vídeo mostra pela primeira vez os caracteres da guia inseridos com a tecla Tab. Assim, quando você ativar essa opção e recarregar o DevTools, a tecla Tab moverá o foco.

Caixa de seleção. Detectar recuo define o recuo para aquele do arquivo de origem aberto no Editor.

É necessário recarregar o DevTools.

Primeiro, esse vídeo mostra o recuo padrão de oito espaços. Então, quando você ativa essa opção, ela substitui o recuo padrão pelo recuo do arquivo de origem.

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

Esse vídeo primeiro não mostra sugestões. Quando você ativar essa opção, o Editor vai mostrar sugestões para conclusão do comando.

Caixa de seleção. O fechamento automático de colchetes adiciona automaticamente um parêntese ou tag de fechamento quando você digita uma de abertura.

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

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

Uma chave sem um par sublinhado em vermelho.

Caixa de seleção. O Dobramento de código permite 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 Menu suspenso. mostra esses caracteres no Editor.

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

  • Todos: indica todos os caracteres de espaço em branco como pontos (...). Além disso, o Editor indica o caractere Tab como uma linha ().
  • O elemento Final destaca caracteres de espaço em branco no final das linhas em vermelho claro.
Mostrar caracteres de espaço em branco: Opções selecionadas: Todas e Últimas.
  • Nenhum
  • Todas (...)
  • Final

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

O Debugger pausado durante a execução da função exibe valores de variáveis ao lado de declaraçõ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.

Esse vídeo mostra pela primeira vez o painel Sources fora de foco quando pausado em um ponto de interrupção. Assim, 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.

Caixa de seleção. O recurso imprimir fontes reduzidas automaticamente torna essas fontes legíveis.

No estilo de formatação, 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 impresso no painel Origens.

Caixa de seleção. A opção Ativar mapas de origem CSS permite que o DevTools encontre as origens dos arquivos CSS gerados (por exemplo, .scss) e mostre-as a você.

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 rolar mais do que a última linha no Editor.

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

Caixa de seleção. Permitir que o DevTools carregue recursos, como mapas de origem, de caminhos de arquivos remotos. Desativado por padrão por motivos de segurança.

Se essa opção for desativada, o DevTools vai registrar mensagens no Console como as seguintes:

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

O 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: Desativar as opções de substituição e alterar o recuo padrão de dois espaços para oito, 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 depois como um caractere de tabulação.

Elementos

Nesta seção, listamos opções que personalizam o painel Elementos.

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

O painel Elements mostra nós do shadow DOM.

Caixa de seleção. A Quebra de palavra quebra linhas longas na árvore do DOM e as une na próxima linha.

O painel Elementos divide linhas longas por palavras e as agrupa na próxima linha.

Caixa de seleção. Show HTML comments mostra 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 mouse sobre um elemento na janela de visualização no modo de inspeção Inspecionar..

Esse vídeo mostra pela primeira vez que os nós do DOM não estão selecionados na árvore do DOM. Quando você ativa essa opção, o painel Elementos seleciona os nós ao passar o cursor.

Caixa de seleção. Mostrar dica de inspeção detalhada exibe a dica na janela de visualização no modo de inspeção Inspecionar. quando você passa 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 janela de visualização quando você passa o mouse sobre os elementos na árvore DOM.

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

Caixa de seleção. Mostrar dica de documentação 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 CSS do MDN na propriedade.

Dica com a documentação sobre uma propriedade CSS.

Rede

Nesta seção, listamos 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 é o mesmo que Preservar registro no painel Rede. Salva solicitações nos carregamentos de página.

Esse vídeo mostra pela primeira vez o registro de solicitações atualizado ao recarregar a página e, em seguida, persistido 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.

O botão "Gravar registro de rede" no painel "Rede".

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. Então, depois que você ativar essa opção, eles serão bloqueados por um padrão na gaveta Network request block.

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

A caixa de seleção Desativar cache.

Caixa de seleção. Os tipos de recursos com código de cores destacam solicitações em cores diferentes, dependendo do tipo na coluna Waterfall do registro de rede.

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

Caixa de seleção. Agrupar registro 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. Forçar o bloqueio de anúncios neste site bloqueia anúncios detectados na página enquanto o DevTools estiver aberto.

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

Desempenho

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

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

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

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

Console

Esta seção lista opções que personalizam o Console. A maioria das opções são as mesmas que estão nas 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. A opção Somente contexto selecionado faz com que o Console mostre mensagens somente 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. Log XMLHttpRequests faz o Console registrar solicitações XHR e busca.

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

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

Mensagens com carimbos de data/hora listados no Console.

Caixa de seleção. O preenchimento automático do histórico faz com que o Console sugira comandos executados anteriormente enquanto 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ê pressionar 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 semelhantes 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 de CORS no console faz com que o Console mostre os erros de CORS registrados.

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

O console mostra erros de CORS.

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

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

Este vídeo mostra diversas visualizações de saída.

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

Em outras palavras, ele define navigator.userActivation.isActive como true no momento da 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. Expandir automaticamente as mensagens console.trace() faz com que o Console exiba mensagens console.trace() expandidas quando as registrar.

Uma mensagem console.trace() expandida no Console.

Caixa de seleção. A opção Preservar registro após a navegação faz com que o Console registre uma mensagem Navigated to em cada navegação e salva os registros em todas as páginas.

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

O console mostra as mensagens "Navigated to" e salva os registros em páginas diferentes.

Extensão

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

Processamento de links: Escolher uma opção para abrir links.
  • Automática. 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 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 nos carregamentos de página.

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

Debugger

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

Caixa de seleção. Desativar o JavaScript permite que você veja a aparência e o comportamento da sua página da Web quando o JavaScript está desativado.

Atualize a página para conferir se e como ela depende de 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.

Caixa de seleção. Desativar stack traces assíncronos 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 é compatível com esse 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 com efeitos globais no DevTools.

Este vídeo mostra como clicar em um link e abrir uma nova guia *sem* o DevTools. Depois, ao ativar essa opção, uma nova guia será aberta *com* o DevTools.

Caixa de seleção. Pesquisar enquanto você digita faz o DevTools "pular" para o primeiro resultado da pesquisa enquanto você digita sua consulta de pesquisa. Se desativada, o DevTools leva ao resultado somente quando você pressionar Enter.

Esse vídeo primeiro mostra como o DevTools "pula" quando você digita uma consulta de pesquisa. Assim, quando você ativar essa opção, o DevTools vai levar você ao primeiro resultado ao pressionar Enter.

Sincronização

Nessa seção, é possível configurar a sincronização de configurações entre dispositivos.

Caixa de seleção. 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. Veja mais informações em Configurações de sincronização.