Alat pengembang Chrome: Menampilkan tampilan Konsol dan Sumber dalam tampilan terpisah / ubin vertikal?

128

Alat pengembang Chrome: Apakah ada cara untuk melihat Consoletab dan Sourcestab dalam tampilan terpisah? Saya sering ingin melihat keduanya secara bersamaan.

Menekan Escketika di Sourcestab akan membiarkan saya melihat tampilan kecil Consoledi bagian bawah. Tapi saya ingin melihat yang lebih besar dari keduanya pada saat yang sama. Apakah ini mungkin?

Jika tidak, apakah ini sesuatu yang dapat dilakukan ekstensi chrome?

Edit:

Klarifikasi - Aku tahu bagaimana undock alat dev jendela (yang setup default saya). Hanya menjadi serakah, saya kira dan bertanya-tanya apakah saya dapat membelah lebih jauh Sourcesdan Consolemenjadi jendela-jendela terpisah yang terpisah (atau paling tidak, memiliki pandangan mereka terbelah secara vertikal pada jendela yang sama, alih-alih secara horizontal seperti menekan Esctidak)

google-chrome google-chrome-extension google-chrome-devtools Himanshu P
sumber

Jawaban:

176

Perpecahan vertikal

Anda dapat membuka kunci alat pengembang (dengan mengklik ikon di sudut kiri bawah), yang memindahkannya ke jendela baru. Kemudian tekan Escuntuk membuka konsol.

Baik jendela dan "konsol kecil" dapat diubah ukurannya untuk memenuhi kebutuhan Anda.

tangkapan layar devtools yang terbagi secara vertikal

Perpecahan horizontal

Jika Anda lebih suka memiliki konsol di kanan daripada di bawah, sesuaikan alat pengembang dengan mengeditpath/to/profile/Default/User StyleSheets/Custom.css , dan tambahkan aturan berikut:

EDIT: Dukungan untuk Custom.csstelah dihapus, tetapi masih mungkin untuk mengubah gaya alat pengembang menggunakan API, chrome.devtools.panels.applyStyleSheetmetode baru ( kode sampel ).

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

Hasilnya terlihat seperti ini:

tangkapan layar devtools yang terbagi secara horizontal

Rob W
sumber
1
Maaf saya harus mengklarifikasi (akan melakukan dalam posting asli juga): Saya sudah mengasumsikan jendela alat pengembang tidak terkunci (seperti itu secara default bagi saya). Tetapi dari jendela itu, saya masih bisa "menarik keluar" Consoleatau Sourcesmenyukai jendela yang terpisah, seperti yang dapat Anda lakukan dengan tab reguler di Chrome
Himanshu P
Aktifkan debugging jarak jauh , dan buka devtools di jendela baru. Saya tidak yakin apakah itu sudah mendukung beberapa kejadian, Anda harus mencobanya.
Rob W
Kedengarannya menjanjikan (meskipun rumit). Akan mencobanya dan memposting cara kerjanya
Himanshu P
1
@HimanshuP debugging jarak jauh belum mendukung beberapa instance. Saya telah memperbarui jawaban saya dengan metode alternatif, periksa.
Rob W
1
Saya hanya mencari cara untuk menutup konsol vertikal-split yang selalu terlihat. Escmelakukan ini. Terima kasih!
duma
100

esc - adalah jalan pintas,

atau

Di menu(the three dots)klikshow console drawer

masukkan deskripsi gambar di sini

bhv
sumber
3
Setelah satu dekade saya mencari fitur dan ternyata ada tombol untuk itu, di sana di keyboard saya. Semacam.
Bob Stein
10

Di sebelah kanan tekan "Three Dots" dan klik "Show Console Drawer"

masukkan deskripsi gambar di sini

Soham Mehta
sumber
7

OP mungkin telah pindah sejak memposting ini tiga tahun lalu, tetapi untuk orang lain:

Saya tidak tahu cara untuk memecah jendela alat pengembang, tetapi Anda dapat beralih antara tata letak panel vertikal, horizontal, dan otomatis (default), yang ditanyakan OP dalam klarifikasi mereka. Saya sering menemukan ini berguna.

  1. Buka menu tiga titik di sudut kanan atas jendela alat dev.
  2. Pilih 'Pengaturan'.
  3. Tab "Umum" -> "Tampilan"
  4. "Tata Letak Panel"
Pogginhopper
sumber
Saya sudah mencari jawaban ini sejak lama. Terima kasih! Dalam kasus saya, panel akan menumpuk secara vertikal di bagian bawah ketika layar saya tidak lebar penuh. Ini sangat kontraproduktif bagi saya karena saya ingin kelompok panel berdampingan di bagian bawah, tidak ditumpuk secara vertikal. Mengklik ikon tata letak tidak memberi saya tata letak yang saya inginkan, tetapi solusi Anda berfungsi seperti yang saya inginkan.
Chris22
Setiap kali saya beralih ke komputer baru, saya harus mencari cara menemukan pengaturan ini dan mendapatkan tata letak pilihan saya. Terima kasih!
stacyhorton
5

Solusi yang lebih mudah adalah dengan menekan ikon kiri bawah yang akan memunculkan ikon lain yang, ketika dipilih, akan memungkinkan Anda untuk melihat konsol di sebelah kanan jendela browser utama Anda

Lloyd Moore
sumber
ini harus benar-benar jawaban yang diterima karena itu benar dan "jelas"
miraculixx
Catatan: Dalam versi terbaru Chrome (mulai 2015-03-18), ini wajib untuk keluar dari mode sisi-bawah dan sisi-merapat - yaitu Anda menginginkan jendela terpisah.
maxkfranz
1
@miraculixx Tidak, itu tidak benar. OP sudah memiliki jendela DevTools yang tidak terkunci.
jpaugh
1
Tidak dapat memahami "ikon kiri bawah" (tidak ada yang sesuai dengan tanggal komentar ini)
Pac0
2

Jika Anda dapat mengetik tetapi tidak melihat konsol dan tidak dapat mengubah ukurannya:

masukkan deskripsi gambar di sini

Kemudian lepaskan DevTools di sudut kanan atas. Maka Anda akan dapat mengubah ukurannya:

masukkan deskripsi gambar di sini

Setelah ini, Anda dapat menyimpannya kembali.

Gennady G
sumber