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

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.

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:

— 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

— 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”

— 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.

Otwórz menu z trzema kropkami w prawym górnym rogu okna narzędzi programistycznych.
Wybierz „Ustawienia”.
Zakładka „Ogólne” -> sekcja „Wygląd”
„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:

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

Następnie możesz go ponownie zadokować.

— Giennadij G.
źródło