Как посмотреть элемент кода страницы: Как открыть исходный код страницы в разных браузерах или с телефона?

Содержание

Как просмотреть HTML и CSS код сайта в браузере Google Chrome

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

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

Пользователям далеким от вебмастерского искусства рекомендую для этих целей использовать браузер. Так как я использую Сhrome, приведу инструкцию со скриншотами именно по этому браузеру. По аналогии можно работать с Opera, Яндекс.Браузер, Mozilla Firefox и другими браузерами, принцип их инструментов схож.

Инструкция 1: как просмотреть весь HTML код сайта в браузере

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

Рисунок 1. Просмотр всего HTML кода веб-страницы в браузере Chrome

Важно: Команды в выпадающем меню могут отличаться, например, для активных элементов (ссылки, картинки, видео) и неактивных (текст, фон, дивы):

Рисунок 2. Выпадающее меню браузера Chrome

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

Вернемся к рисунку 1, на нем показана необходимая команда для просмотра всего HTML кода исходной веб-страницы, она называется «Просмотр кода страницы«. Кликаем по команде, откроется новая вкладка с полным HTML кодом исходной веб-страницы, большой плюс ко всему — просмотр доступен с подсветкой синтаксиса:

Рисунок 3. Фрагмент кода данного сайта

Данный инструмент очень полезен для нахождения и правки искомых элементов.

Альтернативные способы просмотра всего HTML кода веб-страницы

Для более быстрого доступа, можно использовать другие способы вызова данного инструмента

  1. На рисунке 1 мы также видим, что данная команда доступна по сочетанию клавиш <Ctrl>+<U>;
  2. Вставить в адресную строку браузера view-source:samsebewebmaster.ru вместо моего домена вставляем свой адрес;

Оба способа универсальны и должны работать во всех браузерах.

Поиск по HTML коду сайта

Кому-то поначалу покажется, что это совсем не нужный инструмент, но просмотр всего HTML кода сайта отлично подходит для поиска в коде необходимых элементов, это могут быть ссылки, теги, мета-теги, атрибуты и другие элементы.

Сочетанием горячих клавиш <Ctrl>+<F> открываем окно поиска, в браузере Chrome оно появляется верху справа:

Рисунок 3. Поиск по коду сайту

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

Рисунок 4. Поиск по HTML коду сайта

Инструкция 2: как просмотреть и отредактировать HTML и CSS код сайта в браузере Google Chrome

Теперь самая важная часть, в которой я покажу, как можно редактировать HTML и CSS код сайта в браузере. после чего переносить изменения в браузер.

  1. Правой кнопкой мыши вызываем контекстное меню браузера Chrome:

    Рисунок 5. Команда — Просмотреть код

  2. В нижней части экрана появится окно динамического просмотра кода:

    Рисунок 6. Окно просмотра HTML и CSS кода сайта

    На рисунке 6 мы видим, что окно просмотра разделено на 2 части:

    • в левой части отображается HTML код сайта;
    • в правой — CSS код выделенного тега, в нашем случае тега h3 с классом .entry-title.
  3. Кликаем по выделенному тегу правой кнопкой мыши, появится вот такое меню:Зеленными стрелочками я выделил основные команды:
    • Edit as HTML — редактировать весь выделенный контейнер, для копирования или редактирования. Давайте вернемся к рисунку 6, обратите внимание, что все теги сгруппированы в контейнеры, которые можно сворачивать и разворачивать  нажимая на стрелочки (►▼) слева от контейнера;
    • Copy — скопировать выделенный тег;
    • :hower и другие позволяют просмотреть стили ссылок.

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

[Всего голосов: 3    Средний: 5/5]

Как найти элемент в коде

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

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

Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.

Перед Вами откроется код файла style.css. Покрутите его вниз, и первое, что придёт Вам в голову будет: ё-моё, как же в этой массе английских слов, цифр и символов, найти то, что нам будет нужно.

Для полноты ощущения, можно открыть один из php файлов, которые расположены в колонке справа от поля редактора.

