Outils de développement Chrome: afficher les vues de la console et des sources dans des vues séparées / en mosaïque verticale?

Outils de développement Chrome: existe-t-il un moyen d'afficher l' Consoleonglet et l' Sourcesonglet dans des vues distinctes? Je veux souvent regarder les deux simultanément.

En appuyant Escsur l' Sourcesonglet, je vais voir une petite vue du Consolebas. Mais j'aimerais avoir une vue plus large des deux à la fois. Est-ce possible?

Sinon, est-ce quelque chose qu'une extension Chrome pourrait faire?

Éditer:

Clarification - Je sais comment désancrer la fenêtre des outils de développement (c'est ma configuration par défaut). Juste être gourmand je suppose et me demander si je peux encore diviser Sourceset Consoleen fenêtres séparées non ancrées (ou à tout le moins, faire diviser leurs vues verticalement sur la même fenêtre, au lieu d'être horizontalement comme le fait d'appuyer Esc)

Division verticale

Vous pouvez désancrer les outils de développement (en cliquant sur l'icône dans le coin inférieur gauche), ce qui le déplace dans une nouvelle fenêtre. Appuyez ensuite sur Escpour ouvrir la console.

La fenêtre et la «petite console» peuvent être redimensionnées pour répondre à vos besoins.

Division horizontale

Si vous préférez avoir la console à droite plutôt qu'enpath/to/profile/Default/User StyleSheets/Custom.css bas, personnalisez les outils de développement en éditant et ajoutez les règles suivantes:

EDIT: la prise en charge de Custom.cssa été supprimée, mais il est toujours possible de modifier les styles des outils de développement à l'aide d'une nouvelle API, chrome.devtools.panels.applyStyleSheetméthode ( exemple de code ).

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

Le résultat ressemble à ceci:

esc - est le raccourci,

ou

Au menu(the three dots)clic surshow console drawer

Dans la droite, appuyez sur le "Trois points" et cliquez sur "Afficher le tiroir de la console"

Le PO a probablement évolué depuis sa publication il y a trois ans, mais pour n'importe qui d'autre:

Je ne connais aucun moyen de diviser la fenêtre de l'outil de développement, mais vous pouvez basculer entre les dispositions de panneau verticales, horizontales et automatiques (par défaut), ce que l'OP a demandé dans sa clarification. J'ai souvent trouvé cela utile.

1. Ouvrez le menu à trois points dans le coin supérieur droit de la fenêtre des outils de développement.
2. Sélectionnez «Paramètres».
3. Onglet "Général" -> section "Apparence"
4. "Disposition du panneau"

Une solution plus simple consiste à maintenir l'icône en bas à gauche enfoncée, ce qui fera apparaître une autre icône qui, lorsqu'elle est sélectionnée, vous permettra d'afficher la console à droite de la fenêtre principale de votre navigateur.

Si vous pouvez taper mais ne voyez pas la console et ne pouvez pas la redimensionner:

Ensuite, détachez DevTools dans le coin supérieur droit. Ensuite, vous pourrez le redimensionner:

Après cela, vous pouvez l'ancrer.