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

128

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

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

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

Редактировать:

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

google-chrome google-chrome-extension google-chrome-devtools Химаншу П
источник

176

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

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

И окно, и «маленькая консоль» могут быть изменены в соответствии с вашими потребностями.

Горизонтальный разрез

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

РЕДАКТИРОВАТЬ: поддержка Custom.cssбыла удалена, но все еще можно изменить стили инструментов разработчика с помощью нового chrome.devtools.panels.applyStyleSheetметода API ( пример кода ).

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

Результат выглядит так:

Роб В
источник

1

Извините, я должен был пояснить (подойдет и в исходном сообщении): я уже предполагаю, что окно инструментов разработчика незакреплено (так оно у меня по умолчанию). Но из этого окна я все равно смогу «вытащить» Consoleили Sourcesкак отдельное окно, как вы можете сделать с обычными вкладками в Chrome

Himanshu P

Включите удаленную отладку и откройте инструменты разработчика в новом окне. Я не уверен, поддерживает ли он уже несколько экземпляров, вы должны попробовать.

Rob W

Звучит многообещающе (хотя и сложно). Попробую и опубликую, как это работает

Химаншу П.

1

@HimanshuP Удаленная отладка пока не поддерживает несколько экземпляров. Я обновил свой ответ альтернативным методом, проверьте его.

Роб В.

1

Я просто искал способ закрыть вертикально разделенную консоль, которая всегда была видна. Escсделал это. Спасибо!

duma

101

esc - это ярлык,

или

При menu(the three dots)нажатии наshow console drawer

BHV
источник

3

Раз в десять лет я охочусь за функцией, и оказывается, что кнопка для этого всегда была прямо на моей клавиатуре. Вроде, как бы, что-то вроде.

Боб Штайн

10

Справа нажмите «Три точки» и нажмите «Показать ящик консоли».

Сохам Мехта
источник

7

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

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

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

Pogginhopper
источник

Я давно искал этот ответ. Спасибо! В моем случае панели складывались вертикально внизу, когда мой экран не был на полную ширину. Это было очень контрпродуктивно для меня, так как я хотел, чтобы группы панелей располагались рядом внизу, а не штабелировались вертикально. Щелчок по значку макета не дал мне макета, который я хотел, но ваше решение работало именно так, как я хотел.

Chris22

Каждый раз, когда я переключаюсь на новый компьютер, мне приходится искать, как найти этот параметр и получить желаемый макет. Спасибо!

stacyhorton 05

5

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

Ллойд Мур
источник

это действительно должен быть принятый ответ, потому что он и правильный, и «очевидный»

miraculixx

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

maxkfranz

1

@miraculixx Нет, это не так. У OP уже есть незакрепленное окно DevTools.

jpaugh 05

1

Не могу разобраться в «нижнем левом значке» (ничего для меня согласно дате этого комментария)

Pac0

2

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

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

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

Геннадий Г
источник

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

Ответы:

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

Горизонтальный разрез