Alterar o posicionamento de DevTools (Undock, Dock para inferior, Doca para a esquerda)

Você pode alterar onde DevTools está encaixado no navegador. Por padrão, o Microsoft Edge DevTools está encaixado à direita da janela do navegador. Você também pode encaixar DevTools na parte inferior ou esquerda da janela ou desencaixar DevTools em uma janela separada.

Para alterar onde o DevTools é colocado na janela do navegador:

  • Clique no botão de menu Personalizar e controlar DevTools (personalizar e controlar o ícone DevTools) e, na seção Local do Dock , selecione uma opção de layout:
    • Desencaixar em janela separada (ícone 'Desencaixar em janela separada')
    • Encaixe para a esquerda (ícone 'Doca à esquerda')
    • Encaixe na parte inferior (ícone 'Encaixe para baixo')
    • Encaixe para a direita (ícone 'Encaixe à direita')

O menu Local do Dock em DevTools

O encaixe para a esquerda ou o Dock para a direita mantém o DevTools lado a lado com sua página da Web e é excelente quando você emula dispositivos móveis (Emulação de Dispositivo). As opções Doca para a esquerda e Encaixe para a direita funcionam melhor com exibições de alta resolução.

Desencaixar DevTools em uma janela separada

Desencaixe DevTools em sua própria janela separada, quando você quiser trabalhar com vários monitores ou se precisar trabalhar em um aplicativo de tela inteira e desejar muito espaço para a interface do usuário do DevTools. A imagem a seguir mostra DevTools desencaixado em sua própria janela dedicada:

DevTools desencaixados em uma janela separada

Como o DevTools agora tem sua própria janela dedicada, a página que está sendo projetada agora ocupa uma janela inteira do navegador:

Página da Web que está em design, agora separada da janela DevTools, que está desencaixada da janela da página da Web do navegador

Encaixe DevTools no lado esquerdo do navegador

A imagem a seguir mostra DevTools encaixado no lado esquerdo da janela do navegador:

DevTools encaixados à esquerda

Dock DevTools na parte inferior do navegador

O encaixe na parte inferior ajuda quando você não tem espaço de exibição horizontal suficiente ou deseja depurar texto longo no DOM ou console. A imagem a seguir mostra DevTools na parte inferior da janela do navegador:

DevTools encaixados na parte inferior

Encaixe DevTools no lado direito do navegador

A imagem a seguir mostra DevTools no lado direito da janela do navegador, que é o local padrão:

DevTools encaixados à direita

Alterar onde DevTools está encaixado usando o Menu de Comando

  1. Abra o Menu de Comando. Para fazer isso, clique no botão Personalizar e controlar DevTools (Personalizar e controlar o ícone DevTools) e clique em Executar comando. Ou pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS).

  2. Digite dock e selecione um comando de encaixe:

    • Encaixe na parte inferior
    • Encaixe para a esquerda
    • Encaixe para a direita
    • Restaurar a última posição do dock
    • Desencaixar em janela separada