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

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

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

Если нет, то может ли это сделать расширение Chrome?

Изменить:

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

Ответы

Ответ 1

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

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

Оба окна и "маленькая консоль" могут быть изменены в соответствии с вашими потребностями.

screenshot of vertically split devtools

Горизонтальное разделение

Если вы предпочитаете консоль справа, а не внизу, настройте инструменты разработчика, отредактировав path/to/profile/Default/User StyleSheets/Custom.css и добавьте следующие правила:

EDIT: поддержка Custom.css была удалена, но все же можно изменить стили инструментов разработчика с помощью нового API, chrome.devtools.panels.applyStyleSheet method (пример кода).

/* If drawer has been expanded at least once AND it 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;
}

Результат выглядит следующим образом:

screenshot of horizontally split devtools

Ответ 2

esc - это ярлык,

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

enter image description here

Ответ 3

OP, вероятно, продвигался после публикации этого три года назад, но для кого-либо еще:

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

  • Откройте трехточечное меню в правом верхнем углу окна инструментов разработчика.
  • Выберите "Настройки".
  • вкладка "Общие" → "Внешний вид"
  • "Макет панели"

Ответ 4

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

Ответ 5

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

введите описание изображения здесь

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

введите описание изображения здесь

После этого вы можете состыковать его.

Ответ 6

В правой части нажмите "Три точки" и нажмите "Показать консольный ящик"

enter image description here