Главная » Техника

Show device frame не работает

Содержание
  1. How to generate different device frames in Chrome to show off responsive websites and apps
  2. Device Frames In Chrome Dev Tools
  3. 1. Navigate to your website in the chrome browser.
  4. 2. Open up Chrome dev tools
  5. 3. Toggle the device toolbar
  6. 4. Click «Show Device Frame» from top-right menu
  7. 5. Select the desired device from the dropdown menu
  8. 6. Let Chrome take your screenshot
  9. What about the iMac?
  10. Photoshop/Sketch method
  11. Bonus: The Dunnnk method
  12. Вся правда о Chrome (и не только) Web Inspector. Часть 1
  13. Какой версией пользоваться?
  14. Запускаем Web Inspector
  15. Настраиваем Web Inspector
  16. Экспериментальные функции
  17. Настройки
  18. Dock to the right
  19. Disable Cache
  20. Disable JavaScript
  21. Override device metrics
  22. Emulate touch events
  23. Enable source maps
  24. Log XMLHttpRequests
  25. Preserve log upon navigation
  26. Горячие клавиши
  27. Консоль
  28. Что показывать
  29. Избавляемся от сообщений об ошибках в расширениях
  30. Изменяем размер шрифта
  31. Команды консоли
  32. Очищаем консоль
  33. Взаимодействие со вкладкой «Elements»
  34. Выбираем элементы
  35. Изучаем объекты
  36. Следим за событиями
  37. Копируем информацию в буфер обмена
  38. Вкладка «Elements»
  39. Путь до элемента
  40. Работа с деревом
  41. Редактирование
  42. Drag&Drop
  43. Контекстное меню
  44. Подробная информация
  45. Computed style
  46. Styles
  47. Metrics
  48. Properties
  49. DOM-Breakpoints
  50. Сохранение изменений
  51. Что дальше?
  52. Немного полезных ссылок
  53. В следующий серии

How to generate different device frames in Chrome to show off responsive websites and apps

If you’ve been following the blog, you’ll know that I’ve been busy building portfolio templates for developers and programmers for the last few months. If you haven’t, you can check them out here and here. I’ve been sharing them on Reddit and getting some fanastic feedback, and one of the questions I repeatedly get asked is where I get the device frames and images for my templates. In this post, I want to share how I generate (most) of them using the Chrome dev tools.

Making sure recruiters and prospective clients know that you can build and/or design responsive websites is essential for any modern web developer, and just including skills like «Bootstrap» won’t cut it. Our readers aren’t always tech-savvy, so we have to spell it out for them, and a picture says a thousand words, as they say.

Device Frames In Chrome Dev Tools

For mobile and tablet devices, Chrome dev tools is my go to for generating images that show my projects in all their responsive glory. Here’s how it’s done.

1. Navigate to your website in the chrome browser.

For this example I’ll be using my latest side project, mydevportfol.io

2. Open up Chrome dev tools

I like my keyboard shortcuts, so using CMD+ALT+J on Mac, and CTRL+SHIFT+J on Windows will open up the dev tools window.

3. Toggle the device toolbar

The device toolbar is where the magic happens. Open it by clicking on the icon in the image above, or use CMD+SHIFT+M to open it on Mac, or CTRL+SHIFT+M on Windows.

4. Click «Show Device Frame» from top-right menu

We need to make sure this is enabled so that Chrome shows us the device frame wrapped around our responsive site. I find it’s a great tool for general development as it helps get a sense of scale regarding the UI.

5. Select the desired device from the dropdown menu

When you first open the device toolbar, it’ll likely be set on «responsive». We can change this from the drop-down menu, selecting from a range of devices from both Android and Apple.

At time of writing this blog, some device frames aren’t available, such as the iPhone X, but they’ll come in an upcoming Chrome update.

6. Let Chrome take your screenshot

Chrome has a feature where it can take a screenshot of your current page, which will include the device’s frame. Pretty frickin cool.

What about the iMac?

The above technique will work for generating screenshots with Android and Apple mobile device frames, as well as Apple’s iPad. However, we can’t (yet) generate one for laptop or desktop devices. For this, we’ll need to employ some photo editing skills. Sketch is my go-to for these things, but feel free to use Photoshop if you have it and can use it, or GIMP (a free alternative).

Photoshop/Sketch method

We can use the technique I described above to generate screenshots of any resolution our heart desires. So in the case of the iMac, let’s use 1920×1280 (I know that fits the frame below). Set the mode back to «responsive» in the device toolbar, and input the resolution.

