เครื่องมือสำหรับนักพัฒนา Chrome: ดูคอนโซลและมุมมองแหล่งที่มาในมุมมองที่แยกจากกัน / เรียงตามแนวตั้ง?

เครื่องมือสำหรับนักพัฒนา Chrome: มีวิธีดูConsoleแท็บและSourcesแท็บในมุมมองแยกกันหรือไม่ ฉันมักจะอยากดูทั้งสองอย่างพร้อมกัน

การกดEscเมื่ออยู่บนSourcesแท็บจะทำให้ฉันเห็นมุมมองเล็ก ๆConsoleที่ด้านล่าง แต่ฉันต้องการมุมมองที่กว้างขึ้นของทั้งสองอย่างในเวลาเดียวกัน เป็นไปได้หรือไม่

ถ้าไม่นี่เป็นสิ่งที่ส่วนขยายของ Chrome อาจทำได้หรือไม่?

แก้ไข:

คำชี้แจง - ฉันรู้วิธีปลดล็อกหน้าต่างเครื่องมือ dev (นั่นคือการตั้งค่าเริ่มต้นของฉัน) แค่เป็นคนโลภฉันเดาและสงสัยว่าฉันสามารถแยกSourcesและConsoleแยกออกเป็นหน้าต่างที่ไม่ได้เชื่อมต่อแยกต่างหาก (หรืออย่างน้อยที่สุดให้มุมมองของพวกเขาแยกในแนวตั้งบนหน้าต่างเดียวกันแทนที่จะเป็นแนวนอนเหมือนการกดEsc)

แยกแนวตั้ง

คุณสามารถปลดล็อกเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (โดยคลิกที่ไอคอนที่มุมล่างซ้าย) ซึ่งจะย้ายไปที่หน้าต่างใหม่ จากนั้นกดEscเพื่อเปิดคอนโซล

ทั้งหน้าต่างและ "คอนโซลขนาดเล็ก" สามารถปรับขนาดได้ตามความต้องการของคุณ

แยกแนวนอน

หากคุณต้องการให้คอนโซลอยู่ทางด้านขวาแทนด้านล่างให้ปรับแต่งเครื่องมือสำหรับนักพัฒนาโดยแก้ไขpath/to/profile/Default/User StyleSheets/Custom.cssและเพิ่มกฎต่อไปนี้:

แก้ไข: การสนับสนุนCustom.cssถูกลบออกไปแล้ว แต่ยังสามารถเปลี่ยนรูปแบบของเครื่องมือสำหรับนักพัฒนาโดยใช้ API ใหม่chrome.devtools.panels.applyStyleSheetวิธีการ ( โค้ดตัวอย่าง ) ได้

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

ผลลัพธ์มีลักษณะดังนี้:

esc - คือทางลัด

หรือที่menu(จุดสามจุด) คลิกที่show console drawer

ทางด้านขวาให้กด "Three Dots" แล้วคลิก "Show Console Drawer"

OP อาจดำเนินต่อไปตั้งแต่โพสต์เมื่อสามปีที่แล้ว แต่สำหรับใครก็ตาม:

ฉันไม่รู้วิธีแยกหน้าต่างเครื่องมือสำหรับนักพัฒนา แต่คุณสามารถสลับระหว่างเค้าโครงแผงแนวตั้งแนวนอนและอัตโนมัติ (ค่าเริ่มต้น) ซึ่ง OP ถามถึงในคำชี้แจงของพวกเขา ฉันพบว่าสิ่งนี้มีประโยชน์อยู่บ่อยครั้ง

1. เปิดเมนูสามจุดที่มุมขวาบนของหน้าต่าง dev tools
2. เลือก 'การตั้งค่า'
3. แท็บ "ทั่วไป" -> ส่วน "ลักษณะที่ปรากฏ"
4. "เค้าโครงแผง"

วิธีแก้ปัญหาที่ง่ายกว่าคือกดไอคอนซ้ายล่างค้างไว้ซึ่งจะปรากฏไอคอนอื่นขึ้นมาซึ่งเมื่อเลือกแล้วจะช่วยให้คุณสามารถดูคอนโซลทางด้านขวาของหน้าต่างเบราว์เซอร์หลักของคุณ

หากคุณพิมพ์ได้ แต่ไม่เห็นคอนโซลและไม่สามารถปรับขนาดได้:

จากนั้นปลด DevTools ที่มุมขวาบน จากนั้นคุณจะสามารถปรับขนาดได้:

หลังจากนี้คุณสามารถเชื่อมต่อกลับได้