Esta página lista as maneiras de personalizar o Chrome DevTools.
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.
- Abra o menu de comandos.
Comece a digitar
dark
, selecione o comando Mudar para o tema escuro e pressione Enter para executar o comando.Também é possível definir o tema em 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:
- Abra uma nova guia e clique em Editar Personalizar o Chrome no canto inferior direito.
- Em Aparência, escolha um tema no plano de fundo Alterar temas ou selecione uma paleta de cores.
Gaveta
A gaveta contém muitos recursos ocultos.
Pressione Esc para abrir ou fechar a gaveta.
Clique em More Tools para abrir 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 Personalizar e controlar DevTools e clique em:
- Desencaixar em uma janela separada
- Encaixe para a esquerda
- Encaixe para baixo
- Encaixe para a direita
Menu de comando:
- Abra o menu de comandos.
- Comece a digitar
dock
e selecione uma das opções sugeridas: encaixar embaixo, à esquerda, à direita, desencaixar ou restaurar a última posição da base.
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 o idioma da interface do DevTools
Consulte Configurações > Preferências > Aparência > Idioma.
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.
É possível ativar ou desativar a sincronização de configurações do DevTools separadamente usando a caixa de seleção Configurações > Sincronização > Ativar sincronização de configurações.
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.
No entanto, a configuração dock não é sincronizada, porque os desenvolvedores têm preferências de base diferentes ao depurar em sites diferentes.
Personalizar atalhos do teclado
Consulte Configurações > Atalhos.
Ativar experimentos
Consulte Configurações > Experimentos.