Personalizar DevTools

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Esta página lista as maneiras de personalizar o Chrome DevTools.

Configurações

Configurações. Settings > Preferences contém muitas opções para personalizar o DevTools.

Consulte Abrir configurações e Preferências.

Tema escuro

É possível ativar o tema escuro em Configurações ou no Menu de comando.

O tema escuro.

  1. Abra o menu de comandos.
  2. Comece a digitar dark, selecione o comando Mudar para o tema escuro e pressione Enter para executar o comando.

    O comando do tema escuro.

  3. Também é possível definir o tema em Configurações. Configurações > Preferências > Aparência > Temas.

Tema dinâmico

O DevTools pode combinar automaticamente o tema de cores do Chrome.

Para definir um tema:

  1. Abra uma nova guia e clique em Editar Personalizar o Chrome no canto inferior direito.
  2. Em Aparência, escolha um tema no plano de fundo Alterar temas ou selecione uma paleta de cores.

O DevTools corresponde ao tema de cores selecionado em "Appearance".

Gaveta

A gaveta contém muitos recursos ocultos.

Pressione Esc para abrir ou fechar a gaveta.

A gaveta

Clique em Mais ferramentas. More Tools para abrir outras guias Gaveta.

O botão Mais ferramentas que abre outras guias Gaveta.

Mudar o posicionamento do DevTools

Por padrão, o DevTools está encaixado à direita da janela de visualização. Também é possível encaixar na parte inferior ou esquerda ou tirar o DevTools em uma janela separada.

É possível alterar o posicionamento do DevTools de duas maneiras:

  • Menu principal: abra Mais. Personalizar e controlar DevTools e clique em:
    • Desafixar. Desencaixar em uma janela separada
    • Fixar à esquerda Encaixe para a esquerda
    • Fixar na parte de baixo. Encaixe para baixo
    • Fixar à direita. Encaixe para a direita
  • Menu de comando:

    1. Abra o menu de comandos.
    2. Comece a digitar dock e selecione uma das opções sugeridas: encaixar embaixo, à esquerda, à direita, desencaixar ou restaurar a última posição da base.

Opção de encaixe sugerida no menu de comandos.

Para ativar ou desativar a opção Restaurar última posição da base com um atalho de teclado, pressione:

  • No Linux ou no Windows: Control + Shift + D
  • No MacOS: Command + Shift + D

Reordenar painéis, guias e painéis

Para alterar a ordem, clique e arraste para a esquerda ou para a direita em um dos seguintes itens:

  • na parte de cima do DevTools.
  • Painéis no painel Elementos, como Estilos, Calculado, Layout, entre outros.
  • Painéis no painel Origens, como Página, Espaço de trabalho, Substituições, entre outros.
  • Guias da gaveta na parte de baixo do DevTools.

Além disso, é possível mover painéis e guias para cima e para baixo de e para a Gaveta. Para fazer isso, clique com o botão direito do mouse no painel ou na guia e selecione Mover para o início ou Mover para o fim no menu suspenso.

A ordem das guias personalizadas persiste entre as sessões do DevTools.

Layout do painel

Por padrão, o DevTools reorganiza automaticamente o layout do painel, dependendo do tamanho da janela. Você pode desativar o reordenamento automático. Acesse Configurações > atualize o layout do painel com base na sua preferência.

Por exemplo, o painel "Estilos" em Elementos vai passar da lateral para a parte de baixo quando o tamanho da tela for pequeno. Se você quiser que o painel Estilo fique sempre na lateral, altere o layout do painel para vertical.

Mudar layout do painel

Mudar o idioma da interface do DevTools

Consulte Configurações. Configurações > Preferências > Aparência > Idioma.

Para mudar o idioma, acesse "Configurações" e "Preferências"

Configurações de sincronização

Você pode sincronizar as configurações do DevTools em vários dispositivos.

Para ativar a sincronização, ative a Sincronização do Chrome. Depois de ativada, as configurações do DevTools são sincronizadas por padrão.

Sincronização de perfis do Chrome.

É possível ativar ou desativar a sincronização de configurações do DevTools separadamente usando a caixa de seleção Configurações. Configurações > Sincronização > Caixa de seleção. Ativar sincronização de configurações.

Configurações de sincronização do DevTools

O DevTools sincroniza a maioria das configurações, exceto as guias Espaço de trabalho, Experimentos e Dispositivos e algumas outras configurações gerais. O estado da caixa de seleção Ativar sincronização de configurações também é sincronizado entre os dispositivos.

Por exemplo, as configurações de Aparência a seguir são sincronizadas para que você tenha uma experiência consistente em todos os dispositivos e não precise redefinir as mesmas configurações novamente.

As configurações de aparência.

No entanto, a configuração dock não é sincronizada, porque os desenvolvedores têm preferências de base diferentes ao depurar em sites diferentes.

A base.

Personalizar atalhos do teclado

Consulte Configurações > Atalhos.

Ativar experimentos

Consulte Configurações > Experimentos.