Только сразу отгоните мысль типа: «Я в этом до самой смерти не разберусь». Разберётесь, и я Вам в этом помогу.

Рассмотрим два варианта, в зависимости от начальных условий, нахождения нужного элемента в коде.

Вариант 1.

Условие: мы точно знаем то, что нам нужно найти.

Для примера возьмём код страницы.

Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.

Этот поиск работает абсолютно для любого кода, открытого в браузере, то есть на странице.

Вариант 2.

Условие: мы видим элемент на странице, но не знаем ни его html, ни css.

В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.

Инструмент разработчика есть во всех браузерах и открыть его можно или клавишей F12, или правой клавишей мыши, выбрав «Просмотреть код» или «Исследовать элемент». В разных браузерах по разному.

Главное не выбирайте «Просмотреть код страницы». Похоже, но не то.

После этого появится web-инспектор. Его интерфейс в разных браузерах немного отличается, но принцип действия везде одинаковый.

Я покажу на примере web-инспектора Chrome.

Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.

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

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

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

Надо просто вести по строкам курсором, и как только курсор оказывается на строке с кодом, так тут-же элемент, которому соответствует этот код, подсвечивается.

Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.

Теперь, зная class или id элемента, можно спокойно идти в файл style.css, найти в нём нужный селектор, с помощью Поиска (Ctrl+F), и править внешний вид элемента.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?

Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

В раздел > > > Исправляем шаблон WordPress. Веб-инспектор

 

Запись опубликована в рубрике CMS WordPress Система управления сайтом для создания блога. Добавьте в закладки постоянную ссылку.

Как использовать Inspect Element в Chrome, Safari и Firefox

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

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

В этом посте мы обсудим, что значит «проверить» элементы страницы и как это сделать в трех распространенных веб-браузерах. Если вы находитесь в затруднительном положении, перейдите к тому, что вы ищете.

  • Как проверять элементы в Chrome
  • Как проверять элементы в Safari
  • Как проверять элементы в Firefox

Что означает «проверить элемент»?

Элемент Inspect — это функция современных веб-браузеров, которая позволяет любому пользователю просматривать и редактировать исходный код веб-сайта, включая HTML, CSS, JavaScript и медиафайлы. Когда исходный код изменяется с помощью инструмента проверки, изменения отображаются в реальном времени в окне браузера.

Inspect — секретное оружие веб-профессионала. Разработчики, дизайнеры и маркетологи часто используют его, чтобы заглянуть внутрь любого веб-сайта (включая свой собственный), чтобы просмотреть изменения содержимого и стиля, исправить ошибки или узнать, как устроен конкретный веб-сайт. Например, если вы найдете интригующий интерфейс на конкурирующем веб-сайте, элемент проверки позволит вам увидеть HTML и CSS, из которых он состоит.

Вы также можете рассматривать функцию проверки вашего браузера как своего рода «песочницу»: играйте с веб-страницей столько, сколько хотите, меняя содержимое, цвета, шрифты, макеты и т. д. Когда закончите, просто обновите страницу до вернуть все в норму. Inspect не меняет сам веб-сайт — только то, как он отображается в вашем браузере — так что не стесняйтесь экспериментировать!

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

Inspect может быть «инструментом разработчика», но для его использования вам не нужно писать какой-либо код или устанавливать какое-либо дополнительное программное обеспечение. Вы можете делать все, что я описал, прямо в браузере — давайте узнаем, как это сделать.

Как проверять элементы

Для проверки элементов необходимо щелкнуть правой кнопкой мыши любую часть веб-страницы и выбрать «Проверить» > «Проверить элемент». Кроме того, вы можете нажать Command + Option + i на вашем Mac или F12 на вашем ПК, чтобы сделать то же самое.

Каждый современный веб-браузер имеет собственный инструмент для проверки элементов. Доступ к нему можно получить в любом браузере, но некоторые браузеры, такие как Chrome и Safari, имеют небольшие отличия. Давайте обсудим, как использовать инструмент проверки в трех настольных веб-браузерах: Google Chrome, Apple Safari и Mozilla Firefox.

