google-chrome - tools - plugins chrome para programadores

Herramientas de desarrollador de Chrome: ¿ve las vistas de Consola y Orígenes en vistas separadas/en mosaico vertical?

Question

Herramientas para desarrolladores de Chrome: ¿hay alguna manera de ver la pestaña Console y la pestaña Sources en vistas distintas? A menudo quiero ver ambos de forma simultánea.

Presionar Esc cuando esté en la pestaña de Sources me permitirá ver una pequeña vista de la Console en la parte inferior. Pero me gustaría tener 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). Simplemente siendo codicioso supongo y me pregunto si puedo dividir Sources y Console en ventanas separadas sin empalmes (o al menos, tener sus puntos de vista se dividen verticalmente en la misma ventana, en lugar de horizontalmente, al presionar Esc )

Answer 1

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 presiona Esc para abrir la consola.

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

División horizontal

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

EDITAR: Se Custom.css soporte para Custom.css , pero aún es posible cambiar los estilos de las herramientas de desarrollador utilizando un nuevo método API, chrome.devtools.panels.applyStyleSheet ( 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 es así:

Answer 2

El OP probablemente se haya movido desde la publicación de este hace tres años, pero para cualquier otra persona:

No conozco ninguna forma de dividir la ventana de la herramienta de desarrollador, pero puede alternar entre los diseños de panel vertical, horizontal y automático (el predeterminado), sobre los cuales 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"

Answer 3

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

A continuación, desactive DevTools en la esquina superior derecha. Entonces podrás cambiarle el tamaño:

Después de esto, puedes acoplarlo de nuevo.

Answer 4

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

Answer 5

esc - es el atajo,

o en el menú / configuración, haga clic en Mostrar el cajón de la consola