Strumenti per sviluppatori di Chrome: visualizzare le visualizzazioni Console e Sorgenti in visualizzazioni separate / verticalmente affiancate?

128

Strumenti per sviluppatori di Chrome: esiste un modo per visualizzare la Consolescheda e la Sourcesscheda in viste separate? Spesso voglio esaminare entrambi contemporaneamente.

Premendo Escquando nella Sourcesscheda mi vedrà una piccola vista Consolein basso. Ma vorrei una visione più ampia di entrambi allo stesso tempo. È possibile?

In caso contrario, è qualcosa che un'estensione di Chrome potrebbe essere in grado di fare?

Modificare:

Chiarimento: so come sganciare la finestra degli strumenti di sviluppo (questa è la mia configurazione predefinita). Solo essendo avido immagino e mi chiedo se posso ulteriormente dividere Sourcese Consoleseparare le finestre non ancorate (o almeno, le loro viste si dividono verticalmente sulla stessa finestra, anziché orizzontalmente come premendo Esc)

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

— Himanshu P
fonte

176

Divisione verticale

Puoi sganciare gli strumenti di sviluppo (facendo clic sull'icona nell'angolo in basso a sinistra), che lo sposta in una nuova finestra. Quindi premere Escper aprire la console.

Sia la finestra che la "piccola console" possono essere ridimensionate per soddisfare le tue esigenze.

Divisione orizzontale

Se preferisci avere la console a destra anziché in basso, ~~personalizza gli strumenti di sviluppo modificandopath/to/profile/Default/User StyleSheets/Custom.css~~ e aggiungi le seguenti regole:

EDIT: il supporto per Custom.cssè stato rimosso, ma è ancora possibile modificare gli stili degli strumenti di sviluppo utilizzando una nuova API, chrome.devtools.panels.applyStyleSheetmetodo ( codice di esempio ).

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

Il risultato è simile al seguente:

— Rob W
fonte

1

Mi dispiace che avrei dovuto chiarire (lo farà anche nel post originale): sto già ipotizzando una finestra degli strumenti di sviluppo non agganciata (è così per me per impostazione predefinita). Ma da quella finestra, sarei ancora in grado di "estrarre" Consoleo Sourcescome una finestra separata, come puoi fare con le schede normali su Chrome

— Himanshu P

Abilita il debug remoto e apri gli devtools in una nuova finestra. Non sono sicuro che supporti già più istanze, dovresti provarlo.

— Rob W,

Sembra promettente (anche se complicato). Lo proverò e pubblicherà come funziona

— Himanshu P

1

@HimanshuP Il debug remoto non supporta ancora più istanze. Ho aggiornato la mia risposta con un metodo alternativo, controlla.

— Rob W,

1

Stavo solo cercando un modo per chiudere la console divisa in verticale che era sempre visibile. Escfatto. Grazie!

— duma,

100

esc - è la scorciatoia,

o

Al menu(the three dots)click sushow console drawer

— BHV
fonte

3

Una volta ogni decennio cerco una funzione e si scopre che c'era un pulsante per tutto il tempo, proprio lì sulla mia tastiera. Una specie di.

— Bob Stein,

10

A destra premi il tasto "Tre punti" e fai clic su "Mostra cassetto console"

— Soham Mehta
fonte

7

L'OP è probabilmente andato avanti da quando lo ha pubblicato tre anni fa, ma per chiunque altro:

Non conosco alcun modo per dividere la finestra dello strumento sviluppatore, ma è possibile alternare tra layout di pannello verticale, orizzontale e automatico (impostazione predefinita), di cui l'OP ha chiesto nel suo chiarimento. Ho trovato spesso questo utile.

Apri il menu a tre punti nell'angolo in alto a destra della finestra degli strumenti di sviluppo.
Seleziona "Impostazioni".
Scheda "Generale" -> sezione "Aspetto"
"Layout del pannello"

— Pogginhopper
fonte

Ho cercato questa risposta da molto tempo. Grazie! Nel mio caso, i pannelli si impilerebbero verticalmente nella parte inferiore quando il mio schermo non era alla massima larghezza. Questo è stato molto controproducente per me perché volevo che i gruppi di pannelli fossero fianco a fianco in fondo, non impilati verticalmente. Fare clic sull'icona del layout non mi ha dato il layout che volevo, ma la tua soluzione ha funzionato proprio come volevo.

— Chris22,

Ogni volta che passo a un nuovo computer devo andare a cercare come trovare questa impostazione e ottenere il mio layout preferito. Grazie!

— Stacyhorton,

5

Una soluzione più semplice è tenere premuta l'icona in basso a sinistra che farà apparire un'altra icona che, quando selezionata, ti permetterà di visualizzare la console a destra della finestra del browser principale

— Lloyd Moore
fonte

questa dovrebbe davvero essere la risposta accettata perché è sia corretta che "ovvia"

— miraculixx

Nota: nelle versioni recenti di Chrome (dal 18-03-2015), questo è obbligatorio per sfuggire alle modalità ancorata sul fondo e sul lato ancorato, vale a dire che si desidera una finestra separata.

— maxkfranz,

1

@miraculixx No, non è corretto. L'OP ha già una finestra DevTools sganciata.

— jpaugh,

1

Non riesco a dare un senso

— all

2

Se riesci a digitare ma non vedi la console e non riesci a ridimensionarla:

Poi disancorare DevTools in alto a destra. Quindi sarai in grado di ridimensionarlo:

Dopo questo puoi riagganciarlo.

— Gennady G
fonte