Как проверять элементы в Chrome

Чтобы использовать инспектор в Google Chrome, сначала перейдите на любую веб-страницу (в этих примерах я буду использовать HubSpot.com). Оказавшись там, у вас есть несколько способов открыть инструмент:

  • Щелкните правой кнопкой мыши любую часть страницы и выберите Inspect . Щелчок правой кнопкой мыши по определенному элементу страницы откроет этот элемент в режиме инспектора.
  • В верхней строке меню выберите Вид > Разработчик > Инструменты разработчика .
  • Откройте Настройте и управляйте Google Chrome , щелкнув значок с тремя точками в правом верхнем углу окна браузера. Оттуда выберите Дополнительные инструменты > Инструменты разработчика .
  • Используйте сочетание клавиш control-shift-C в Windows или command-option-C в macOS.

Панель инструментов разработчика Chrome откроется в нижней части окна браузера. Если вы хотите изменить расположение панели, щелкните значок с тремя точками в правом верхнем углу панели (рядом с 9значок 0007 X ), затем выберите предпочтительное положение док-станции. Я выберу Dock справа от — это упростит просмотр отображаемой страницы и ее источника:

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

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

Можно сделать и наоборот — найти фрагмент кода из элемента страницы. Для этого щелкните значок Element select в верхнем левом углу панели:

Затем щелкните элемент страницы. Вы увидите исходный код, показанный на панели проверки.

Помимо просмотра, мы можем использовать проверку для изменения содержимого страницы. Давайте начнем с замены некоторого текста. Во-первых, найдите текстовое содержимое в исходном коде. Затем щелкните элемент правой кнопкой мыши и выберите Edit Text 9. 0008 — это открывает встроенный текстовый ввод, в котором вы можете написать все, что хотите. Когда вы отмените выбор ввода текста, вы увидите, что изменения вступят в силу:

Или как насчет отсутствия текста? Просто выберите элемент в исходном коде и удалите его. h2 исчезнет со страницы.

Не беспокойтесь — он снова появится, когда вы обновите страницу. Вы также можете скрыть любой элемент, не удаляя его, щелкнув элемент правой кнопкой мыши в исходном коде и выбрав Скрыть элемент .

Вы даже можете добавить новые элементы страницы — щелкните правой кнопкой мыши элемент в исходном коде и выберите Редактировать как HTML . Вы увидите текстовое поле, куда вы можете вставить HTML. Например:

Перемещаясь вниз по панели просмотра Chrome, мы видим вкладку Стили . Это показывает нам, какие стили CSS были применены к выбранному элементу. Нажмите на строки кода, чтобы переписать их, или активируйте/деактивируйте определенные объявления, установив/сняв флажки рядом с ними. Давайте сделаем это для нашего

element’s font-weight property:

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

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

Как проверять элементы в Safari

Чтобы использовать инструмент проверки Safari, Web Inspector, нам сначала нужно включить инструменты разработчика Safari. Выберите Safari > Настройки . В окне настроек под Advanced установите флажок рядом с Show Develop menu in menu bar . Вы увидите опцию Develop , добавленную в меню выше.

Далее перейдите на нужную веб-страницу. Есть три способа открыть Web Inspector:

  • Щелкните правой кнопкой мыши любую часть страницы и выберите Проверить элемент . Щелчок правой кнопкой мыши по определенному элементу страницы откроет этот элемент в режиме инспектора.
  • Выберите «Разработка» > «Показать веб-инспектор » в верхней строке меню.
  • Используйте ярлык command-option-I .

По умолчанию инспектор Safari открывается в нижней части окна. Чтобы изменить эту конфигурацию, щелкните значок, чтобы закрепить дисплей с правой стороны или открыть его в отдельном окне — оба расположены рядом с 9Значок 0007 X в верхнем левом углу дисплея.

