Configure a aparência e o comportamento do DevTools e dos painéis dele usando 
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 > Preferências e role para baixo até uma das seções descritas a seguir.
Para descobrir a função de cada configuração, pesquise o nome dela na página e amplie 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 para baixo 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 
define um tema de cores para a interface do DevTools.
O layout de painel 
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.
Formato de cor 
define o formato dos valores de cor CSS em Elementos > Estilos.
O DevTools converte automaticamente qualquer valor de cor válido para o formato escolhido.
O Language 
define a localidade para a interface do DevTools.
Para aplicar essa configuração, recarregue o DevTools.
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.
Desativar a sobreposição de estado pausado oculta a sobreposição Pausada no depurador 
na janela de visualização quando a execução do código é pausada.
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.
Fontes
Esta seção lista 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 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.
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.
A opção Ativar mapas de origem JavaScript permite que o DevTools encontre origens de arquivos JavaScript gerados ou minimizados.
Ativar a guia move o foco faz com que a tecla 
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.
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.
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.
A correspondência de colchetes sublinha e destaca em vermelho claro no Editor um colchete, chave ou parêntese sem um par.
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 
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.
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 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.
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ê.
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.
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:
O recuo padrão 
permite escolher o número de espaços que a tecla 
Tab insere no Editor.
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.
Show user agent shadow DOM exibe nós do shadow DOM na árvore do DOM.
A Quebra de palavra quebra linhas longas na árvore do DOM e as une na próxima linha.
Show HTML comments mostra comentários HTML na árvore DOM.
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 
.
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.
Mostrar dica de inspeção detalhada exibe a dica na janela de visualização no modo de inspeção 
quando você passa o cursor sobre um elemento.
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.
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.
Rede
Nesta seção, listamos as opções que personalizam 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 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.
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. Então, depois que você ativar essa opção, eles serão bloqueados por um padrão na gaveta Network request block.
Desativar o cache (enquanto o DevTools estiver aberto) é o mesmo que Desativar o cache no painel Rede. Desativa o cache do navegador.
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.
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.
Forçar o bloqueio de anúncios neste site bloqueia anúncios detectados na página enquanto o DevTools estiver aberto.
Desempenho
Esta seção lista opções que personalizam o painel Desempenho.
Ação da roda do mouse do Flame Chart 
atribui a ação de rolagem ou zoom à roda do mouse quando você navega pelo Flame Chart.
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.
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
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 
e em Console > Configurações e selecionar o contexto no Console.
Log XMLHttpRequests faz o Console registrar solicitações XHR e busca.
Este vídeo mostra como ativar essa opção em 
Configurações e Console > Configurações e registrar as mensagens do 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 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.
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.
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.
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.
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.
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.
Expandir automaticamente as mensagens console.trace() faz com que o Console exiba mensagens console.trace() expandidas quando as registrar.
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.
Extensão
Esta seção lista opções que personalizam o tratamento de links para extensões do Chrome DevTools.
O gerenciamento 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.
Persistência
Esta seção lista opções que controlam como o DevTools salva as mudanças feitas.
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.
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 
correspondente na barra de endereço, e o DevTools mostra um ícone de aviso 
ao lado de Sources.
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.
Para mais informações, consulte Visualizar stack traces assíncronos.
Global
Esta seção lista as opções com efeitos globais no DevTools.
A opção 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.
Este vídeo mostra como clicar em um link e abrir uma nova guia sem o DevTools. Então, quando você ativar essa opção, uma nova guia será aberta com o DevTools.
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.
Ativar a sincronização das 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.