Многие слышали о замечательных функциях браузера Chrome – о встроенных Инструментах разработчика. И хотя большинство из них необходимы для веб-разработки, бывают случаи, когда эти приложения могут помочь обычным пользователям Интернета.

Как открыть Инструменты разработчика Chrome?  Есть три способа:

• Зайти в «Настройки», выбрать пункт «Дополнительные инструменты», затем перейти на вкладку «Инструменты разработчика».
• С помощью правой кнопки мыши открыть меню, в меню выбрать строку «Просмотреть код».
• Использовать команды «Ctrl–Shift–I» или F12.

Редактирование веб-страницы

Этот трюк позволит временно изменить внешний вид любой web-страницы на локальном компьютере. Чтобы выполнить операцию, нужно одним из перечисленных выше способов открыть страницу с кодом. Затем перейти на вкладку Elements.

Если конкретный элемент, который нужно отредактировать, не виден, можно использовать мышь для прокрутки исходного кода. При этом часть веб-страницы, которой управляет искомый элемент или контейнер, будет выделена синим цветом. Используя правую кнопку мыши и нажав на строку «Edit as HTML», можно внести необходимые изменения в источник. Закончив вносить изменения, следует нажать в любом месте за пределами редактора. После этого web-страница примет новый вид с учетом внесенных поправок. После обновления страницы в Интернете или перезагрузки браузера все созданные эффекты исчезнут.

Показ сохраненных паролей

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

На панели открыть вкладку «Пароли». Здесь можно просмотреть список всех веб-сайтов, имена пользователей, а также пароли, сохраненные браузером Chrome.

Функция управления паролями очень полезна. Например, пользователь забыл пароль, однако хочет войти в свой аккаунт Instagram с другого электронного устройства. Теперь, вместо того, чтобы проходить кропотливый процесс сброса пароля, можно использовать Инструменты разработчика браузера. Для этого следует правой кнопкой мыши нажать на web-форму ввода пароля и выбрать «Просмотреть код».

Откроется окно с кодом веб-страницы, в котором все, что касается данных Password, будет автоматически подсвечено синим.

Для того, чтобы раскрыть сохраненный пароль, придется изменить текст в type =«password». Вместо слова «password» следует ввести слово «text», затем нажать клавишу Enter. После этого поле ввода, которое ранее было заполнено стандартными точками безопасности, покажет полный текст любого пароля, который там был сохранен.

Скриншот страницы

Чтобы получить снимок экрана средствами браузера Chrome, нет необходимости в установке дополнительных расширений. Открыв вкладку Инструментов разработчика (команды Cnrl-Shift-I или F12), можно легко сделать скриншот с помощью панели Chrome Dev.

Для получения доступа к этой панели, нужно на вкладке с кодом web-страницы перейти в режим просмотра адаптивного дизайна, набрав команду Ctrl – Shift – M. В правом углу открывшегося окна Chrome Dev нажать на знак трех вертикальных точек и выбрать пункт меню «Capture screenshot» или же «Capture full size screenshot». После этого скриншот будет сохранен в папке «Загрузки» локального компьютера.

Использование палитры цветов

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

Чтобы открыть палитру цветов, известную как Eye Dropper, нужно:

• Правой кнопкой мыши выбрать элемент сайта, цвет которого надо определить, затем открыть окно Инструментов разработчика (Cnrl-Shift-I или F12).
• На вкладке стилей, расположенной справа, найти стиль CSS со свойством color или background-color, а внутри небольшой квадратик, который показывает предварительный просмотр фактического цвета, примененного к стилю.
• Нажатие на этот маленький квадрат цвета позволит открыть встроенную палитру цветов Chrome.
• При первом открытии палитры инструмент «Пипетка» включается по умолчанию. Чтобы выбрать образец цвета, нужно навести на него курсор и нажать для подтверждения. Палитра цветов немедленно покажет цифровое выражение кода цвета.

Имитация мобильных устройств (режим эмуляции)

Одно из лучших средств эмуляции мобильных устройств можно найти в Инструментах разработчика браузера Chrome. Чтобы перейти к просмотру мобильных версий сайта, следует использовать команды Cnrl-Shift-I или F12. После этого нужно включить эмулятор браузера, щелкнув по значку двух экранов на верхней панели инструментов.

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

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

Заключение

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