Панель инспектора Safari состоит из двух столбцов. Первый показывает исходный HTML, а второй показывает CSS страницы. Используйте курсор, чтобы изучить исходный HTML-код и посмотреть, какие строки кода соответствуют каждой области страницы (синим цветом выделено содержимое, зеленым — отступы, а оранжевым — поля):

Мы также можем проверить страницу напрямую. Щелкните значок выбора элемента в верхней части панели:

Теперь при щелчке элемента страницы Web Inspector показывает соответствующий исходный код.

Как и инспектор Chrome, Safari позволяет изменять, добавлять и удалять элементы страницы. Чтобы отредактировать страницу, щелкните правой кнопкой мыши элемент HTML на панели проверки, затем выберите параметр в меню Edit . Web Inspector предложит вам ввести новый текст, а затем отобразит ваши изменения в режиме реального времени:

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

к существующему

:

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

Справа у нас есть столбец Стили , где мы можем изменить или активировать/деактивировать объявления CSS для любого элемента, например:

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

Чтобы использовать его, выберите Develop > Enter Responsive Design Mode . В этом режиме вы можете использовать те же инструменты инспектора на страницах, отформатированных для устройств Apple, или установить размеры самостоятельно:

Как проверять элементы в Firefox

Чтобы открыть инспектор Firefox, вы можете:

  • Щелкните правой кнопкой мыши любую часть страницы и выберите Проверить элемент . Щелчок правой кнопкой мыши по определенному элементу страницы откроет этот элемент в режиме инспектора.
  • Выберите Инструменты > Веб-разработчик > Инспектор в верхней строке меню.
  • Используйте сочетание клавиш control-shift-C в Windows или command-option-C в macOS.

Инспектор Firefox по умолчанию появляется в нижней части окна. Чтобы изменить его положение, выберите значок с тремя точками в правом верхнем углу инспектора, затем выберите альтернативный вариант отображения.

Панель инспектора Firefox сравнима по функциям с Chrome и Safari. Исходный код HTML указывает соответствующий элемент страницы с цветовыми кодами — содержимое синее, отступы фиолетовые, поля желтые:

Кроме того, вы можете найти код, выбрав элементы на странице — чтобы войти в режим выбора, щелкните значок курсора в верхнем левом углу:

Щелкните любой элемент страницы, чтобы открыть его источник на панели проверки.

Чтобы изменить или удалить элемент страницы, выберите его код в инспекторе. Затем либо дважды щелкните, чтобы изменить текст, либо щелкните правой кнопкой мыши и выберите Редактировать как HTML или Создать новый узел для добавления кода. Или просто удалите код и посмотрите на результат изменений на странице.

Чтобы изменить стиль элемента, используйте область Стили фильтров в нижней части панели проверки. Снимите флажок рядом с объявлением CSS, чтобы деактивировать его (или введите новый код самостоятельно):

Наконец, инструменты Firefox также поставляются с возможностью предварительного просмотра на мобильных устройствах. Чтобы использовать его, щелкните значок Responsive Design Mode 9.Значок 0008 в правом верхнем углу панели:

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

Подробный обзор с Inspect

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

Примечание редактора. Эта статья была первоначально опубликована в декабре 2020 г. и обновлена ​​для полноты картины.

 

Как временно отредактировать любую веб-страницу

В вашем браузере скрыт мощный инструмент: Проверка элемента .

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

Или вы можете использовать его, чтобы изменить что угодно на странице.

Inspect Element — это идеальный способ узнать, что заставляет Интернет работать, выяснить, что не работает на ваших сайтах, смоделировать, как будет выглядеть изменение цвета и шрифта, и избавить себя от необходимости выводить в Photoshop личные данные на скриншотах. Это сверхспособность, о которой вы никогда не подозревали в своем браузере.

Давайте узнаем, как использовать Google Chrome Inspect Element для помощи в работе, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода. Если вы читаете это на своем телефоне, пришло время переключиться на ноутбук, открыть Google Chrome и подготовиться к настройке кода.

