Chrome geliştirici araçları: Konsol ve Kaynaklar görünümlerini ayrı görünümlerde / dikey olarak mı görüntüleyin?

128

Chrome geliştirici araçları: ConsoleSekmeyi ve Sourcessekmeyi ayrı görünümlerde görüntülemenin bir yolu var mı ? Sıklıkla ikisine aynı anda bakmak isterim.

Sekme Escüzerindeyken basmak , altta Sourcesküçük bir görünüm görmemi sağlar Console. Ama ikisinin aynı anda daha geniş bir görünümünü istiyorum. Mümkün mü?

Değilse, bu bir krom uzantısının yapabileceği bir şey mi?

Düzenle:

Açıklama - Dev araçları penceresini nasıl kaldıracağımı biliyorum (bu benim varsayılan kurulumumdur). Sadece açgözlü olduğumu tahmin ediyorum ve merak ediyorum Sourcesve Consoleayrı ayrı açılmış pencerelere bölerek (veya en azından, aynı pencerede yatay olarak değil, aynı pencerede görüşlerini dikey olarak bölebilir miyim?Esc olduğu )

google-chrome google-chrome-extension google-chrome-devtools

— Himanshu P
kaynak

176

Dikey bölme

Geliştirici araçlarını (sol alt köşedeki simgeye tıklayarak) kaldırabilir ve yeni bir pencereye taşıyabilirsiniz. Ardından Esckonsolu açmak için tuşuna basın .

Hem pencere hem de "küçük konsol" ihtiyaçlarınızı karşılayacak şekilde yeniden boyutlandırılabilir.

Yatay bölme

Konsolun altta değil sağda olmasını tercih ediyorsanız ~~, geliştirici araçlarını düzenleyerek özelleştirinpath/to/profile/Default/User StyleSheets/Custom.css~~ ve aşağıdaki kuralları ekleyin:

DÜZENLEME: için destek Custom.csskaldırıldı, ancak geliştirici araçlarının stillerini yeni bir API, chrome.devtools.panels.applyStyleSheetyöntem ( örnek kod ) kullanarak değiştirmek hala mümkün .

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

Sonuç şuna benzer:

— Rob W
kaynak

1

Maalesef açıklığa kavuşturmalıydım (orijinal gönderide de yapacağım): Zaten kilitlenmemiş bir geliştirici araçları penceresi varsayıyorum (varsayılan olarak benim için böyledir). Ancak o pencereden, Chrome'daki normal sekmelerde yapabileceğiniz gibi, yine de "çekilebilir" Consoleveya Sourcesayrı bir pencere gibi olabilirim

— Himanshu P

Uzaktan hata ayıklamayı etkinleştirin ve devtools'u yeni bir pencerede açın. Zaten birden fazla örneği destekleyip desteklemediğinden emin değilim, denemelisiniz.

— Rob W

Umut verici görünüyor (karmaşık olsa da). Deneyecek ve nasıl çalıştığını

— paylaşacak

1

@HimanshuP Uzaktan hata ayıklama henüz birden fazla örneği desteklemiyor. Cevabımı alternatif bir yöntemle güncelledim, kontrol edin.

— Rob W

1

Her zaman görünen dikey bölünmüş Konsolu kapatmanın bir yolunu arıyordum. Escbunu yaptı. Teşekkür ederim!

— duma

100

esc - kısayol,

veya

At menu(the three dots)üzerinde tıklamashow console drawer

— bhv
kaynak

3

On yılda bir bir özelliği aradım ve bunun için klavyemde baştan beri bir düğme olduğu ortaya çıktı. Tür.

— Bob Stein

10

Sağdaki "Üç Nokta" ya basın ve "Konsol Çekmecesini Göster" i tıklayın

— Soham Mehta
kaynak

7

OP, bunu üç yıl önce yayınladığından beri muhtemelen yoluna devam etti, ancak başkaları için:

Geliştirici aracı penceresini bölmenin herhangi bir yolunu bilmiyorum, ancak OP'nin açıklamasında sorduğu dikey, yatay ve otomatik (varsayılan) panel düzenleri arasında geçiş yapabilirsiniz. Bunu sık sık yararlı buldum.

Dev araçları penceresinin sağ üst köşesindeki üç noktalı menüyü açın.
Ayarları şeç'.
"Genel" sekmesi -> "Görünüm" bölümü
"Panel Düzeni"

— Pogginhopper
kaynak

Bu cevabı uzun zamandır arıyordum. Teşekkürler! Benim durumumda, ekranım tam genişlikte olmadığında paneller altta dikey olarak istiflenirdi. Panel gruplarının dikey olarak istiflenmek yerine altta yan yana olmasını istediğim için bu benim için çok ters etki yarattı. Düzen simgesini tıklamak istediğim düzeni vermedi, ancak çözümünüz tam istediğim gibi çalıştı.

— Chris22

Yeni bir bilgisayara her geçiş yaptığımda, bu ayarı nasıl bulacağımı ve tercih ettiğim düzeni nasıl bulacağımı araştırmam gerekiyor. Teşekkürler!

— stacyhorton

5

Daha kolay bir çözüm, sol alt simgeyi basılı tutmaktır; bu, seçildiğinde, konsolu ana tarayıcı pencerenizin sağında görüntülemenize olanak tanıyan başka bir simgeyi açar.

— Lloyd Moore
kaynak

bu gerçekten kabul edilen cevap olmalı çünkü hem doğru hem de "açık"

— miraculixx

Not: Chrome'un son sürümlerinde (2015-03-18 itibariyle), bu, yuvalanmış alt ve yuvalanmış taraf modlarından çıkmak için zorunludur - yani, ayrı bir pencere istiyorsunuz.

— maxkfranz

1

@miraculixx Hayır, bu doğru değil. Operatörün zaten yerleştirilmemiş bir DevTools penceresi var.

— jpaugh

1

"Sol alt simge" mantıklı değil (bu yorumun tarihine göre benim için hiçbir şey yok)

— Pac0

2

Yazabiliyor ancak konsolu göremiyorsanız ve yeniden boyutlandıramıyorsanız:

Sonra kenetleme sağ üst köşede DevTools. Sonra yeniden boyutlandırabileceksiniz:

Bundan sonra geri yerleştirebilirsiniz.

— Gennady G
kaynak