web-dev-qa-db-fra.com

Outils de développement Chrome: Console de lecture et Sources de vues séparées / en mosaïque verticale?

Outils de développement Chrome: Y a-t-il un moyen d'afficher l'onglet Console et l'onglet Sources dans différentes vues? J'ai souvent envie de regarder ces deux choses simultanément.

Pressage Esc Lorsque vous êtes sur l'onglet Sources, une petite vue de Console apparaît en bas de l'écran. Mais j'aimerais avoir une vue plus large des deux en même temps. Est-ce possible?

Si non, est-ce quelque chose qu'une extension chrome pourrait être capable de faire?

Modifier:

Clarification - Je sais comment désancrer la fenêtre des outils de développement (ma configuration par défaut). Je veux juste être gourmand et me demander si je peux scinder davantage Sources et Console dans des fenêtres séparées non amarrées (ou tout au moins, faire en sorte que leurs vues soient scindées verticalement sur la même fenêtre, au lieu d’être horizontalement comme le fait le Esc).

google-chromegoogle-chrome-extensiongoogle-chrome-devtools
104
Himanshu P

Scission verticale

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

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

screenshot of vertically split devtools

Scission horizontale

Si vous préférez avoir la console à droite au lieu du bas, personnaliser les outils de développement en éditant path/to/profile/Default/User StyleSheets/Custom.csset ajoutez les règles suivantes:

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

screenshot of horizontally split devtools

147
Rob W

esc - est le raccourci,

ou au menu/paramètres cliquez sur afficher le tiroir de la console

enter image description here

75
bhv

Une solution plus simple consiste à maintenir l'icône en bas à gauche enfoncée. Une autre icône permettant d'afficher la console à droite de la fenêtre principale de votre navigateur s'affiche.

5
Lloyd Moore

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

Je ne connais aucun moyen de scinder la fenêtre de l'outil de développement, mais vous pouvez basculer entre les dispositions de panneau verticale, horizontale et automatique (la configuration par défaut), 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 "Apparence"
  4. "Disposition du panneau"
5
Pogginhopper

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

 enter image description here

Puis undock DevTools dans le coin supérieur droit. Ensuite, vous pourrez le redimensionner:

 enter image description here

Après cela, vous pouvez le connecter.

1
Gennady G