Como reposicionar as Ferramentas do desenvolvedor do Chrome

489

As ferramentas são abertas na parte inferior da janela do Chrome por padrão. Essa é uma péssima escolha para uma tela widescreen, pois há muito espaço vazio à direita, mas não há muito espaço vertical disponível. Infelizmente, não encontrei nenhuma maneira de reposicionar as ferramentas. Eu gostaria de tê-los do lado, semelhante ao firebug.

A única opção semelhante ao que eu quero é desanexar as ferramentas de desenvolvimento e colocar o chrome e a janela de ferramentas lado a lado. Porém, isso não é muito conveniente para tabulação rápida do IDE para o navegador e vice-versa; portanto, uma solução "integrada" seria legal.

google-chrome google-chrome-devtools kostja
fonte
github.com/melat0nin/chrome-devtools-vertical
Raghav
stackoverflow.com/questions/14386994/…
Nate

Respostas:

895

Chrome 46 ou mais recente

Clique no botão de reticências verticais (⋮) e escolha a opção de encaixe desejada.

Chrome 45 ou mais antigo

Mantenha pressionado o ícone do encaixe no canto superior direito. Aparece uma opção para alterar a docking

Para alterar a divisão entre os painéis HTML e CSS, acesse DevTools em Configurações (F1)> Geral> Aparência> Layout do painel.

Loislo
fonte
2
Legal, ela está presente na versão estável, eu simplesmente não estava ciente disso, tem ainda mais agradável opções :) Thanks
kostja
8
nas versões recentes do chrome e canary, a opção foi removida, mas você ainda pode acessá-lo clicando e segurando o ícone do dock na parte inferior esquerda, e aparece uma opção de encaixe para a direita.
Paul Spencer
2
Legal, encaixe para a direita funciona. Agora, como movo o inspetor de CSS na guia Elementos para a parte inferior do painel de ferramentas de desenvolvimento? Caso contrário, eu tenho que visualizar o HTML e o CSS lado a lado em colunas muito estreitas.
Vicky Chijwani
11
Que design horrível! Em nenhum lugar eu descobriria sozinho. Em nenhum outro lugar eu já vi essa espera e espera ser usada.
Dmitri Zaitsev
4
@blrbr Sim, é verdade. Se você precisar fazer uma pesquisa no Google apenas para descobrir como ativar uma opção que você sabe que existe, há algo errado com o design da interface do usuário. A palavra-chave aqui é 'descoberta'. Isso não é fácil de descobrir.
Stijn de Witt
70

Coloque o ponteiro no botão dock e clique longo (alguns segundos) ou clique direito e esquerdo do mouse, dependendo da versão do navegador.

insira a descrição da imagem aqui insira a descrição da imagem aqui

user3246105
fonte
41

Atalho do teclado para alternar a posição de acoplamento (lateral / inferior)

CTRL+ SHIFT+D

E há muitos atalhos que você pode vê-los acessando

Configurações »Atalhos , conforme exibido aqui:
Captura de tela das configurações

Como alternativa, use CTRL+ ?para ir para as configurações, a partir daí é possível acessar o subitem "Atalhos" à esquerda ou usar a referência oficial .

Alupotha
fonte
6
⌘-Shift-D no OSX também.
Meatspace # 13/16
2
Se você não consegue abrir o dock, tente Ctrl+Shift+I- mas se sua janela for pop-up, acho que o dock nem funciona.
Noumenon
Obrigado! O Inspetor estava de alguma forma preso FORA da tela, CTRL + SHIFT + D encaixou-o para mim!
Stan Stan
1
Por algum motivo, quando desacopro as ferramentas de desenvolvedor do Chrome, a ferramenta parece correr para a direita do meu monitor e não é mais visível. A única maneira de fazê-lo aparecer novamente é Ctrl + Shift + D e encaixe as ferramentas do desenvolvedor na lateral ou na parte inferior. Isso é estranho
jazzBox 28/02
Gostaria apenas de declarar meu amor por você. Cur
Curtis Blackwell
18

Parece que agora está no canto inferior esquerdo como um ícone com janelas sobrepostas e o "Desencaixar na janela separada". dica de ferramenta.

insira a descrição da imagem aqui

brian_d
fonte
13
Você pode esclarecer que é necessário clicar e segurar esse botão para encaixar à direita. Como o @PaulSpencer notou, basta clicar apenas em desencaixes.
0x89
11

Depois de colocar meu encaixe à direita (ver respostas mais antigas), ainda encontrei os painéis divididos verticalmente.

Para dividir os painéis horizontalmente - e ainda mais com a largura da tela - vá para Configurações (canto inferior direito) e remova a opção 'Dividir painéis verticalmente quando encaixados na direita'.

Agora, você tem todos os painéis da esquerda para a direita: p

user2243570
fonte
8

Em outubro de 2014, versão 39.0.2171.27 beta (64 bits)

Eu precisava entrar no painel do Chrome Web Developper em "Configurações" e desmarcar Dividir painéis verticalmente quando encaixados à direita

Pierre Maoui
fonte
1

A versão 56.0.2924.87 em que estou agora, desacopla o DevTools automaticamente se você NÃO estiver em uma área de trabalho. Caso contrário, abra uma NOVA nova guia Chrome e Inspecione para encaixar o DevTools novamente na janela.

Charix
fonte
O que você quer dizer com "não em uma área de trabalho"? Estou no 59.0.3067.6 (dev) e ele está fazendo algumas coisas estranhas em certos sites. Por exemplo, no Vtiger 6.5, clicar com o botão direito do mouse e "inspecionar" abre as ferramentas de desenvolvimento em uma nova janela que não possui a opção "Dock side"; no entanto, o uso do F12 a abre normalmente na guia atual com a opção "Dock side" disponível. Estranho.
precisa saber é o seguinte
0

Além disso, se você quiser ver Fontes e console em uma janela, acesse:

"Personalizar e controlar o DevTools ->" Mostrar gaveta do console "

Você também pode vê-lo aqui no canto direito:

"Mostrar gaveta do console"

Anton Polkanov
fonte