เครื่องมือจะเปิดขึ้นที่ด้านล่างของหน้าต่างโครเมี่ยมต่อค่าเริ่มต้น นี่เป็นตัวเลือกที่ค่อนข้างแย่สำหรับการแสดงผลหน้าจอกว้างเนื่องจากมีพื้นที่ว่างทางด้านขวาจำนวนมาก แต่มีพื้นที่แนวตั้งไม่มากนัก น่าเสียดายที่ฉันไม่พบตำแหน่งของเครื่องมือ ฉันต้องการให้พวกเขาอยู่ด้านข้างคล้ายกับ firebug

ตัวเลือกเดียวที่คล้ายกับสิ่งที่ฉันต้องการคือถอดเครื่องมือ dev ออกแล้ววางโครเมียมและหน้าต่างเครื่องมือแบบเคียงข้างกัน สิ่งนี้ไม่สะดวกสำหรับการแท็บ alt อย่างรวดเร็วจาก IDE ไปยังเบราว์เซอร์และย้อนกลับดังนั้นการแก้ปัญหาแบบบูรณาการจะดี

Chrome 46 หรือใหม่กว่า

คลิกปุ่มจุดไข่ปลาแนวตั้ง (⋮) จากนั้นเลือกตัวเลือกการเชื่อมต่อที่ต้องการ

Chrome 45 ขึ้นไป

ถือไอคอนท่าเรือค้างไว้ที่มุมบนขวา มันปรากฏขึ้นตัวเลือกในการเปลี่ยนการเชื่อมต่อ

หากต้องการเปลี่ยนการแยกระหว่างพาเนล HTML และ CSS ให้ไปที่ DevTools to Settings (F1)> ทั่วไป> ลักษณะที่ปรากฏ> เลย์เอาต์แผง

วางตัวชี้ของคุณบนปุ่มด็อคและลองคลิกนาน ๆ (บางวินาที) หรือคลิกเมาส์ขวาและซ้ายขึ้นอยู่กับเวอร์ชั่นของเบราว์เซอร์

แป้นพิมพ์ลัดเพื่อสลับตำแหน่งเชื่อมต่อ (ด้านข้าง / ด้านล่าง)

CTRL+ SHIFT+D

และมีทางลัดมากมายที่คุณสามารถดูได้โดยไปที่

การตั้งค่า»ทางลัดตามที่แสดงที่นี่:

อีกวิธีหนึ่งคือการใช้CTRL+ ?เพื่อไปที่การตั้งค่าจากนั้นหนึ่งสามารถเข้าถึง "ทางลัด" รายการย่อยด้านซ้ายหรือใช้อ้างอิงอย่างเป็นทางการ

ดูเหมือนว่าตอนนี้จะอยู่ที่ด้านล่างซ้ายในขณะนี้เป็นไอคอนที่มีหน้าต่างซ้อนกันและ "แยกออกเป็นหน้าต่างแยกต่างหาก" เคล็ดลับ

หลังจากฉันวางแท่นวางไปทางขวา (ดูคำตอบที่เก่ากว่า) ฉันยังพบว่าแผงแยกออกในแนวตั้ง

หากต้องการแยกพาเนลในแนวนอน - และได้มากขึ้นจากความกว้างของหน้าจอของคุณ - ไปที่การตั้งค่า (มุมขวาล่าง) และลบเครื่องหมายใน 'แยกแผงในแนวตั้งเมื่อเทียบชิดขอบขวา

ตอนนี้คุณมีแผงทั้งหมดจากซ้ายไปขวา: p

ตั้งแต่ตุลาคม 2014 รุ่น 39.0.2171.27 เบต้า (64- บิต)

ฉันต้องไปที่ Chrome Web Developper แพนเข้าไปใน "การตั้งค่า" และยกเลิกการเลือกแยกแผงในแนวตั้งเมื่อเทียบกับด้านขวา

เวอร์ชั่น 56.0.2924.87 ที่ฉันอยู่ตอนนี้ปลด DevTools โดยอัตโนมัติหากคุณไม่ได้อยู่ในเดสก์ท็อป มิฉะนั้นเปิดแท็บ Chrome ใหม่ใหม่และตรวจสอบเพื่อเชื่อมต่อ DevTools กลับเข้าไปในหน้าต่าง

นอกจากนี้หากคุณต้องการเห็นแหล่งข้อมูลและคอนโซลในหน้าต่างเดียวให้ไปที่:

"ปรับแต่งและควบคุม DevTools ->" แสดงลิ้นชักของคอนโซล "

คุณสามารถดูได้ที่นี่ที่มุมขวา: