Narzędzia dla programistów Chrome: czy wyświetlać widoki konsoli i źródeł w osobnych widokach / kafelkach w pionie?

128

Narzędzia programistyczne Chrome: czy istnieje sposób wyświetlania Consolekarty i Sourceskarty w osobnych widokach? Często chcę patrzeć na oba te elementy jednocześnie.

Naciśnięcie Esckiedy na Sourceskarcie pozwoli mi zobaczyć mały widok Consolena dole. Ale chciałbym mieć większy widok na oba w tym samym czasie. czy to możliwe?

Jeśli nie, to czy jest to coś, co może zrobić rozszerzenie do Chrome?

Edytować:

Wyjaśnienie - wiem, jak oddokować okno narzędzi deweloperskich (to moja domyślna konfiguracja). Myślę, że po prostu jestem chciwy i zastanawiam się, czy mogę dalej dzielić Sourcesi Consolena oddzielne niezadokowane okna (lub przynajmniej, aby ich widoki były podzielone pionowo w tym samym oknie, zamiast poziomo, jak to Escrobi naciśnięcie )

google-chrome google-chrome-extension google-chrome-devtools Himanshu P
źródło

Odpowiedzi:

176

Podział pionowy

Możesz oddokować narzędzia programistyczne (klikając ikonę w lewym dolnym rogu), co przenosi je do nowego okna. Następnie naciśnij, Escaby otworzyć konsolę.

Zarówno okno, jak i „mała konsola” mogą być zmieniane w zależności od potrzeb.

zrzut ekranu z devtools podzielonych pionowo

Podział poziomy

Jeśli wolisz, aby konsola znajdowała się po prawej stronie zamiast u dołu, dostosuj narzędzia programistyczne, edytującpath/to/profile/Default/User StyleSheets/Custom.css , i dodaj następujące reguły:

EDYCJA: Wsparcie dla Custom.csszostało usunięte, ale nadal można zmienić style narzędzi programistycznych za pomocą nowego interfejsu API, chrome.devtools.panels.applyStyleSheetmetody ( przykładowy kod ).

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

Wynik wygląda następująco:

zrzut ekranu z poziomo podzielonymi devtools

Rob W
źródło
1
Przepraszam, że powinienem był to wyjaśnić (zrobię to również w oryginalnym poście): Już zakładam niezadokowane okno narzędzi programistycznych (tak jest domyślnie dla mnie). Ale z tego okna nadal mógłbym „wyciągnąć” Consolelub Sourcespolubić osobne okno, tak jak w przypadku zwykłych zakładek w przeglądarce Chrome
Himanshu P
Włącz zdalne debugowanie i otwórz devtools w nowym oknie. Nie jestem pewien, czy obsługuje już wiele instancji, powinieneś spróbować.
Rob W
Brzmi obiecująco (choć skomplikowane). Wypróbuję to i opublikuję, jak to działa
Himanshu P
1
@HimanshuP Zdalne debugowanie nie obsługuje jeszcze wielu instancji. Zaktualizowałem moją odpowiedź inną metodą, sprawdź to.
Rob W
1
Po prostu szukałem sposobu na zamknięcie podzielonej w pionie konsoli, która była zawsze widoczna. Esczrobił to. Dziękuję Ci!
duma
100

esc - jest skrótem,

lub

Po menu(the three dots)kliknięciushow console drawer

wprowadź opis obrazu tutaj

bhv
źródło
3
Raz na dekadę szukam funkcji i okazuje się, że przez cały czas był do niej przycisk, na mojej klawiaturze. Raczej.
Bob Stein
10

Po prawej stronie naciśnij „Trzy kropki” i kliknij „Pokaż szufladę konsoli”

wprowadź opis obrazu tutaj

Soham Mehta
źródło
7

OP prawdopodobnie ruszył dalej od opublikowania tego trzy lata temu, ale dla każdego innego:

Nie znam żadnego sposobu na podzielenie okna narzędzi deweloperskich, ale możesz przełączać się między pionowym, poziomym i automatycznym (domyślnym) układem paneli, o który zapytał OP w ich wyjaśnieniu. Często uważam, że jest to przydatne.

  1. Otwórz menu z trzema kropkami w prawym górnym rogu okna narzędzi programistycznych.
  2. Wybierz „Ustawienia”.
  3. Zakładka „Ogólne” -> sekcja „Wygląd”
  4. „Układ panelu”
Pogginhopper
źródło
Długo szukałem tej odpowiedzi. Dzięki! W moim przypadku panele układałyby się pionowo na dole, gdy mój ekran nie był na pełnej szerokości. To było dla mnie bardzo nieproduktywne, ponieważ chciałem, aby grupy paneli były obok siebie na dole, a nie były ułożone pionowo. Kliknięcie ikony układu nie dało mi układu, który chciałem, ale Twoje rozwiązanie działało tak, jak chciałem.
Chris 22
Za każdym razem, gdy przełączam się na nowy komputer, muszę szukać, jak znaleźć to ustawienie i uzyskać preferowany układ. Dzięki!
stacyhorton
5

Łatwiejszym rozwiązaniem jest przytrzymanie wciśniętej lewej dolnej ikony, co spowoduje wyświetlenie kolejnej ikony, która po wybraniu umożliwi wyświetlenie konsoli po prawej stronie głównego okna przeglądarki

Lloyd Moore
źródło
to naprawdę powinna być akceptowana odpowiedź, ponieważ jest zarówno poprawna, jak i „oczywista”
miraculixx
Uwaga: w najnowszych wersjach Chrome (od 18.03.2015) jest to obowiązkowe, aby wyjść z trybu zadokowanego dna i zadokowanego - tzn. Chcesz mieć osobne okno.
maxkfranz
1
@miraculixx Nie, to nie jest poprawne. OP ma już niezadokowane okno DevTools.
jpaugh
1
Nie rozumiem „ikony w lewym dolnym rogu” (według daty tego komentarza nic dla mnie)
Pac0
2

Jeśli możesz pisać, ale nie widzisz konsoli i nie możesz zmienić jej rozmiaru:

wprowadź opis obrazu tutaj

Następnie UNDOCK DevTools w prawym górnym rogu. Wtedy będziesz mógł zmienić jego rozmiar:

wprowadź opis obrazu tutaj

Następnie możesz go ponownie zadokować.

Giennadij G.
źródło