Инструменты разработчика Chrome: просмотр консольных и исходных представлений в отдельных представлениях / вертикальная плитка?

Question

Инструменты разработчика Chrome: просмотр консольных и исходных представлений в отдельных представлениях / вертикальная плитка?

Chrome developer tools: есть ли способ просмотреть Console tab и Sources вкладка в отдельных представлениях? Я часто хочу смотреть на них одновременно.

клавишей Esc, когда на Sources вкладка позволит мне увидеть небольшой вид Console в самом низу. Но я хотел бы получить более широкий вид на оба одновременно. Это возможно?

если нет, это то, что расширение chrome может быть в состоянии делать?

Edit:

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

5 93

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

5 ответов:

esc - это ярлык ,

или в меню/Настройки нажмите на кнопку показать консоль ящик

59

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

5

OP, вероятно, перешел с момента публикации этого три года назад, но для всех остальных:

Я не знаю, как разделить окно инструмента разработчика, но вы можете переключаться между вертикальными, горизонтальными и автоматическими (по умолчанию) макетами панелей, о которых ОП спросил в своем разъяснении. Я часто находил это полезным.

открыть с тремя точками меню в правом верхнем углу окна инструментов разработчика.

выберите "Настройки".

вкладка"Общие" -- > раздел "Внешний вид"

"Панели Макета"

4

Если вы можете ввести, но не видите консоль и не можете изменить ее размер:

затем открепить DevTools в верхнем правом углу. Тогда вы сможете изменить его размер:

после этого вы можете закрепить его обратно.

0

Rob W · Accepted Answer · 2013-12-22 12:23:40

вертикальное разделение

вы можете разблокировать инструменты разработчика (нажав на значок в левом нижнем углу), который перемещает его в новое окно. Затем нажмите 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;
}
результат выглядит так: