Come riposizionare gli Strumenti per sviluppatori di Chrome

489

Gli strumenti vengono aperti nella parte inferiore della finestra di Chrome per impostazione predefinita. Questa è una scelta piuttosto sbagliata per un ampio schermo poiché c'è molto spazio vuoto a destra ma non c'è molto spazio verticale da risparmiare. Sfortunatamente, non ho trovato alcun modo per riposizionare gli strumenti. Mi piacerebbe averli sul lato, simili a firebug.

L'unica opzione simile a quella che desidero è quella di staccare gli strumenti di sviluppo e posizionare parallelamente Chrome e la finestra degli strumenti. Questo non è molto conveniente per l'alt-tabbing rapido dall'IDE al browser e viceversa, quindi una soluzione "integrata" sarebbe buona.

google-chrome  google-chrome-devtools 
— kostja
fonte
— Raghav
— Nate

Risposte:

895

Chrome 46 o più recente

Fare clic sul pulsante con i puntini di sospensione verticali (⋮), quindi selezionare l'opzione di aggancio desiderata.

Chrome 45 o precedente

Tieni premuto a lungo l'icona del dock in alto a destra. Viene visualizzata un'opzione per modificare l'attracco

Per cambiare la divisione tra i pannelli HTML e CSS, vai in DevTools in Impostazioni (F1)> Generale> Aspetto> Layout del pannello.

— loislo
fonte
2
Fantastico, è presente nella versione stabile, semplicemente non ne ero a conoscenza, ha opzioni ancora più belle :) Grazie
— kostja
8
nelle recenti build di Chrome e Canary, l'opzione è stata rimossa ma è ancora possibile accedervi facendo clic e tenendo premuta l'icona del dock in basso a sinistra, si apre un'opzione per il dock a destra.
— Paul Spencer,
2
Fantastico, dock a destra funziona. Ora come posso spostare la finestra di ispezione CSS nella scheda Elementi nella parte inferiore del riquadro degli strumenti di sviluppo? Altrimenti devo visualizzare l'HTML e il CSS fianco a fianco in colonne molto strette.
— Vicky Chijwani,
11
Che design orribile! In nessun posto lo avrei capito da solo. Da nessun'altra parte ho visto questa attesa e aspettare mai usato.
— Dmitri Zaitsev,
4
@blrbr Sì, è così vero. Se hai bisogno di fare una ricerca su Google solo per scoprire come attivare un'opzione che sai esiste, c'è qualcosa di sbagliato nel design dell'interfaccia utente. La parola chiave qui è "rilevabilità". Non è facile da scoprire.
— Stijn de Witt,
70

Posiziona il puntatore sul pulsante dock e fai clic lungo (alcuni secondi) o fai clic con il pulsante destro e sinistro del mouse a seconda della versione del browser.

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine

— user3246105
fonte
41

Scorciatoia da tastiera per attivare / disattivare la posizione di aggancio (laterale / inferiore)

CTRL+ SHIFT+D

E ci sono molte scorciatoie che puoi vedere andando a

Impostazioni »Collegamenti , come visualizzato qui:
Schermata delle impostazioni

In alternativa, utilizzare CTRL+ ?per accedere alle impostazioni, da lì è possibile accedere alla voce secondaria "Scorciatoie" a sinistra o utilizzare il riferimento ufficiale .

— Alupotha
fonte
6
⌘-Shift-D anche su OSX.
— meatspace,
2
Se non riesci affatto ad aprire il dock, prova Ctrl+Shift+I- ma se la tua finestra è un popup, non credo che il dock funzioni anche.
— Noumenon,
Grazie! L'ispettore era in qualche modo bloccato via dallo schermo, CTRL + MAIUSC + D lo ha ancorato per me!
— Stan,
1
Per qualche motivo quando sgancio gli strumenti di sviluppo di Chrome, lo strumento sembra scorrere a destra del mio monitor e non è più visibile. L'unico modo in cui riesco a farlo riapparire è Ctrl + Maiusc + D e aggancia gli strumenti di sviluppo a lato o in basso. Questo è strano
— jazzBox,
Vorrei solo dichiarare il mio amore per te. 🐐💘🐐
— Curtis Blackwell,
18

Sembra che questo sia in basso a sinistra ora come un'icona con finestre sovrapposte e il "Undock in una finestra separata". tooltip.

inserisci qui la descrizione dell'immagine

— brian_d
fonte
13
È possibile chiarire che è necessario fare clic e tenere premuto questo pulsante per agganciarsi a destra. Come notato da @PaulSpencer, semplicemente facendo clic si sgancia solo.
— 0x89,
11

Dopo aver posizionato il dock a destra (vedere le risposte più vecchie), ho ancora trovato i pannelli divisi verticalmente.

Per dividere i pannelli in orizzontale - e ottenere ancora di più dalla larghezza dello schermo - vai su Impostazioni (angolo in basso a destra) e rimuovi il segno di spunta su 'Dividi i pannelli in verticale quando ancorato a destra'.

Ora, hai tutti i pannelli da sinistra a destra: p

— user2243570
fonte
8

A partire da ottobre 2014, versione 39.0.2171.27 beta (64 bit)

Ho dovuto andare nella panoramica di Chrome Web Developper in "Impostazioni" e deselezionare Dividi pannelli verticalmente quando ancorato a destra

— Pierre Maoui
fonte
1

La versione 56.0.2924.87 in cui mi trovo ora, scarica automaticamente DevTools se NON sei su un desktop. Altrimenti, apri una NUOVA nuova scheda di Chrome e ispeziona per riagganciare DevTools nella finestra.

— Charix
fonte
Cosa intendi con "non in un desktop"? Sono su 59.0.3067.6 (dev) e sta facendo cose strane su alcuni siti web. Ad esempio in Vtiger 6.5, facendo clic con il pulsante destro del mouse e "ispeziona" si aprono gli strumenti di sviluppo in una nuova finestra priva della scelta "Lato dock", tuttavia l'utilizzo di F12 lo apre normalmente incorporato nella scheda corrente con l'opzione "Lato dock" disponibile. Strano.
— Dhaupin,
0

Inoltre, se desideri visualizzare Fonti e console in una finestra, vai a:

"Personalizza e controlla DevTools ->" Mostra il cassetto della console "

Puoi anche vederlo qui nell'angolo destro:

"Mostra cassetto consolle"

— Anton Polkanov
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.