Інструменти для розробників Chrome: перегляд консолей та джерел в окремих видах / вертикально викладених плитками?

Інструменти для розробників Chrome: Чи існує спосіб перегляду Consoleвкладки та Sourcesвкладки в окремих представленнях? Мені часто хочеться поглянути на це обох одночасно.

Якщо натиснути Escна Sourcesвкладці, я побачу невеликий вигляд Consoleвнизу. Але я хотів би збільшити перегляд обох одночасно. Чи можливо це?

Якщо ні, то чи може це зробити хромоване розширення?

Редагувати:

Уточнення - я знаю, як відкрутити вікно інструментів розробки (це моє налаштування за замовчуванням). Просто бути жадібним я думаю , і цікаво , якщо я можу подальший розкол Sourcesі Consoleна окремі відкріплення вікна (або , принаймні, маю свої погляди розщеплюються по вертикалі на те саме вікно, а не горизонтально , як натискання Escробить)

Вертикальний розкол

Ви можете скасувати інструменти для розробників (натиснувши на значок у нижньому лівому куті), який перемістить його у нове вікно. Потім натисніть, Escщоб відкрити консоль.

Як вікно, так і "маленьку консоль" можна змінити відповідно до ваших потреб.

Горизонтальний розкол

Якщо ви віддаєте перевагу консолі праворуч, а не знизу, налаштуйте інструменти для розробників шляхом редагуванняpath/to/profile/Default/User StyleSheets/Custom.css та додайте такі правила:

EDIT: Підтримка 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(the three dots)натисканні наshow console drawer

Правою кнопкою натисніть «Три крапки» та натисніть «Показати ящик консолі»

ОП, ймовірно, продовжив свою роботу з моменту публікації цього три роки тому, але для всіх інших:

Я не знаю жодного способу розділити вікно інструмента розробника, але ви можете перемикатися між вертикальними, горизонтальними та автоматичними (за замовчуванням) макетами панелі, про що ОП запитала у своєму поясненні. Я часто вважав це корисним.

1. Відкрийте триточне меню у верхньому правому куті вікна інструментів розробки.
2. Виберіть "Налаштування".
3. Вкладка "Загальне" -> "Зовнішній вигляд"
4. "Макет панелі"

Простіше рішення - тримати натиснутою нижню ліву піктограму, яка з’явиться ще одну піктограму, яка при виборі дозволить переглянути консоль праворуч від головного вікна браузера

Якщо Ви можете ввести, але не бачити консоль, і не можете змінити її розмір:

Тоді UNDOCK DevTools в верхньому правому куті. Тоді ви зможете змінити його розмір:

Після цього ви можете його докинути назад.