Personalizar DevTools

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Esta página lista as maneiras de personalizar as Ferramentas do desenvolvedor do Chrome.

Configurações

Configurações > As Preferências (link em inglês) contêm muitas opções para personalizar o DevTools.

Consulte Abrir as configurações e Preferências.

Tema escuro

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

Tema escuro.

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

    O comando de tema escuro.

  3. Você também pode definir o tema em Configurações > Preferências > Aparência > Temas.

Tema dinâmico

As DevTools podem combinar automaticamente com o tema de cores do Chrome.

Para definir um tema:

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

O DevTools corresponde ao tema de cor selecionado em Aparência.

Gaveta

A Gaveta contém muitos recursos ocultos.

Pressione Escape para abrir ou fechar a gaveta.

A gaveta.

Clique em Mais ferramentas para abrir outra gaveta guias.

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

Mudar posicionamento do DevTools

Por padrão, o DevTools fica fixado à direita da janela de visualização. Você também pode fixar na lateral inferior ou esquerda ou desencaixar o DevTools em uma janela separada.

É possível mudar a posição das Ferramentas do desenvolvedor de duas maneiras:

  • Menu principal: abra Personalizar e controlar DevTools e clique em:
    • Desafixar em uma janela separada
    • Encaixar à esquerda
    • Encaixar na base
    • Dock to right
  • Menu de comando:

    1. Abra o Command Menu.
    2. Comece a digitar dock e selecione uma das opções sugeridas: encaixar na parte de baixo, esquerda, direita, desencaixe ou restaurar a última posição de encaixe.

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

Para alternar para Restaurar a última posição da base com um atalho de teclado, pressione:

  • No Linux ou 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 direita qualquer uma das seguintes opções:

  • Painéis na parte superior do DevTools.
  • Painéis no painel Elements, como Styles, Computed, Layout e 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, você pode mover painéis e guias para cima e para baixo na 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 personalizada das guias 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. É possível desativar a reorganização automática. Acesse Configurações > Preferências > Aparência e atualize o layout do painel de acordo com sua preferência.

Por exemplo, o painel Estilos no painel Elementos vai se mover da lateral para a parte de baixo quando o tamanho da tela for pequeno. Se você quiser que o painel de estilo fique sempre na lateral, mude o layout do painel para vertical.

Alterar layout do painel

Mudar o idioma da interface das Ferramentas do desenvolvedor

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

Mude o idioma acessando "Configurações" e depois "Preferências".

Configurações de sincronização

É possível sincronizar as configurações do DevTools em vários dispositivos.

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

Sincronização do perfil do Chrome.

Você pode ativar ou desativar a sincronização das configurações do DevTools separadamente usando as Configurações > Sincronizar > Ativar a sincronização das configurações.

Configurações de sincronização do DevTools

O DevTools sincroniza a maioria das configurações, exceto as das guias Workspace, Experiments e Devices, além de algumas outras configurações gerais. O estado da caixa de seleção Ativar sincronização das 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 diferentes preferências de dock ao depurar em sites distintos.

A base.

Personalizar atalhos do teclado

Consulte Configurações > Atalhos.

Ativar experimentos

Consulte Configurações > Experimentos.