This resolution will give you the right aspect ratio to fit nicely into the iMac device frame below. Some Photoshop or Sketch work will be required of course, and don’t forget to compress the result.

Читайте также:  Civcity rome почему не работают дровосеки

Bonus: The Dunnnk method

Dunnnk is a fantastic little website that will let you generate images of websites and apps in real-life scenarios. It’s very effective, but you’ll need screenshots of your website at the appropriate resolution for it to work well. Simply use the methods I described above and it should give you a crisp example of your site being used in the wild across a multitude of devices.

Did I miss anything? Was there something you came here for that I didn’t address? Let me know on Twitter @cderm. 😉

Источник

Вся правда о Chrome (и не только) Web Inspector. Часть 1

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

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

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

Какой версией пользоваться?

Сейчас существует несколько версий Web Inspector:

  1. Все самые новые функции получает Google Chrome Canary Build.
  2. Когда все стабилизируется, их добавляют в Ночные сборки WebKit, а затем в Стабильный Google Chrome.
  3. Safari в этом смысле — наиболее консервативный браузер и отстает от Google Chrome Canary Build примерно на год.

Я буду использовать Google Chrome Canary Build , и, если Web Inspector — ваш основной инструмент для отладки, то рекомендую именно эту версию (Если у вас не Windows, скачайте Chromium )

Почти все описанное здесь, тем не менее, будет работать и в других версиях Web Inspector.

Запускаем Web Inspector

Есть несколько способов открыть Web Inspector:

  • Control + SHIFT + I — Открывает панель элементов.
  • Control + SHIFT + J или F12 — Открывает консоль
  • Control + SHIFT + C — Позволяет выбрать элемент, с помощью мыши, в самом документе и открыть его во вкладке «Elements»
  • Можно нажать на любом элементе на странице правой кнопкой мыши и выбрать «Inspect Element (Просмотр кода элемента)».
  • Можно открыть Web Inspector из меню: Иконка с ключом -> Инструменты -> Инструменты разработчика (Tools -> Developer tools)

Вы можете открыть Web-Inspector для Web Inspector, для этого нужно открыть его в отдельной окошке:, а затем запустить его снова одним из приведеннм выше способов.

Настраиваем Web Inspector

Экспериментальные функции

Все новые инструменты сначала попадают в «экспериментальные функции». Чтобы включить их, зайдите в «about:flags», найдите там опцию Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).

После этого перезапустите браузер.

Будьте осторожны с экспериментальными функциями, они могут работать не так как ожидается и вызывать ошибки.

Я буду рассматривать экспериментальные функции в одной из следующих статей.

Настройки

Давайте откроем диалог настроек нажав на эту кнопку , в правом нижнем углу и посмотрим, что там есть интересного.

Dock to the right

Закрепляет Web Inspector в правой части страницы.
На больших мониторах это позволяет лучше использовать горизонтальное пространство, к тому же, позволяет легко менять широту видимой области браузера, что полезно для быстрого тестирования media queries.

По умолчанию Web Inspector снизу. Можно вытащить его в отдельное окошко, нажав на

Disable Cache

Выключает кэш. Весьма полезная опция, при отладке скриптов и стилей.
Еще можно очистить кэш из панели «Network», нажав там правой кнопкой и выбрав «Clear Browser Cache»

Disable JavaScript

Хочу отметить эту функцию здесь, потому что появилась она совсем недавно. Она… выключает Javascript .

Override device metrics

Более серьезный способ, для тестирования media queries (англ.). Позволяет задать ширину и высоту экрана, а так же маштаб шрифта. В идеале хотелось бы несколько готовых пресетов для популярных мобильных платформ.

Emulate touch events

Позволяет эмулировать touch-события. Полезно, для тестирования мобильных приложений.

Enable source maps

Представьте себе, что можно было бы выкладывать на сайт минифицированную/собранную из частей/скомпилированную версию скрипта, а браузер сам бы мог найти исходник для отладки.

Source maps (англ.), позволяют указать браузеру способ найти исходный файл.
Идея отличная, по пока позволяет работать только с Javascript .
В будущем обещают поддержку CoffeeScript , LESS , SASS и других чудо-технологий.

Log XMLHttpRequests

Preserve log upon navigation

Если выбрана эта опция, содержимое консоли будет сохранено даже при обновлении страницы.

Горячие клавиши

Чтобы посмотреть список горячих клавиш, откройте любую вкладку кроме консоли и нажмите там » ? » (В английской раскладке).

Обратите внимание, что если окошко не влезает полностью, оно обрезается и может скрыть часть информации.

