Các công cụ dành cho nhà phát triển Chrome: Xem chế độ xem Bảng điều khiển và Nguồn trong các chế độ xem / xếp theo chiều dọc riêng biệt?

Các công cụ dành cho nhà phát triển Chrome: Có cách nào để xem Consoletab và Sourcestab trong các chế độ xem riêng biệt không? Tôi thường muốn xem xét cả hai điều này cùng một lúc.

Nhấn Esckhi vào Sourcestab sẽ cho tôi thấy một chế độ xem nhỏ Consoleở phía dưới. Nhưng tôi muốn có một cái nhìn lớn hơn về cả hai cùng một lúc. Điều này có thể không?

Nếu không, đây có phải là điều mà một tiện ích chrome có thể làm được không?

Biên tập:

Làm rõ - Tôi biết cách tháo gỡ cửa sổ công cụ dev (đó là thiết lập mặc định của tôi). Chỉ là tham lam, tôi đoán và tự hỏi liệu tôi có thể tách ra Sourcesvà chia Consolethành các cửa sổ không bị tách rời (hoặc ít nhất, có quan điểm của họ tách ra theo chiều dọc trên cùng một cửa sổ, thay vì theo chiều ngang như nhấn Esckhông)

Chia dọc

Bạn có thể mở khóa các công cụ dành cho nhà phát triển (bằng cách nhấp vào biểu tượng ở góc dưới bên trái), để di chuyển nó sang một cửa sổ mới. Sau đó nhấn Escđể mở giao diện điều khiển.

Cả cửa sổ và "bàn điều khiển nhỏ" đều có thể thay đổi kích thước để đáp ứng nhu cầu của bạn.

Tách ngang

Nếu bạn muốn có bàn điều khiển ở bên phải thay vì phía dưới, hãy tùy chỉnh các công cụ dành cho nhà phát triển bằng cách chỉnh sửapath/to/profile/Default/User StyleSheets/Custom.css và thêm các quy tắc sau:

EDIT: Hỗ trợ Custom.cssđã bị xóa, nhưng vẫn có thể thay đổi kiểu của các công cụ dành cho nhà phát triển bằng cách sử dụng API, chrome.devtools.panels.applyStyleSheetphương thức ( mã mẫu ) mới.

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

Kết quả trông như thế này:

esc - là phím tắt,

hoặc là

Tại menu(the three dots)nhấp chuột trênshow console drawer

Ở bên phải, nhấn "Ba dấu chấm" và nhấp vào "Hiển thị ngăn kéo bảng điều khiển"

OP có lẽ đã chuyển từ khi đăng bài này ba năm trước, nhưng đối với bất kỳ ai khác:

Tôi không biết cách nào để phân chia cửa sổ công cụ dành cho nhà phát triển, nhưng bạn có thể chuyển đổi giữa bố trí bảng điều khiển dọc, ngang và tự động (mặc định) mà OP đã hỏi về cách làm rõ của họ. Tôi đã thường xuyên thấy điều này là hữu ích.

1. Mở menu ba chấm ở góc trên bên phải của cửa sổ công cụ dev.
2. Chọn cài đặt'.
3. Tab "Chung" -> "Giao diện"
4. "Bố cục bảng điều khiển"

Một giải pháp dễ dàng hơn là giữ biểu tượng phía dưới bên trái, nó sẽ bật lên một biểu tượng khác, khi được chọn, sẽ cho phép bạn xem bảng điều khiển ở bên phải cửa sổ trình duyệt chính của bạn

Nếu bạn có thể nhập nhưng không thấy bảng điều khiển và không thể thay đổi kích thước bảng điều khiển:

Sau đó undock DevTools ở góc trên bên phải. Sau đó, bạn sẽ có thể thay đổi kích thước nó:

Sau này, bạn có thể neo nó trở lại.