Cara memposisikan ulang Alat Pengembang Chrome

489

Alat dibuka di bagian bawah jendela krom per default. Ini adalah pilihan yang agak buruk untuk tampilan layar lebar karena ada banyak ruang kosong di sebelah kanan tetapi tidak banyak ruang vertikal yang tersisa. Sayangnya, saya tidak menemukan cara untuk memposisikan ulang alat. Saya ingin memiliki mereka di samping, mirip dengan pembakar.

Satu-satunya pilihan yang mirip dengan yang saya inginkan adalah melepaskan alat dev dan menempatkan krom dan jendela alat berdampingan. Ini tidak terlalu nyaman untuk dengan cepat melakukan alt-tab dari IDE ke browser dan kembali, jadi solusi "terintegrasi" akan lebih baik.

google-chrome google-chrome-devtools kostja
sumber
github.com/melat0nin/chrome-devtools-vertical
Raghav
stackoverflow.com/questions/14386994/…
Nate

Jawaban:

895

Chrome 46 atau lebih baru

Klik tombol elipsis vertikal (⋮) lalu pilih opsi docking yang diinginkan.

Chrome 45 atau lebih tua

Tahan lama ikon dok di kanan atas. Ini muncul opsi untuk mengubah docking

Untuk mengubah pemisahan antara panel HTML dan CSS, buka DevTools ke Pengaturan (F1)> Umum> Tampilan> Tata Letak Panel.

loislo
sumber
2
Keren, hadir dalam versi stabil, saya hanya tidak menyadarinya, memiliki pilihan yang lebih bagus :) Terima kasih
kostja
8
di build baru-baru ini dari chrome dan canary, opsi telah dihapus tetapi Anda masih dapat mengaksesnya dengan mengklik dan menahan ikon dock di kiri bawah, itu muncul opsi untuk merapat ke kanan.
Paul Spencer
2
Keren, berlabuh ke kanan berfungsi. Sekarang bagaimana cara memindahkan inspektur CSS pada tab Elemen ke bagian bawah panel alat dev? Kalau tidak, saya harus melihat HTML dan CSS berdampingan dalam kolom yang sangat sempit.
Vicky Chijwani
11
Desain yang mengerikan! Saya tidak akan menemukannya di mana pun. Tidak ada tempat lain yang pernah saya lihat dan tunggu ini pernah digunakan.
Dmitri Zaitsev
4
@blrbr Ya benar sekali. Jika Anda perlu melakukan pencarian google hanya untuk mengetahui cara mengaktifkan opsi yang Anda tahu ada, ada yang salah dengan desain UI. Kata kunci di sini adalah 'dapat ditemukan'. Ini tidak mudah ditemukan.
Stijn de Witt
70

Tempatkan pointer Anda pada tombol dock dan klik lama (beberapa detik) atau klik kanan & kiri mouse tergantung pada versi browser.

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

pengguna3246105
sumber
41

Pintasan keyboard untuk beralih posisi docking (samping / bawah)

CTRL+ SHIFT+D

Dan ada banyak cara pintas yang bisa Anda lihat dengan melihatnya

Pengaturan »Pintasan , seperti yang ditampilkan di sini:
Tangkapan layar pengaturan

Atau, gunakan CTRL+ ?untuk pergi ke pengaturan, dari sana orang dapat mencapai sub-item "Pintasan" di sebelah kiri atau menggunakan referensi Resmi .

Alupotha
sumber
6
⌘-Shift-D pada OSX juga.
meatspace
2
Jika Anda tidak dapat membuka dok sama sekali, coba Ctrl+Shift+I- tetapi jika jendela Anda adalah popup, saya pikir docking tidak berfungsi.
Noumenon
Terima kasih! Inspektur entah bagaimana terjebak WAY off screen, CTRL + SHIFT + D merapat untukku!
Stan
1
Untuk beberapa alasan ketika saya membuka kunci alat pengembang Chrome, alat tersebut tampaknya lari ke kanan monitor saya dan tidak lagi terlihat. Satu-satunya cara saya bisa membuatnya muncul kembali adalah Ctrl + Shift + D dan dock alat pengembang ke samping atau bawah. Ini aneh
jazzBox
Aku hanya ingin menyatakan cintaku padamu. 🐐💘🐐
Curtis Blackwell
18

Sepertinya ini ada di kiri bawah sekarang sebagai ikon dengan jendela yang tumpang tindih dan "Undock ke jendela terpisah." tooltip.

masukkan deskripsi gambar di sini

brian_d
sumber
13
Anda dapat mengklarifikasi bahwa Anda harus mengklik DAN TAHAN tombol ini untuk berlabuh ke kanan. Seperti @PaulSpencer perhatikan, cukup klik hanya undocks.
0x89
11

Setelah saya menempatkan dok saya ke kanan (lihat jawaban yang lebih tua), saya masih menemukan panel terbelah secara vertikal.

Untuk membagi panel secara horizontal - dan bahkan mendapat lebih banyak dari lebar layar Anda - buka Pengaturan (sudut kanan bawah), dan hapus centang pada 'Split panel secara vertikal saat merapat ke kanan'.

Sekarang, Anda memiliki semua panel dari kiri ke kanan: hal

pengguna2243570
sumber
8

Pada Oktober 2014, Versi 39.0.2171.27 beta (64-bit)

Saya perlu masuk ke panel Chrome Web Developper ke "Pengaturan" dan hapus centang pada panel Split saat merapat ke kanan

Pierre Maoui
sumber
1

Versi 56.0.2924.87 yang saya gunakan sekarang, Membatalkan DevTools secara otomatis jika Anda TIDAK berada di desktop. Kalau tidak Buka tab Chrome baru BARU dan Periksa untuk Dock DevTools kembali ke jendela.

Charix
sumber
Apa maksudmu "tidak di desktop"? Saya di 59.0.3067.6 (dev) dan sedang melakukan beberapa hal aneh di situs web tertentu. Sebagai contoh di Vtiger 6.5, mengklik kanan dan "memeriksa" membuka alat dev di jendela baru yang tidak memiliki pilihan "sisi Dock", namun menggunakan F12 membukanya biasanya tertanam di tab saat ini dengan pilihan "sisi Dock" tersedia. Aneh.
dhaupin
0

Selain itu, jika Anda ingin melihat Sumber dan Konsol di satu jendela, buka:

"Kustomisasi dan kontrol DevTools ->" Tampilkan laci konsol "

Anda juga dapat melihatnya di sini di sudut kanan:

"Tampilkan laci konsol"

Anton Polkanov
sumber