Большинство веб-браузеров, в том числе Mozilla Firefox и Safari от Apple, включают инструмент Inspect Element, в то время как Microsoft Internet Explorer и браузер Edge включают аналогичный набор инструментов разработчика. В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают одинаково в других браузерах.

Подождите, почему я должен использовать Inspect Element?

Google Chrome Inspect Element позволяет вам просматривать веб-сайт

Если вы никогда не заглядывали в код веб-сайта из любопытства, вы можете удивиться, зачем вам учиться использовать Inspect Element.

  • Дизайнер : Хотите просмотреть, как дизайн сайта будет выглядеть на мобильных устройствах? Или хотите посмотреть, как другой оттенок зеленого будет выглядеть на кнопке регистрации? Вы можете сделать и то, и другое за считанные секунды с помощью Inspect Element.

  • Маркетолог : Хотите узнать, какие ключевые слова используют конкуренты в заголовках своих сайтов, или хотите проверить, не слишком ли медленно загружается ваш сайт для теста Google PageSpeed? Inspect Element может показать оба.

  • Writer : Устали размывать свое имя и адрес электронной почты на скриншотах? С Inspect Element вы можете изменить любой текст на веб-странице за секунду.

  • Агент поддержки : Нужен лучший способ сообщить разработчикам, что нужно исправить на сайте? Inspect Element позволяет вам быстро изменить пример, чтобы показать, о чем вы говорите.

Для этих и десятков других вариантов использования Inspect Element — удобный инструмент, который всегда под рукой. Это часть инструментов разработчика в вашем браузере, которая включает в себя ряд дополнительных функций: консоль для запуска кода, страницу View Source , чтобы увидеть только необработанный код сайта, страницу Sources со списком всех загруженных файлов. на веб-сайте и многое другое. Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основные 9Вкладка 0257 Elements для самостоятельной настройки веб-страницы.

Как начать работу с Inspect Element

Существует несколько способов доступа к Google Chrome Inspect Element. Просто откройте веб-сайт, который вы хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier. com), затем откройте инструменты проверки элементов одним из следующих трех способов:

  • Щелкните правой кнопкой мыши в любом месте веб-страницы и В самом низу всплывающего меню вы увидите « Inspect ». Щелкните это.

  • Нажмите меню-гамбургер (значок с тремя сложенными точками) в правой части панели инструментов Google Chrome, нажмите Дополнительные инструменты , затем выберите Инструменты разработчика . В качестве альтернативы в меню файла выберите «Вид» —> «Разработчик» —> «Инструменты разработчика».

  • Предпочитаете сочетания клавиш? Нажмите CMD + Option + I на Mac или F12 на ПК, чтобы открыть Inspect Elements, ничего не нажимая.

По умолчанию инструменты разработчика открываются на панели в самом низу браузера и показывают вкладку Elements — это знаменитый инструмент Inspect Element, который мы искали.

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

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


Теперь, когда мы находимся в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».

Поиск

Вкладка «Поиск» позволяет вам искать на веб-странице определенный контент или элемент HTML. Это немного скрыто: вам нужно нажать на 3 точки, а затем нажать Search All Files , чтобы открыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.

Elements

«Проверить элемент» — это инструмент, который мы больше всего изучим в этом руководстве, и он открывается первым при запуске инструментов разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в инструментах разработчика, чтобы вернуться к ней, если вы изучали ее в другом месте.

На вкладке «Обзор» вы можете увидеть все HTML, JavaScript и CSS, которые создали веб-сайт. Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним существенным отличием: вы можете изменить любой код и увидеть изменения в режиме реального времени на открытом вами сайте. Вы можете изменить что угодно, от копии до шрифта, затем сделать снимок экрана с новым дизайном или сохранить изменения (просто перейдите в View > Developer > View Source и сохраните страницу как HTML-файл или скопируйте изменения кода в текстовый редактор). ). Однако, как только вы перезагрузите страницу, все ваши изменения исчезнут навсегда.

Эмуляция

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

