☰

Как мне ввести определенную ширину для моего браузера? Я использую Chrome и Chrome dev-tools

tag-icon • tag-icon google-chrome google-chrome-devtools
Как мне ввести определенную ширину для моего браузера? Я использую Chrome и Chrome dev-tools

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

Я использую Mac OS X. Этот вопрос касается инструментов разработчика, поскольку я спрашиваю, как я могу использовать их для установки ширины окна браузера с помощью клавиатуры. Если я изменю ширину между экраном разработчика и страницей с помощью мыши, появится число, указывающее ширину и высоту окна. Это полезно при использовании точек останова для создания адаптивных веб-сайтов. Я хотел бы знать, как сделать это с помощью клавиатуры, чтобы мне не пришлось использовать мышь для получения точности по точкам.

решение1

В Chrome Developer Tools откройте Console, затем выберите вкладку Emulation. Здесь вы найдете «Device» для выбора из списка распространенных устройств (например, iPhone; это также изменит user agent, отправляемый на сервер), и вы найдете «Screen» для установки размеров вручную.

Смотрите такжеЭмуляция мобильных устройствв справке Chrome.

решение2

В Chrome есть расширение под названием "Web Developer Tools". Это расширение имеет функцию, с помощью которой вы можете изменить размер браузера до определенного значения HxW. Вы даже можете задать свои собственные размеры.

(Не уверен, можно ли размещать ссылки, поэтому воздержусь).

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

Спасибо, Уилл!

Вот ссылка на автора расширения:http://chrispederick.com/work/web-developer/

решение3

Есть еще одно расширение, которое называется Window Resizer (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh), который делает то же самое, что и упомянутый @Marcelo. Это может быть полезно для тех, у кого старая версия Chrome.

решение4

Альтернативный подход, не требующий никаких плагинов.

  1. Откройте встроенные инструменты разработчика Chrome ( F12или Ctrl + Shift + I)
  2. Выберите Consoleвкладку
  3. Введите следующее, чтобы открыть новое окно с текущим URL-адресом (следующий шаг работает только для окон, явно открытых как изменяемые по размеру) 
    let w = window.open(window.location, "dev resize", "resizable");

Затем вы можете изменить размер только что открытого окна одним из следующих способов:

  1. Откройте Chrome DevTools в новом окне и введите 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. Вернитесь в исходное окно и введите 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

Повторяйте resizeToкоманду столько раз, сколько нужно, чтобы каждый раз уменьшать ширину на 1 пиксель.

Также работает в Firefox (и, вероятно, Edge, но не проверял)

Протестировано в:

  • Хром-версия111.0.5563.65
  • Версия Firefox 111.0 (я думаю, это просто совпадение, что номера версий Firefox и Chrome совпадают)

Связанный контент