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

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)

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.

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:

esc - é o atalho,

ou

Ao menu(the three dots)clicar emshow console drawer

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

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"

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

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

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

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