2016-07-08 2 views
0

В Chrome DevTools (f12) можно щелкнуть образец цвета рядом с шестнадцатеричным значением правила css. Это приводит к выбору цвета со сладкими пикселями. Это все хорошо, но когда не с помощью панели выбора пикселей, трудно прибить определенный цвет. Это связано с тем, что выбор цвета невелик, поэтому слайдеры/выборщики слишком чувствительны. Например, очень сложно получить конкретный оттенок, и если у вас есть какой-то кофе, который заставляет трясущую руку дрожать, это смешно [почти] невозможно отпустить в точном «пикселе» на слайдере.Есть ли способ сделать сборщик Chrome DevTools больше?

Я вижу DevTools has extensions, где можно добавлять панели/панели, но я не вижу, можно ли манипулировать фактическим DOM DevTools, а также [если это], как проверять инспектор, когда сборщик цветов является init.

Как бы я это сделал? Есть ли способ увеличить размер colorpicker, скажем, примерно в два раза? Чешуйчатая размытая шкала CSS отлично, ничего не нужно. Это позволит использовать целевой таргетинг слайдера. Извините, если это не относится к теме в stackoverflow, его фокус в кодировании расширения/решения, а не как использовать DevTools (то есть, webapps.stackexchange).

+0

Выбор цвета не предназначен для получения особого цвета, который вы хотите, но достаточно близко, чтобы увидеть, как он будет выглядеть. Если вы знаете нужный цвет, введите его. – Garbee

+0

@Garbee Colorpicker действительно предназначен для того, чтобы получить конкретный цвет, который вы хотите, иначе все цвета были бы недоступны, правильно. – dhaupin

+0

", но достаточно близко, чтобы посмотреть, как это будет выглядеть. Если вы знаете нужный цвет, введите его." Для этого нужно, чтобы все они были доступны, чтобы вы могли приблизиться. Если вы можете получить точные результаты, но подавляющее большинство использования DevTools, достаточно хорошо. – Garbee

ответ

2

Как насчет масштабирования окна DevTools? Ctrl и + на Windows/Linux, Cmd и + на Mac.

Small:

enter image description here

Большой:

enter image description here

+0

Используйте 'Ctrl' +' 0' для сброса размер по умолчанию здесь для всех, кто задается вопросом, как после масштабирования. – Garbee

3

выбора цвета, используемый в Chrome DevTools является реализация Spectrum, который был добавлен в Web Inspector для WebKit, а затем Блинк-браузеры еще в 2013 году. В настоящее время нет API, которые отображают подборщик цветов до Chrome Extensions.

У вас есть несколько вариантов я могу думать от:

  1. Log an issue here с некоторыми деталями и скриншотами, и прийти с сильным случае для изменения проклейки сборщика. Я думаю, что это хорошая идея.

  2. Загрузите копию веб-приложения DevTools локально и подключите его к экземпляру Chrome с помощью протокола удаленной отладки. См. Hacking Chrome DevTools за конкретными инструкциями.

Второй вариант представляет собой хороший способ настроить DevTools локально, но это не является долгосрочным решением, как вы хотели бы получить последнюю версию кода регулярно поддерживать совместимость с фоновым.

Обновление: 3-й вариант, который я пропустил глупо, просто масштабируется, как ответ Кайса, который я только что видел, когда я опубликовал этот ответ. На Mac вы также можете использовать Cmd + Alt + + Чтобы увеличить масштаб всего окна. Опускание Alt масштабирует только текущее окно.

+0

Хорошие идеи, спасибо. Я не был уверен, какой ответ принять, хочу, чтобы я мог выбрать 2. Масштаб, хотя и не оптимальный, работает пока. Я буду регистрировать проблему, когда я получаю время и размещаю ссылку на нее здесь. – dhaupin

Смежные вопросы