Outils de développement de Chrome : Afficher les vues Console et Sources dans des vues distinctes/en mosaïque verticale ?

Question

Outils de développement de Chrome : Existe-t-il un moyen d'afficher le Console et l'onglet Sources dans des vues séparées ? Je veux souvent regarder les deux simultanément.

Presser Esc lorsque sur le Sources me permettra de voir une petite vue de l'écran d'accueil. Console en bas. Mais j'aimerais une vue plus grande des deux en même temps. Est-ce possible ?

Si ce n'est pas le cas, est-ce qu'une extension de chrome pourrait être en mesure de le faire ?

Edit :

Clarification - Je sais comment désarmer la fenêtre des outils de développement (c'est ma configuration par défaut). Je suis juste gourmand je suppose et je me demande si je peux diviser davantage Sources y Console dans des fenêtres séparées non ancrées (ou au moins, avoir leurs vues divisées verticalement sur la même fenêtre, au lieu d'horizontalement comme en appuyant sur Esc ne)

Answer 1

Division verticale

Vous pouvez déverrouiller les outils de développement (en cliquant sur l'icône dans le coin inférieur gauche), ce qui les déplace dans une nouvelle fenêtre. Appuyez ensuite sur Esc pour 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'en bas, personnaliser les outils de développement en modifiant path/to/profile/Default/User StyleSheets/Custom.css et ajoutez les règles suivantes :

EDIT : Support pour Custom.css a été supprimé, mais il est toujours possible de modifier les styles des outils de développement à l'aide d'une nouvelle API, chrome.devtools.panels.applyStyleSheet mé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 :

Answer 2

esc - est le raccourci ,

ou à menu (les trois points), cliquez sur show console drawer

Answer 3

A droite, appuyez sur les "trois points" et cliquez sur "Afficher le tiroir de la console".

Answer 4

L'OP est probablement passé à autre chose depuis qu'il a posté ce message il y a trois ans, mais pour tous les autres.. :

Je ne connais pas de moyen de diviser la fenêtre de l'outil de développement, mais vous pouvez basculer entre les dispositions verticale, horizontale et automatique (par défaut) des panneaux, ce que le PO 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 "Aspect".
4. "Disposition des panneaux"

Answer 5

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