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

128

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)

google-chrome google-chrome-extension google-chrome-devtools

— Himanshu P
fuente

176

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í:

— Rob W
fuente

1

Lo siento, debería haber aclarado (lo haré también en la publicación original): ya estoy asumiendo una ventana de herramientas de desarrollador desacoplada (así es para mí de forma predeterminada). Pero desde esa ventana, todavía podría "abrir" Consoleo Sourcescomo una ventana separada, como puede hacer con las pestañas regulares en Chrome

— Himanshu P

Habilite la depuración remota y abra las herramientas de desarrollo en una nueva ventana. No estoy seguro de si ya es compatible con varias instancias, deberías probarlo.

— Rob W

Suena prometedor (aunque complicado). Lo probaré y publicaré cómo funciona

— Himanshu P

1

@HimanshuP La depuración remota aún no admite varias instancias. He actualizado mi respuesta con un método alternativo, échale un vistazo.

— Rob W

1

Estaba buscando una manera de cerrar la consola dividida verticalmente que siempre estaba visible. Eschice esto. ¡Gracias!

— duma

100

esc - es el atajo,

o

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

— bhv
fuente

3

Una vez que una década busco una característica y resulta que siempre había un botón, justo en mi teclado. Algo así como.

— Bob Stein

10

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

— Soham Mehta
fuente

7

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.

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

— Pogginhopper
fuente

He estado buscando esta respuesta por mucho tiempo. ¡Gracias! En mi caso, los paneles se apilarían verticalmente en la parte inferior cuando mi pantalla no tuviera el ancho completo. Esto fue muy contraproducente para mí, ya que quería que los grupos de paneles estuvieran uno al lado del otro en la parte inferior, no apilados verticalmente. Hacer clic en el ícono de diseño no me dio el diseño que quería, pero su solución funcionó exactamente como yo quería.

— Chris22

Cada vez que cambio a una computadora nueva, tengo que buscar cómo encontrar esta configuración y obtener mi diseño preferido. ¡Gracias!

— stacyhorton el

5

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

— Lloyd Moore
fuente

esta debería ser la respuesta aceptada porque es correcta y "obvia"

— miraculixx

Nota: En las versiones recientes de Chrome (a partir del 2015-03-18), esto es obligatorio para escapar de los modos de base acoplada y lateral acoplada, es decir, desea una ventana separada.

— maxkfranz

1

@miraculixx No, no es correcto. El OP ya tiene una ventana DevTools desacoplada.

— jpaugh

1

No puedo entender el "icono de la parte inferior izquierda" (nada para mí según la fecha de este comentario)

— Pac0

2

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.

— Gennady G
fuente