Здесь все довольно очевидно, важно знать, что практически везде работает автодополнение.

Консоль

Консоль позволяет вводить и исполнять любые Javascript команды. Если вы хотите написать выражение из нескольких строк используйте SHIFT+Enter .

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

Консоль можно использовать не только по прямому назначению.

  • Она отлично помогает в качестве калькулятора, при несложных рассчетах
  • В качестве игрального кубика: Math.ceil(Math.random()*6)
  • В качестве быстрой записаной книжки: localStorage.setItem(0, «Номер телефона»);

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

Как и везде, в консоли есть автодополнение. Сначала, может быть не совсем очевидно, как оно работает.

  • Tab работает только когда остался лишь один вариант дополнения
  • Если вариантов несколько, вы можете выбрать любой и нажать вправо (или просто нажать мышкой)

Что показывать

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

Можно выбрать два элемента, если зажать CTRL . Здесь же можно выбрать фрейм, с которым мы хотим работать.

Избавляемся от сообщений об ошибках в расширениях

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

  • Запускать Chrome в Incognito Mode ( CTRL+SHIFT+N )
  • Использовать для откладки другой профиль, без расширений. Для этого нужен другой Google account. Чтобы добавить профиль нажмите иконку с гаечным ключом -> Настройки -> добавить пользователя (settings add user).

Изменяем размер шрифта

Почему-то CTRL+Scroll в консоли не работает.

Зато можно использовать CTRL + для увеличения шрифта, CTRL — для уменьшения и
CTRL + 0 для изначального масштаба.

У меня это работает только в Chrome Canary build, в стабильной версии увеличивается только сам документ.

Команды консоли

У консоли есть свои собственные команды, Так как Web Inspector написан на JS, список всех команд можно посмотреть в самой консоли, введя console._commandLineAPI . Давайте рассмотрим самые интересные из них.

Очищаем консоль

Есть несколько способов очистить консоль:

  • Командой clear();
  • CTRL+L (Эта комбинация в Chrome переводит фокус на адресную строку. Если она не работает в консоли, нажмите в любое место документа, а потом кликните на консоль).
  • Нажать правой кнопкой и выбрать «Clear console»

Взаимодействие со вкладкой «Elements»

В переменных $0 — $4 — Последние пять выбранных элементов, в порядке выбора.
Любой DOM элемент, выведенный в консоли, можно открыть во вкладке «Elements», нажав правой кнопкой мышки.

Выбираем элементы

Консоль поддерживает несколько дополнительных способов выбрать элементы, без каких либо дополнительных библиотек.

  • $(«ID») — Выбор элемента по идентификатору.
  • $$(«selector») — Выбор элемента по CSS селектору.
  • $x(«selector») — Выбор элемента по XPath -селектору.

Обратите внимание, что если на сайте используется какая-то Javascript -библиотка, то эти функции
могут быть перезаписаны. Например на Хабре $ это jQuery.

Изучаем объекты

Есть несколько функций, ползволяющих узнать больше, об элементе. В основном они дублируют функционал панелей из вкладки «Elements».

  • inspect() — Открывает DOM-Дерево и находит там элемент
  • dirxml() — Выводит элемент в виде xml
  • dir() — Показывает список свойств элемента
  • keys() — Выбирает все ключи из списка dir()
  • values() — Выбирает все значения из списка dir()

Следим за событиями

Можно следить за всем, что происходит с элементом, с помощью функции

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

  • «mouse» — для mousedown , mouseup , click , dblclick , mousemove , mouseover , mouseout , mousewheel
  • «key» — для keydown , keyup , keypress , textInput
  • «touch» — для touchstart , touchmove , touchend , touchcancel (Если включены в настройках)
  • «control» — для resize , scroll , zoom , focus , blur , select , change , submit , reset
  • Если не указывать второй аргумент, то все вышеперечисленные события плюс load , unload , abort , error , select , change , submit , reset , focus , blur , resize , scroll , search , devicemotion , deviceorientation .

Остановить это безумие можно с помощью функции unmonitorEvents( element )

Копируем информацию в буфер обмена

Результат любого выражения можно сразу скопировать в буфер обмена, используя функцию Copy() . Приятно и может сэкономить немного времени.

Вкладка «Elements»

Эта панель содержит в себе все DOM-Дерево нашей страницы, обновляющееся в режиме реального времени.

Каждый раз, когда на странице изменяются элементы, они обновляются в дереве и наоборот.

Если вы хотите выбрать какой-то элемент из документа, нажмите на кнопку с лупой внизу или CTRL+SHIFT+C и выберите любой элемент.
При наведении мышкой будут показан CSS пусть до элемента, его размеры и отступы.

