Cómo reposicionar las Herramientas para desarrolladores de Chrome

489

Las herramientas se abren en la parte inferior de la ventana de Chrome por defecto. Esta es una elección bastante mala para una pantalla panorámica, ya que hay mucho espacio vacío a la derecha pero no mucho espacio vertical de sobra. Desafortunadamente, no he encontrado la manera de reposicionar las herramientas. Me gustaría tenerlos a un lado, similar a Firebug.

La única opción similar a lo que quiero es separar las herramientas de desarrollo y colocar Chrome y la ventana de herramientas una al lado de la otra. Sin embargo, esto no es muy conveniente para realizar rápidamente tabulaciones alternativas desde el IDE al navegador y viceversa, por lo que una solución "integrada" sería buena.

google-chrome google-chrome-devtools kostja
fuente
github.com/melat0nin/chrome-devtools-vertical
Raghav
stackoverflow.com/questions/14386994/…
Nate

Respuestas:

895

Chrome 46 o más reciente

Haga clic en el botón de puntos suspensivos verticales (⋮) y luego elija la opción de acoplamiento deseada.

Chrome 45 o más viejo

Mantenga presionado el icono del muelle en la esquina superior derecha. Aparece una opción para cambiar el acoplamiento

Para cambiar la división entre los paneles HTML y CSS, vaya a DevTools a Configuración (F1)> General> Apariencia> Diseño del panel.

loislo
fuente
2
Genial, está presente en la versión estable, simplemente no lo sabía, tiene aún más buenas opciones :) Gracias
kostja
8
En versiones recientes de Chrome y Canary, la opción se ha eliminado, pero aún puede acceder a ella haciendo clic y manteniendo presionado el ícono de acoplamiento en la parte inferior izquierda, aparece una opción para acoplar a la derecha.
Paul Spencer
2
Genial, atracar a la derecha funciona. Ahora, ¿cómo muevo el inspector de CSS en la pestaña Elementos a la parte inferior del panel de herramientas de desarrollo? De lo contrario, tengo que ver el HTML y el CSS uno al lado del otro en columnas muy estrechas.
Vicky Chijwani
11
¡Qué diseño tan horrible! En ninguna parte lo resolvería yo solo. En ningún otro lugar he visto esta espera y espera utilizada alguna vez.
Dmitri Zaitsev
44
@blrbr Sí, es cierto. Si necesita hacer una búsqueda en Google solo para descubrir cómo activar una opción que sabe que existe, hay un problema con el diseño de la interfaz de usuario. La palabra clave aquí es 'capacidad de descubrimiento'. Esto no es fácil de descubrir.
Stijn de Witt
70

Coloque el puntero en el botón de acoplamiento y haga clic largo (algunos segundos) o haga clic con el botón derecho e izquierdo del mouse según la versión del navegador.

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

usuario3246105
fuente
41

Método abreviado de teclado para alternar la posición de acoplamiento (lateral / inferior)

CTRL+ SHIFT+D

Y hay muchos accesos directos que puedes ver yendo a

Configuración »Accesos directos , como se muestra aquí:
Captura de pantalla de configuración

Alternativamente, use CTRL+ ?para ir a la configuración, desde allí se puede llegar al sub-elemento "Atajos" a la izquierda o usar la referencia oficial .

Alupotha
fuente
66
⌘-Shift-D en OSX, también.
meatspace
2
Si no puede abrir el dock, intente Ctrl+Shift+I, pero si su ventana es una ventana emergente, no creo que el docking funcione.
Noumenon
¡Gracias! El inspector estaba de alguna manera atrapado fuera de la pantalla, CTRL + MAYÚS + D lo atracó para mí.
Stan
1
Por alguna razón, cuando desacople las herramientas para desarrolladores de Chrome, la herramienta parece funcionar a la derecha de mi monitor y ya no es visible. La única forma en que puedo hacer que vuelva a aparecer es Ctrl + Shift + D y acoplar las herramientas de desarrollador a un lado o al fondo. Esto es extraño
jazzBox
Solo me gustaría declarar mi amor por ti. 🐐💘🐐
Curtis Blackwell
18

Parece que esto está en la parte inferior izquierda ahora como un icono con ventanas superpuestas y el "Desacoplar en una ventana separada". información sobre herramientas.

ingrese la descripción de la imagen aquí

brian_d
fuente
13
Puede aclarar que debe hacer clic y mantener presionado este botón para acoplarse a la derecha. Como notó @PaulSpencer, simplemente haciendo clic solo se desacopla.
0x89
11

Después de haber colocado mi base a la derecha (ver respuestas anteriores), todavía encontré los paneles divididos verticalmente.

Para dividir los paneles horizontalmente, e incluso obtener más del ancho de su pantalla, vaya a Configuración (esquina inferior derecha) y elimine la marca de verificación 'Dividir paneles verticalmente cuando está acoplado a la derecha'.

Ahora, tiene todos los paneles de izquierda a derecha: p

usuario2243570
fuente
8

A partir de octubre de 2014, versión 39.0.2171.27 beta (64 bits)

Tenía que ir al panel de desarrollo web de Chrome en "Configuración" y desmarcar paneles divididos verticalmente cuando se acopló a la derecha

Pierre Maoui
fuente
1

La versión 56.0.2924.87 en la que estoy ahora, desacopla las DevTools automáticamente si NO está en un escritorio. De lo contrario, abra una NUEVA pestaña nueva de Chrome e inspeccione para acoplar las DevTools nuevamente en la ventana.

Charix
fuente
¿Qué quiere decir "no en un escritorio"? Estoy en 59.0.3067.6 (dev) y está haciendo algunas cosas extrañas en ciertos sitios web. Por ejemplo, en Vtiger 6.5, al hacer clic con el botón derecho e "inspeccionar" se abren las herramientas de desarrollo en una nueva ventana que carece de la opción "Dock side", sin embargo, al usar F12 se abre normalmente incrustado en la pestaña actual con la opción "Dock side" disponible. Extraño.
dhaupin
0

Además, si desea ver Orígenes y Consola en una ventana, vaya a:

"Personalizar y controlar DevTools ->" Mostrar el cajón de la consola "

También puedes verlo aquí en la esquina derecha:

"Mostrar el cajón de la consola"

Anton Polkanov
fuente