Как изменить положение Chrome Developer Tools

489

Инструменты открываются в нижней части окна Chrome по умолчанию. Это довольно плохой выбор для широкоэкранного дисплея, так как есть много свободного места справа, но не много вертикального пространства, чтобы сэкономить. К сожалению, я не нашел способа переместить инструменты. Я хотел бы иметь их на стороне, похожей на firebug.

Единственный вариант, похожий на то, что я хочу, это отсоединить инструменты разработчика и разместить Chrome и окно инструментов рядом друг с другом. Это не очень удобно для быстрого переключения между IDE в браузере и обратно, поэтому «интегрированное» решение было бы неплохо.

google-chrome google-chrome-devtools Kostja
источник
github.com/melat0nin/chrome-devtools-vertical
Рагхав
stackoverflow.com/questions/14386994/…
Нейт

Ответы:

895

Chrome 46 или новее

Нажмите кнопку с вертикальным многоточием (⋮), затем выберите желаемую опцию стыковки.

Chrome 45 или старше

Длительно удерживайте значок док-станции в правом верхнем углу. Выскакивает возможность сменить стыковку

Чтобы изменить разделение между панелями HTML и CSS, перейдите в DevTools в Настройки (F1)> Общие> Внешний вид> Макет панели.

loislo
источник
2
Круто, это присутствует в стабильной версии, я просто не знал об этом, есть еще более приятные варианты :) Спасибо
kostja
8
В последних сборках Chrome и Canary этот параметр был удален, но вы все равно можете получить к нему доступ, щелкнув и удерживая значок док-станции в левом нижнем углу, при этом появляется возможность закрепить его справа.
Пол Спенсер
2
Круто, док справа работает. Теперь, как мне переместить инспектор CSS на вкладке Элементы в нижнюю часть панели инструментов разработчика? В противном случае я должен просматривать HTML и CSS бок о бок в очень узких столбцах.
Вики Чижвани
11
Какой ужасный дизайн! Нигде я бы не понял это сам. Нигде больше я не видел этот трюм и ожидание когда-либо использовался.
Дмитрий Зайцев
4
@blrbr Да, это правда. Если вам нужно выполнить поиск в Google, чтобы узнать, как активировать опцию, которая, как вы знаете, существует, значит, что-то не так с дизайном пользовательского интерфейса. Ключевое слово здесь - «открываемость». Это не легко обнаружить.
Стейн де Витт
70

Наведите указатель на кнопку док-станции и удерживайте ее нажатой (несколько секунд) или щелкните правой и левой кнопкой мыши в зависимости от версии браузера.

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

user3246105
источник
41

Сочетание клавиш для переключения положения стыковки (сбоку / снизу)

CTRL+ SHIFT+D

И есть много ярлыков, вы можете увидеть их, перейдя в

Настройки »Ярлыки , как показано здесь:
Скриншот настроек

Кроме того, используйте CTRL+, ?чтобы перейти к настройкам, оттуда можно перейти к подпункту «Ярлыки» слева или использовать Официальную ссылку .

Alupotha
источник
6
⌘-Shift-D на OSX тоже.
мясное пространство
2
Если вы вообще не можете открыть док, попробуйте Ctrl+Shift+I- но если у вас всплывающее окно, я не думаю, что стыковка даже работает.
Нумен
Спасибо! Инспектор каким-то образом застрял на экране, CTRL + SHIFT + D закрепил его за мной!
Стэн
1
По какой-то причине, когда я отсоединяю инструменты разработчика Chrome, инструмент, кажется, запускается справа от моего монитора и больше не виден. Единственный способ заставить его снова появиться - это Ctrl + Shift + D и закрепить инструменты разработчика в стороне или внизу. Это странно
jazzBox
Я просто хотел бы объявить свою любовь к тебе. Cur
Кертис Блэквелл
18

Похоже, это теперь слева внизу как значок с перекрывающимися окнами и «Отключить в отдельном окне». всплывающая подсказка.

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

brian_d
источник
13
Вы могли бы уточнить, что вы должны нажать и удерживать эту кнопку, чтобы закрепить справа. Как заметил @PaulSpencer, просто щелкнуть только отмена.
0x89
11

После того, как я поместил свой док справа (см. Более старые ответы), я все еще нашел панели разделенными вертикально.

Чтобы разделить панели по горизонтали - и даже получить больше от ширины экрана - перейдите в «Настройки» (нижний правый угол) и снимите флажок «Разделять панели по вертикали, когда они прикреплены вправо».

Теперь у вас есть все панели слева направо: p

user2243570
источник
8

По состоянию на октябрь 2014 года, версия 39.0.2171.27 бета (64-разрядная)

Мне нужно было перейти на панель Chrome Web Developper в «Настройки» и снять флажок « Разделять панели по вертикали», когда закреплен вправо.

Пьер Мауи
источник
1

Версия 56.0.2924.87, в которой я сейчас нахожусь, автоматически удаляет DevTools, если вы НЕ на рабочем столе. В противном случае откройте НОВУЮ новую вкладку Chrome и проверьте, чтобы подключить DevTools обратно в окно.

Charix
источник
Что значит "не на рабочем столе"? Я нахожусь на 59.0.3067.6 (dev), и он делает некоторые странные вещи на определенных сайтах. Например, в Vtiger 6.5, щелчок правой кнопкой мыши и «проверка» открывает инструменты разработчика в новом окне, в котором отсутствует выбор «Сторона док-станции», однако при использовании F12 он обычно включается в текущую вкладку с доступным выбором «Сторона док-станции». Странный.
дхаупин
0

Кроме того, если вы хотите видеть Sources и Console в одном окне, перейдите по ссылке:

"Настройка и управление DevTools ->" Показать ящик консоли "

Вы также можете увидеть это здесь в правом углу:

«Показать ящик консоли»

Антон Полканов
источник