Путь до элемента

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

Работа с деревом

Передвигаться по дереву можно стрелками (если вы в другой секции, то можно вернуть фокус, с помощью CTRL+ вверх/вниз ).

Редактирование

Чтобы изменить любой атрибут или значение, дважды кликните на элемент, или нажмите Enter
и доберитесь до него с помощью кнопки Tab ( SHIFT+Tab) .
Можно так же изменить весь HTML -код элемента, нажав F2 .

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

Drag&Drop

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

Контекстное меню

Нажав на элемент правой кнопки мышки, можно скопировать его HTML -код, или XPath -путь и установить DOM-брейкпоинты.

Подробная информация

Выделив элемент, можно посмотреть информацию про него, в панели справа.

Computed style

Список CSS -стилей, примененных к элементу. Если поставить галку в «Show inherited», то отобразятся все стили, включая браузерные.

Styles

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

Можно выключить любое выражение, убрав галку из чекбокса слева.

Раздел element.style показывает стили прописанные в style атрибуте в HTML коде документа,
а раздел Matched CSS Rules показывают все селекторы, заданные с CSS файлах и совпавшие с выбранным элементом.

Перемещаться между свойствами и значениями можно можно с помощью Клавиши Tab ( SHIFT+Tab) , чтобы вернуться назад).

Добавление правил и выражений

Вы можете добавить свой селектор, нажав на кнопку , а удалить потом не сможете.

Можно добавить новое выражение в уже имеющийся селектор, нажав на закрывающую фигурную скобку правила (или начав изменять последнее выражение нажать Tab ).

Псевдоклассы

Нажав на эту кнопку , и проставив галки, вы сможете задать пэлементу псевдоклассы :active , :focus , :hover и :visited .

Отображение цветов

Нажав на кнопку с шестеренкой , As authored — покажет цвета в том формате котором они были заданы.

Изменение числовых значений

Числовые значения можно изменять с помощью клавиатуры.

  • Alt + Вверх/Вниз изменяет значение на 0.1
  • Вверх/Вниз изменяет значение на 1
  • SHIFT + Вверх/Вниз или Page Down/Page Up изменяет значение на 10
  • SHIFT + Page Down/Page Up изменяет значение на 100.

Если нажать на квадратик рядом с цветом, можно выбрать цвет из удобного диалога. Нажав на числовое значение, можно ввести цвет вручную.

Metrics

Здесь можно увидеть размеры и отступы элемента (А если для элемента задан position, то и положение).

Вы можете изменить здесь любое значение, нажав на него дважды.

Интересно, что все размеры показываются в пикселях, даже если вы пропишете размеры в EM, они будут переведены в пиксели автоматически.

Properties

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

DOM-Breakpoints

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

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

Сохранение изменений

Web Inspector позволяет нам легко модифицировать CSS код. К сожалению, простого способа, позволяющегобыстро сохранить изменения не существует. Есть несколько вариантов

  • Просто скопировать все изменения в вашу IDE.
  • Изменения в CSS (кроме заново созданных правил) сохраняются в соотвествующих файлах. Нажав на «имя файла: номер строки» справа от селектора
  • Есть расширение от ELV1S: ChromeDevtools Autosave (англ.), оно работает только локально и требует для установки сервера (англ.) на Node JS (англ.) зато позволяет сохранять изменения в JS и CSS автоматически.

Что дальше?

Немного полезных ссылок

В следующий серии

Это только первая часть статьи. Оставайтесь с нами и вы узнаете

  • Что делают оставшиеся 5 панелей.
  • Отладка Javascript , debugger; и команды console
  • Как получить Base64 код картинки штатными средствами Web Inspector.
  • Кто такие «Show shadow DOM», «Snippets support» и «Show styles panel»
  • Как превратить минифицированную версию срипта в прекрасную.
  • Как отлаживать наш код с помощью JS, DOM, XHR и Event Listener брейкпоинтов.
  • Как правильно и максимально эффективно использовать консоль из наших скриптов?
  • Как отлаживать приложения для Ipad/Iphone/Androind смартфона с помощью Web Inspector?
  • Как подключить консоль для моего любимого Coffee Script? А показывать в консоли ошибки PHP?
  • Что за новый plugin-API для Web Inspector, и что с ним делать.
  • Как посмотреть HTTP запросы.
  • Как получилось, что dev-tools не переведены на русский.

Я часто использую Web Inspector в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.

Источник

Оцените статью
© 2026 Настройка и ремонт техники