Это также немного скрыто: вам нужно открыть Inspect Element и нажать кнопку с изображением телефона, чтобы запустить его. Тогда у вас будет идеальный инструмент для понимания того, как другие пользователи взаимодействуют с веб-страницей.


Пора приступать к работе. Сначала мы воспользуемся поиском, чтобы найти что-то на веб-странице, затем воспользуемся Elements, чтобы отредактировать текст и многое другое на сайте, и, наконец, воспользуемся эмуляцией, чтобы посмотреть, как наш сайт будет выглядеть на телефоне из определенного места.

Найдите что-нибудь на сайте с помощью Inspect Element Search

Хотите знать, что входит в ваши любимые сайты? Поиск — ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта. Вы можете просто открыть представление Elements по умолчанию, нажать CTRL + F или CMD + F и выполните поиск по исходному коду, но инструмент полного поиска позволит вам выполнять поиск по каждому файлу на странице, помогая вам найти текст внутри файлов CSS и JavaScript или найти изображение значка нужное для статьи.

Чтобы приступить к работе, откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающей буквой «X») и выберите «Искать во всех файлах». Вкладка «Поиск» появится в нижней половине панели «Инструменты разработчика».

Помните, как открыть Inspect Element? Просто щелкните правой кнопкой мыши и выберите Inspect Inspect Element или нажмите Command+Option+i на Mac или F12 на ПК.

В поле поиска вы можете ввести что угодно — ЧТО-НИБУДЬ — что вы хотите найти на этой веб-странице, и оно появится на этой панели. Давайте посмотрим, как мы можем это использовать.

Введите метаимя в поле поиска, нажмите клавишу Введите , и вы сразу же увидите каждое вхождение «метаимя» в коде на этой странице. Теперь вы можете увидеть метаданные этой страницы, ключевые слова SEO, на которые она нацелена, и узнать, настроена ли она для того, чтобы позволить Google индексировать ее для поиска. Это простой способ узнать, на что нацелены ваши конкуренты, и убедиться, что вы ничего не напутали на своем сайте.

Попробуем другой запрос. Удалите метаимя , вместо этого введите h3 в поле поиска и нажмите «Ввод». Вы увидите каждое вхождение «h3» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h3» на этой странице.

Поиск также является эффективным инструментом для дизайнеров, поскольку вы также можете искать по цвету. Введите #ff4a00 в поле поиска и нажмите «Ввод» (и обязательно установите флажок «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет #ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: #ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее по своему усмотрению (это мы рассмотрим в следующем разделе).

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

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

Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.

Измените что-либо с помощью Elements

Разработчики внешнего интерфейса каждый день используют инструмент Inspect Element, чтобы изменить внешний вид веб-страницы и поэкспериментировать с новыми идеями — и вы тоже можете. Inspect Elements позволяет настроить внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.

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

Посмотрим, что с этим можно сделать.

Перейдите на вкладку «Элементы» на панели «Инструменты разработчика» и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть окно поиска, открытое ранее. Вы должны увидеть HTML-код этой страницы — теперь вы знаете, как делают колбасу.

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

Изменить текст на веб-странице

Вы когда-нибудь хотели изменить текст на сайте — например, чтобы посмотреть, как новый слоган будет выглядеть на вашей главной странице, или чтобы убрать адрес электронной почты со снимка экрана Gmail? Теперь вы можете.

Щелкните значок «мышь поверх квадрата», затем щелкните любой текст на странице — например, слоган на главной странице Zapier. На панели «Инструменты разработчика» вы увидите строку текста с синим выделением, которая выглядит примерно так:

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

Введите что угодно в это текстовое поле («Аури — гений» должно подойти) и нажмите Enter. Вуаля! Вы только что изменили текст на веб-странице.

Обновите страницу, и все вернется на круги своя.

Весело? Давайте изменим еще кое-что на этой странице.

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

Круто. Теперь мы снова откроем его — прямо в тексте, который хотим отредактировать. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши часть страницы, которую вы хотите изменить, а затем нажать кнопку 9.Ссылка 0257 Inspect или Inspect Element , которая появляется в нижней части контекстного меню.

