Хитрости Element Inspector: 8 трюков, которые нужно знать! 🛠️

Инспектор элементов в вашем браузере может показаться инструментом, предназначенным только для разработчиков, но на самом деле с его помощью можно делать очень интересные вещи, даже если вы ничего не смыслите в программировании! 🚀

1 . Загрузить изображения

Возможно, вам нужно загрузить изображение с веб-сайта. Вы пытаетесь щелкнуть правой кнопкой мыши и нажать «Сохранить изображение», но обнаруживаете, что эта опция неактивна или кнопка «Сохранить изображение» не отображается. В других случаях вы сможете загрузить только миниатюру изображения, а не весь файл. 🤔 Что случилось?

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

Шаг 1

Делает щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить элемент» или «Проверить». Вы также можете использовать специальные сочетания клавиш инспектора в своем браузере. F12 работает в большинстве браузеров и операционных систем. Для этой демонстрации я использую Firefox, но шаги идентичны. 🖱️

Шаг 2

В окне «Инспектор элементов» щелкните вкладку «Сеть». Вкладка «Сеть» должна иметь в качестве одного из подменю «Изображения». Нажмите «Изображения». 🖼️

Теперь перезагрузите страницу, чтобы все ресурсы изображений появились на вкладке «Изображения». Используйте Кнопка «Обновить» рядом с адресной строкой из браузера или нажмите Ctrl+R. 🔄

Шаг 3

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

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

2 . Скачать видео

Как и в случае с изображениями, иногда веб-сайты не позволяют увольнять видео напрямую. Но вы можете загрузить их, загрузив в инспекторе элементов. После загрузки в инспектор просто дважды щелкните по имени файла, чтобы открыть его в новой вкладке. 🎥

Шаг 1

Откройте окно «Инспектор элементов», нажав сочетание клавиш F12 (должно работать в большинстве систем). Либо вы можете щелкнуть правой кнопкой мыши в любом месте веб-страницы и выбрать «Проверить». Должно появиться окно инспектора элементов. 🖱️

Шаг 2

Нажмите вкладку «Сеть», а затем «Медиа», чтобы отфильтровать все, кроме видеофайлов. Перезагрузите страницу. Либо нажав кнопку обновления браузера, либо нажав Ctrl+R. 🔄

Шаг 3

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

3 . Сделать скриншоты всей страницы

Если вы хотите сохранить целую веб-страницу, вы можете быстро загрузить ее в формате PDF или HTML-файла. Но что, если вы хотите сделать обычный снимок экрана всей страницы? Здесь Я объясню, как это сделать.. 📸

В контекстном меню Firefox есть специальный инструмент для создания скриншотов, поэтому я покажу вам, как это сделать. Гугл Хром и другие браузеры. 🌐

Откройте инструмент инспектора, щелкнув правой кнопкой мыши в любом месте страницы или нажав клавишу F12.

Нажмите Ctrl+Shift+P, чтобы открыть окно «Выполнить». Я написал Сделать снимок экрана в полном размере в этом окне. Нажмите на нее. 📄

Сразу же должно появиться окно «Сохранить как», позволяющее сохранить полный снимок экрана страницы в формате JPG. 💾

4 . Представьте, что вы разговариваете по телефону

Большинство веб-сайтов загружаются по-разному в зависимости от типа устройства и размера экрана. Если вы хотите заставить сайт думать, что вы используете другое устройство (по любой причине), вы можете легко сделать это с помощью инструмента «Инспектор». 📱

В Chrome откройте окно «Инспектор элементов» из контекстного меню или с помощью клавиши F12. Затем нажмите на маленький значок ноутбука и телефона в верхнем левом углу. В Firefox есть похожая кнопка, которая называется «Режим адаптивного дизайна» (Ctrl+Shift+M). 🖥️

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

5 . Определить источники

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

Сначала откройте инструмент «Инспектор элементов». Далее нажмите на вкладку «Сеть» (она может быть скрыта в дополнительном меню) и выберите «Источник».

Затем нажмите Ctrl+R. Отображенные шрифты будут загружены в список, вероятно, в формате WOFF. Вы можете загрузить их напрямую, дважды щелкнув по названию шрифта. Например, How-To Geek использует Roboto в качестве шрифта по умолчанию. 🔤

Если вам нужна более подробная информация о шрифте, перейдите на вкладку «Элементы» и выберите «Стили». Прокрутите страницу вниз до свойства семейства шрифтов и щелкните по нему. Соответствующий текст будет размещен на сайте. Таким образом, вы сможете точно определить источник. 🎨

6 . Редактировать текст на странице (временно)

Знаете ли вы, что с помощью инспектора можно временно редактировать практически любой контент на веб-странице? Этот инструмент позволяет редактировать код, из которого состоит веб-сайт, поэтому, если вы немного знаете код, вы можете сделать так, чтобы страница выглядела так, как вам хочется (только на вашем компьютере, пока вы не перезагрузите страницу). 🛠️

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

Выделите текст на странице, который вы хотите отредактировать, и щелкните по нему правой кнопкой мыши. Затем выберите «Проверить» или «Проверить элемент».

Соответствующий фрагмент текста должен появиться на вкладке «Элементы». Просто дважды щелкните и замените текст на любой другой. ✏️

Закройте инспектор элементов, и все готово! Обратите внимание, что если вы перезагрузите страницу, ваши изменения будут отменены. 🔄

7 . Удалить элементы

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

Щелкните правой кнопкой мыши по элементу, который вы хотите удалить, а затем выберите «Проверить» или «Проверить элемент».

Наведите курсор на метки «

», пока весь элемент не будет выделен. Затем просто нажмите клавишу Delete. 🔚

Вот так просто, и всё исчезло! 🕵️‍♂️

8 . Определить цветовые значения

Еще один совет для креативщиков: вы можете получить значения RGB и HEX из любого цвет на веб-странице с помощью инструмента «пипетка», который вы найдете в инспекторе элементов. 🎨

Щелкните правой кнопкой мыши в любом месте страницы и откройте Инспектор. По умолчанию окно «Правила» открывается на вкладке «Инспектор». Прокрутите вниз, чтобы найти свойства, помеченные цветом.

Рядом со свойством цвета должен быть цветной кружок или квадрат. Щелкните по нему, чтобы открыть палитру цветов, и нажмите на значок пипетки рядом с ним. 🖌️

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

---

Эти советы едва царапают поверхность чем это возможно на самом деле с помощью Elements Inspector. Если вы хотите глубже погрузиться в веб-разработку, вот руководство, с которого можно начать. 💻