Ferramentas para desenvolvedores do Chrome: ver visualizações do console e das fontes em visualizações separadas / lado a lado na vertical?

128

Ferramentas para desenvolvedores do Chrome: existe uma maneira de exibir a Consoleguia e a Sourcesguia em modos de exibição separados? Muitas vezes eu quero olhar para ambos simultaneamente.

Pressionar Escquando estiver na Sourcesguia me permitirá ver uma pequena exibição Consolena parte inferior. Mas eu gostaria de ter uma visão maior dos dois ao mesmo tempo. Isso é possível?

Caso contrário, isso é algo que uma extensão do Chrome pode fazer?

Editar:

Esclarecimento - Eu sei como desencaixar a janela das ferramentas de desenvolvimento (essa é a minha configuração padrão). Sendo ganancioso, acho que me pergunto se posso dividir ainda mais Sourcese Consoleem janelas separadas que não foram encaixadas (ou, pelo menos, ter suas visualizações divididas verticalmente na mesma janela, em vez de horizontalmente, como pressiona Esc)

Himanshu P
fonte

Respostas:

176

Divisão vertical

Você pode desencaixar as ferramentas do desenvolvedor (clicando no ícone no canto inferior esquerdo), que o move para uma nova janela. Em seguida, pressione Escpara abrir o console.

A janela e o "pequeno console" podem ser redimensionados para atender às suas necessidades.

captura de tela dos devtools divididos verticalmente

Divisão horizontal

Se você preferir ter o console à direita, e não na parte inferior, personalize as ferramentas do desenvolvedor editandopath/to/profile/Default/User StyleSheets/Custom.css e adicione as seguintes regras:

EDIT: O suporte para Custom.cssfoi removido, mas ainda é possível alterar os estilos das ferramentas do desenvolvedor usando uma nova API, chrome.devtools.panels.applyStyleSheetmétodo ( código de exemplo ).

/* If drawer has been expanded at least once AND it's still expanded */
#-webkit-web-inspector #main[style*="bottom"]:not([style*="bottom: 0"]) {
    width: 50%;
    bottom: 0 !important;
}

#-webkit-web-inspector #drawer[style*="height"]:not([style*="height: 0"]) {
    /* The position of the drawer */
    left: 50% !important;
    /* styles to position the #drawer correctly */
    top: 26px !important;
    height: auto !important;
    z-index: 1;
    border-left: 1px solid rgb(64%, 64%, 64%);
}
#-webkit-web-inspector.show-toolbar-icons #drawer[style*="height"]:not([style*="height: 0"]) {
    top: 56px !important;
}

O resultado fica assim:

captura de tela dos devtools divididos horizontalmente

Rob W
fonte
1
Desculpe, eu deveria ter esclarecido (também funcionará na postagem original): Eu já estou assumindo uma janela de ferramentas de desenvolvedor desencaixada (é assim que é para mim por padrão). Mas a partir dessa janela, eu ainda seria capaz de "puxar" Consoleou Sourcescomo uma janela separada, como você pode fazer com as guias regulares sobre Chrome
Himanshu P
Habilite a depuração remota e abra os devtools em uma nova janela. Não tenho certeza se ele já suporta várias instâncias, você deve experimentá-lo.
Rob W
Parece promissor (embora complicado). Vai experimentá-lo e postar como ele funciona
Himanshu P
1
A depuração remota @HimanshuP ainda não suporta várias instâncias. Atualizei minha resposta com um método alternativo, confira.
Rob W
1
Eu estava apenas procurando uma maneira de fechar o console dividido verticalmente que sempre estava visível. Escfez isso. Obrigado!
Duma
100

esc - é o atalho,

ou

Ao menu(the three dots)clicar emshow console drawer

insira a descrição da imagem aqui

bhv
fonte
3
Uma vez por década, busco um recurso e, ao que parece, havia um botão o tempo todo, bem ali no meu teclado. Tipo de.
Bob Stein
10

À direita, pressione "Três pontos" e clique em "Mostrar gaveta do console"

insira a descrição da imagem aqui

Soham Mehta
fonte
7

O OP provavelmente seguiu em frente desde que publicou isso há três anos, mas para qualquer outra pessoa:

Não conheço nenhuma maneira de dividir a janela da ferramenta de desenvolvedor, mas é possível alternar entre os layouts de painel vertical, horizontal e automático (o padrão), sobre os quais o OP perguntou nos esclarecimentos. Eu freqüentemente achei isso útil.

  1. Abra o menu de três pontos no canto superior direito da janela de ferramentas de desenvolvimento.
  2. Selecione 'Configurações'.
  3. Guia "Geral" -> seção "Aparência"
  4. "Layout do painel"
Pogginhopper
fonte
Eu tenho procurado por esta resposta há muito tempo. Obrigado! No meu caso, os painéis se empilhariam verticalmente na parte inferior quando minha tela não estava com largura total. Isso foi muito contraproducente para mim, pois eu queria que os grupos de painéis estivessem lado a lado na parte inferior, não empilhados verticalmente. Clicar no ícone de layout não me deu o layout que eu queria, mas sua solução funcionou exatamente como eu queria.
precisa
Toda vez que mudo para um novo computador, tenho que pesquisar como encontrar essa configuração e obter meu layout preferido. Obrigado!
stacyhorton
5

Uma solução mais fácil é manter pressionado o ícone inferior esquerdo, que exibirá outro ícone que, quando selecionado, permitirá que você visualize o console à direita da janela principal do navegador

Lloyd Moore
fonte
este deve realmente ser a resposta aceite porque é correto e "óbvio"
miraculixx
Nota: Nas versões recentes do Chrome (a partir de 18/03/2015), isso é obrigatório para escapar dos modos inferior e inferior - ou seja, você deseja uma janela separada.
Maxkfranz 18/03
1
@miraculixx Não, não está correto. O OP já tem uma janela do DevTools desencaixada.
jpaugh
1
Não pode fazer o sentido do "ícone do canto inferior esquerdo" (nada para mim de acordo com a data deste comentário)
Pac0
2

Se você pode digitar, mas não vê o console, e não pode redimensioná-lo:

insira a descrição da imagem aqui

Em seguida, desencaixe o DevTools no canto superior direito. Você poderá redimensioná-lo:

insira a descrição da imagem aqui

Depois disso, você pode encaixá-lo novamente.

Gennady G
fonte