Когда откроется панель инструментов разработчика, она должна автоматически выделить это предложение. Довольно аккуратно, да? Это мелочи, которые имеют значение.

Теперь, когда мы выбрали слоган на сайте Zapier, давайте изменим его внешний вид.

Изменение цвета и шрифта элементов

Справа от этого предложения на панели инструментов разработчика вы увидите подпанель с 3 дополнительными вкладками: Стили, Вычисляемые и Прослушиватели событий. Каждое позволяет вам изменить то, как это предложение выглядит на странице. Начнем со вкладки «Стили».

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

Попробуем что-нибудь изменить. Нажмите значок стрелки в верхней части Inspect Element еще раз и выберите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите «выравнивание текста» на вкладке «Стили» (возможно, вам придется немного прокрутить, чтобы найти это).

Прямо сейчас он установлен на «центр», но дважды щелкните «центр» и введите слева . Это выравнивает текст по левому краю страницы.

Теперь поиграем с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке Styles найдите эту строку:

И дважды щелкните «#ff4a00». Введите #4199ad (не забудьте #) и нажмите «Ввод».

Мы только что изменили цвет нашей кнопки с оранжевого на синий! Теперь давайте попробуем что-нибудь действительно крутое.

Изменить состояния элемента

Хотите посмотреть, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет? Chrome Inspect Element также может показать это с помощью инструментов Force Element State. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наведет на него курсор (состояние наведения), выберет элемент (состояние фокуса) и/или щелкнет ссылку (состояние посещения).

Давайте попробуем. Убедитесь, что вы нажали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите :active: в этом меню.

Это изменит цвет кнопки на серый, который отображается на сайте Zapier, когда вы нажимаете кнопку.

Теперь измените значение background-color на #FF4A00 , и вы сразу же увидите изменение цвета кнопки.

Попробуйте поэкспериментировать — измените цвет :hover: , затем снимите флажок :hover: в контекстном меню и перетащите указатель мыши на кнопку, чтобы увидеть новый цвет кнопки.

Изменение изображений

Вы также можете легко изменить изображения на веб-странице с помощью Inspect Element. Давайте заменим фон с изображением супергероя на сайте Zapier этой впечатляющей фотографией солнечной вспышки, сделанной НАСА.

Сначала скопируйте и вставьте эту ссылку на изображение:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали строку signup-hero в коде. Дважды щелкните фоновую ссылку URL на панели «Стили» и вставьте ссылку, скопированную выше.

Нажмите «ввод» и сразу увидите разницу.

Примечание: Вы также можете изменить фотографию на GIF или видео — все, что вам нужно, это ссылка на файл, и вы можете добавить его.


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

Вот тут-то и приходит на помощь эмуляция — здесь все, что мы рассмотрели до сих пор, можно применить еще дальше. Посмотрим, как.

Протестируйте сайт на любом устройстве с помощью эмуляции

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

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

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

Измените размер маленького браузера, чтобы увидеть, как все выглядит, если вы просматривали на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размер устройства по умолчанию, например 9.0331 iPad Pro или iPhone 8 Plus — выберите последнее.

Экран веб-страницы должен уменьшиться до размера iPhone 8 Plus, и вы можете немного увеличить масштаб, щелкнув значок + рядом с числом в правом верхнем углу сетки — так сайт будет выглядеть, если кто-то увеличит масштаб на мобильном.

Увеличьте изображение, перетащив правый край эмуляции веб-страницы вправо. Видишь, что происходит? Мы больше не находимся в представлении iPhone 8 Plus. Перетаскивание экрана по сетке позволяет увидеть, как будет меняться веб-страница при изменении размера экрана, но ваш вид больше не будет отражать модель устройства, которую вы выбрали ранее.

Вернемся к представлению iPhone 8 Plus, снова выбрав его в раскрывающемся списке моделей. Рядом с выпадающим списком есть слово «Портрет». Как вы уже догадались, это позволяет переключаться между пейзажным и горизонтальным видом.

