Herramientas para desarrolladores de Chrome: ¿Ver vistas de consola y fuentes en vistas separadas / mosaico vertical?

Herramientas para desarrolladores de Chrome: ¿Hay alguna forma de ver la Consolepestaña y la Sourcespestaña en vistas separadas? A menudo quiero ver ambos a la vez.

Presionar Esccuando Sourcesesté en la pestaña me permitirá ver una pequeña vista de Consolela parte inferior. Pero me gustaría una vista más amplia de ambos al mismo tiempo. es posible?

Si no, ¿es esto algo que una extensión de Chrome podría hacer?

Editar:

Aclaración: sé cómo desacoplar la ventana de herramientas de desarrollo (esa es mi configuración predeterminada). Sólo por ser codiciosos conjetura I y pregunto si puedo más dividida Sourcesy Consoleen ventanas separadas desacopladas (o por lo menos, que sus opiniones se divide verticalmente en la misma ventana, en lugar de horizontalmente como pulsar Esclo hace)

División vertical

Puede desacoplar las herramientas de desarrollador (haciendo clic en el icono en la esquina inferior izquierda), que lo mueve a una nueva ventana. Luego presione Escpara abrir la consola.

Tanto la ventana como la "consola pequeña" pueden redimensionarse para satisfacer sus necesidades.

División horizontal

Si prefiere tener la consola a la derecha en lugar de la parte inferior, personalice las herramientas de desarrollador editandopath/to/profile/Default/User StyleSheets/Custom.css y agregue las siguientes reglas:

EDITAR: Se Custom.cssha eliminado el soporte para , pero aún es posible cambiar los estilos de las herramientas de desarrollador utilizando un nuevo chrome.devtools.panels.applyStyleSheetmétodo API ( código de muestra ).

/* 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;
}

El resultado se ve así:

esc - es el atajo,

o

Al menu(the three dots)hacer clic enshow console drawer

A la derecha, presiona "Tres puntos" y haz clic en "Mostrar cajón de la consola"

El OP probablemente ha avanzado desde que publicó esto hace tres años, pero para cualquier otra persona:

No conozco ninguna forma de dividir la ventana de la herramienta de desarrollador, pero puede cambiar entre diseños de panel vertical, horizontal y automático (el predeterminado), que el OP preguntó en su aclaración. Con frecuencia he encontrado que esto es útil.

1. Abra el menú de tres puntos en la esquina superior derecha de la ventana de herramientas de desarrollo.
2. Seleccione 'Configuración'.
3. Pestaña "General" -> sección "Apariencia"
4. "Diseño del panel"

Una solución más fácil es mantener presionado el ícono inferior izquierdo que abrirá otro ícono que, cuando se seleccione, le permitirá ver la consola a la derecha de la ventana principal de su navegador

Si puede escribir pero no ve la consola y no puede cambiar su tamaño:

Luego desacople DevTools en la esquina superior derecha. Entonces podrá cambiar su tamaño:

Después de esto, puede volver a acoplarlo.