Теперь мы можем увидеть, как выглядел бы этот пост, если бы вы читали его на iPhone 8 Plus. Не стесняйтесь поиграть с другими устройствами, чтобы увидеть, как меняется эта веб-страница и разрешение экрана. Все другие инструменты разработчика, которые мы рассмотрели до сих пор, также будут реагировать на вид устройства. Например, снова выберите текст слогана Zapier.

В представлении iPhone 8 Plus мы видим, что этот текст имеет размер 2em, а в представлении по умолчанию на компьютере — 3em.

«em» — это единица измерения размера шрифта, позволяющая автоматически изменять размер текста относительно окружающего текста. Например, предположим, что у нас есть пользователь с большими пользовательскими настройками шрифта в своем браузере. Если вы установите размер шрифта абзаца на 14 пикселей, ваш шрифт всегда будет 14 пикселей для этого пользователя, несмотря ни на что. Однако, если вы установите размер шрифта абзаца равным 1em, браузер вашего пользователя будет использовать эту единицу для масштабирования вашего текста в соответствии с большими настройками вашего пользователя. Телефоны и планшеты делают это, чтобы красиво масштабировать текст.

Теперь давайте переключимся на представление Apple iPad и выберем заголовок «тестирование на разных устройствах» выше. На этот раз размер шрифта равен 3em. Размер шрифта изменился в зависимости от вида устройства, вернувшись к размеру по умолчанию, который он использовал бы на компьютере, благодаря большему экрану планшета.


Эмуляция датчиков мобильных устройств

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

Вы даже можете заставить свой браузер работать как телефон. Нажмите клавишу «Esc», чтобы снова открыть панель поиска в Inspect Element, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров. Выберите Датчики , чтобы получить три новых инструмента: Геолокация, Ориентация и Касание.

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

Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.

Установите флажок «Эмулировать координаты геолокации» и введите значение 37 в текстовое поле Широта = и 122 в текстовое поле Долгота = . Нажмите Enter на клавиатуре.

Ничего не меняется, верно?

Это потому, что на этой странице нет контента, который меняется в зависимости от вашего местоположения. Если поменять координаты на сайте типа Groupon.com , который использует ваше местоположение для отображения локализованного контента, однако вы получите другие результаты. Зайдите на Google.com в другом месте, и вы, возможно, увидите новый логотип Google для праздника в другой стране или, по крайней мере, получите результаты на другом языке.

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

Эмуляция мобильных сетей

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

Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска Inspect Element и выберите «Условия сети». Там вы можете выбрать быстрый или медленный 3G или офлайн, чтобы увидеть, как страница работает без интернета. Или нажмите Добавить… , чтобы включить собственное тестирование (возможно, добавьте 56 Кбит/с для тестирования удаленного доступа в Интернет). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении, и как сайт выглядит во время загрузки. Это покажет, почему вы должны улучшить свой сайт, чтобы он загружался быстрее при медленном соединении.

Вы также можете изменить свой пользовательский агент — снимите флажок «Выбирать автоматически» рядом с «Пользовательский агент» и выберите «Internet Explorer 7», возможно, чтобы увидеть, меняет ли сайт свой рендеринг для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.


Испытания

Давайте закончим несколькими испытаниями. Иди, покажи нам, чему ты научился!

  1. Измените заголовки на CNN.com и отправьте нам в Твиттере снимок экрана с заголовком вашей популярной статьи.

  2. Дублируйте свой любимый веб-сайт, используя «Просмотр исходного кода», и поэкспериментируйте с HTML, чтобы сделать его своим.

  3. Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно сделать лучше, исправив его самостоятельно!

Маркетинговая команда Zapier использует Inspect Element для извлечения личной информации из скриншотов в наших обзорах приложений, в то время как наша команда дизайнеров использует его для моделирования изменений и просмотра того, как все будет выглядеть на разных экранах.

This entry was posted in Популярное