Проверить элемент: как временно редактировать любую веб-страницу
Опубликовано: 2021-09-14В вашем браузере скрывается мощный инструмент: Inspect Element .
Щелкните правой кнопкой мыши любую веб-страницу, выберите « Проверить» , и вы увидите внутреннюю часть этого сайта: его исходный код, изображения и CSS, которые формируют его дизайн, шрифты и значки, которые он использует, код Javascript, который поддерживает анимацию, и многое другое. . Вы можете увидеть, сколько времени требуется для загрузки сайта, какую пропускную способность он использовал для загрузки, а также точный цвет в его тексте.
Или вы можете использовать его, чтобы изменить что угодно на странице.
Inspect Element - идеальный способ узнать, что движет Интернетом, выяснить, что не работает на ваших сайтах, смоделировать, как будет выглядеть изменение цвета и шрифта, и избавиться от необходимости передавать в Photoshop личные данные на снимках экрана. Это суперсила, о которой вы даже не подозревали.
Давайте узнаем, как использовать Google Chrome Inspect Element, чтобы помочь вам в работе, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода. Если вы читаете это на своем телефоне, пора переключиться на ноутбук, открыть Google Chrome и приготовиться настроить код.
Большинство веб-браузеров, включая Mozilla Firefox и Apple Safari, включают инструмент Inspect Element, тогда как Microsoft Internet Explorer и браузер Edge включают аналогичный набор инструментов разработчика. В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают так же в других браузерах.
Подождите, почему я должен использовать элемент Inspect?
Если вы никогда не заглядывали в код веб-сайта из любопытства, вы можете задаться вопросом, почему вам следует научиться использовать Inspect Element.
Дизайнер : Хотите узнать, как дизайн сайта будет выглядеть на мобильных устройствах? Или хотите посмотреть, как другой оттенок зеленого будет выглядеть на кнопке регистрации? С Inspect Element вы можете сделать и то, и другое за считанные секунды.
Маркетолог : интересно, какие ключевые слова используют конкуренты в заголовках своих сайтов, или вы хотите узнать, слишком ли медленно загружается ваш сайт для теста Google PageSpeed? Inspect Element может показать и то, и другое.
Writer : Устали размывать свое имя и адрес электронной почты на скриншотах? С помощью Inspect Element вы можете изменить любой текст на веб-странице за секунду.
Агент службы поддержки : Нужен лучший способ сообщить разработчикам, что нужно исправить на сайте? Inspect Element позволяет вам быстро изменить пример, чтобы показать, о чем вы говорите.
Inspect Element - удобный инструмент для этих и десятков других случаев использования. Это часть Developer Tools в вашем браузере, который включает в себя ряд дополнительных функций: консоль для кода запуска, страница View Source видеть только необработанный код за сайт, страницу Sources со списком каждого файла , загруженного в веб-сайт и многое другое. Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основную вкладку « Элементы » для самостоятельной настройки веб-страницы.
Как начать работу с Inspect Element
Есть несколько способов получить доступ к Google Chrome Inspect Element. Просто откройте веб-сайт, который хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier.com), затем откройте инструменты Inspect Element одним из следующих трех способов:
Щелкните правой кнопкой мыши в любом месте веб-страницы, и в самом низу всплывающего меню вы увидите « Проверить ». Щелкните это.
Щелкните гамбургер-меню (значок с 3 точками) в правом углу панели инструментов Google Chrome, щелкните « Дополнительные инструменты» , затем выберите « Инструменты разработчика» . Либо в меню «Файл» выберите «Вид» -> «Разработчик» -> «Инструменты разработчика».
Предпочитаете сочетания клавиш? Нажмите
CMD
+Option
+I
на Mac илиF12
на ПК, чтобы открыть «Проверить элементы», ничего не нажимая.
По умолчанию инструменты разработчика открываются на панели в самом низу вашего браузера и показывают вкладку « Элементы » - это знаменитый инструмент проверки элементов, который мы искали.
У вас не будет много места для работы с элементом Inspect Element в нижней части экрана, поэтому щелкните три вертикальные точки в верхней правой части панели элемента Inspect рядом с значком «X» (который вы бы щелкнули, чтобы закрыть панель). Теперь вы увидите возможность переместить панель в правую часть браузера (вид справа) или открыть панель в совершенно отдельном окне (вид отстыковки).
В этом руководстве давайте закрепим панель в правой части окна браузера, чтобы у нас было больше места для работы. Вы можете сделать панель инструментов разработчика шире или уже, наведя курсор мыши на левую границу. Однажды появляется курсор, перетащите панель влево, чтобы расширить ее, или вправо, чтобы сузить ее.
Теперь, когда мы находимся в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».
Поиск
Вкладка «Поиск» позволяет искать на веб-странице определенное содержимое или элемент HTML. Он немного скрыт: вам нужно щелкнуть 3 точки, а затем щелкнуть Поиск во всех файлах, чтобы раскрыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.
Элементы
«Проверить элемент» - это инструмент, который мы больше всего будем изучать в этом руководстве, и он открывается первым, когда вы запускаете Инструменты разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в Инструментах разработчика, чтобы вернуться к ней, если вы изучали где-то еще.
На вкладке «Обзор» вы можете увидеть все элементы HTML, JavaScript и CSS, с помощью которых был создан веб-сайт. Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним важным отличием: вы можете изменить любой код и видеть изменения в реальном времени на открытом сайте. Вы можете изменить что угодно, от копии до гарнитуры, затем сделать снимок экрана нового дизайна или сохранить изменения (просто перейдите в меню «Просмотр»> «Разработчик»> «Просмотр исходного кода» и сохраните страницу как файл HTML или скопируйте изменения кода в текстовый редактор). Однако после повторной загрузки страницы все ваши изменения исчезнут навсегда.
Эмуляция
Вы когда-нибудь хотели предварительно просмотреть веб-страницу на телефоне, не вынимая телефон из кармана? Вкладка «Эмуляция» позволяет просматривать веб-страницу так, как она будет выглядеть на любом устройстве, с предустановками для популярных устройств или возможностью установить разрешение экрана и соотношение сторон. Вы даже можете установить эмулируемую скорость интернета, чтобы увидеть, как быстро сайт будет загружаться через коммутируемое соединение.
Он также немного скрыт: вам нужно открыть Inspect Element и нажать кнопку со значком телефона, чтобы запустить его. Тогда у вас будет идеальный инструмент, чтобы понять, как другие воспринимают веб-страницу.
Пора браться за работу. Сначала мы воспользуемся поиском для поиска объектов на веб-странице, затем будем использовать элементы для редактирования текста и прочего на сайте и, наконец, воспользуемся эмуляцией, чтобы посмотреть, как наш сайт будет выглядеть на телефоне из определенного места.
Найдите что-нибудь на сайте с помощью поиска по элементам
Хотите знать, что входит в ваши любимые сайты? Поиск - ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта. Вы можете просто открыть представление Elements по умолчанию, нажать CTRL
+ F
или CMD
+ F
и выполнить поиск по исходному коду, но полный инструмент поиска позволит вам искать по каждому файлу на странице, помогая вам находить текст внутри файлов CSS и JavaScript или найдите изображение значка, которое вам нужно для статьи.
Для начала откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающим "X") и выберите " Искать во всех файлах ". Вкладка «Поиск» появится в нижней половине панели «Инструменты разработчика».
Помните, как открыть Inspect Element? Просто щелкните правой кнопкой мыши и выберите Inspect Inspect Element или нажмите Command + Option + i на вашем Mac или F12 на вашем ПК.
В поле поиска вы можете ввести что угодно - ВСЕ , что хотите найти на этой веб-странице, и это отобразится на этой панели. Посмотрим, как это можно использовать.
Введите meta name
в поле поиска, нажмите клавишу Enter , и вы сразу увидите каждое вхождение «мета-имени» в коде на этой странице. Теперь вы можете увидеть метаданные этой страницы, ключевые слова SEO, на которые она ориентирована, а также то, настроена ли она, чтобы позволить Google индексировать ее для поиска. Это простой способ увидеть, на что нацелены ваши конкуренты, и убедиться, что вы ничего не испортили на своем сайте.
Попробуем другой запрос. Удалите meta name
, вместо этого введите h2
в поле поиска и нажмите «ввод». Вы увидите каждое появление «h2» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h2» на этой странице.
Поиск также является эффективным инструментом для дизайнеров, так как вы также можете искать по цвету. Введите #ff4a00
в поле поиска и нажмите «ввод» (и обязательно установите флажок рядом с «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет # ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: # ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее самостоятельно (мы рассмотрим это в следующем разделе).
Это удобный способ для дизайнеров убедиться, что сайт соответствует руководству по стилю их бренда. С помощью инструмента «Поиск» дизайнеры могут легко проверить CSS веб-страницы, чтобы узнать, применен ли цвет к неправильному элементу, используется ли неправильное семейство шрифтов на веб-странице или вы все еще используете свой старый цвет где-то на вашем сайте.
Инструмент «Поиск» также является прекрасным способом улучшить взаимодействие с разработчиками, поскольку вы можете показать им, где именно вы нашли ошибку или что именно нужно изменить. Просто сообщите им номер строки, в которой существует проблема, и вы получите исправление намного быстрее.
Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.
Измените что угодно с помощью элементов
Front-end разработчики используют инструмент Inspect Element каждый день, чтобы изменять внешний вид веб-страницы и экспериментировать с новыми идеями - и вы тоже можете. Inspect Elements позволяет настраивать внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.
Как только вы закроете или перезагрузите страницу, ваши изменения исчезнут; вы будете видеть изменения только на своем компьютере и не будете редактировать сам настоящий веб-сайт. Таким образом, вы можете свободно экспериментировать и изменять что угодно, а затем копировать и сохранять самые лучшие изменения, чтобы использовать их позже.
Посмотрим, что мы можем с этим сделать.
Щелкните вкладку «Элементы» на панели инструментов разработчика - и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть ранее открытое окно поиска. Вы должны увидеть HTML-код этой страницы - теперь вы знаете, как делают колбасу.
В верхнем левом углу панели разработчика вы увидите значок мыши поверх квадрата. Щелкните по нему, затем вы можете выбрать любой элемент на странице, который вы хотите изменить. Так что давайте изменим кое-что!
Изменить текст на веб-странице
Вы когда-нибудь хотели изменить текст на сайте - возможно, чтобы увидеть, как новый слоган будет выглядеть на вашей домашней странице, или убрать ваш адрес электронной почты со скриншота Gmail? Теперь вы можете.
Щелкните значок «мышь над квадратом», затем щелкните любой текст на странице - возможно, слоган на главной странице Zapier. На панели инструментов разработчика вы увидите строку текста с синим выделением, которая выглядит примерно так:
Дважды щелкните текст «Подключите свои приложения», выделенный синим цветом на панели инструментов разработчика, и он превратится в редактируемое текстовое поле.
Введите все, что вам нравится, в это текстовое поле («Аури - гений» должно работать нормально) и нажмите ввод. Вуаля! Вы только что изменили текст на веб-странице.
Обновите страницу, и все вернется в нормальное состояние.
Веселье? Давайте изменим еще кое-что на этой странице.
Панель инструментов разработчика перезагружается вместе со страницей, но давайте закроем ее. Нажмите «X» в правом верхнем углу страницы.
Прохладный. Теперь мы снова откроем его - прямо на тексте, который хотим отредактировать. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши ту часть страницы, которую вы хотите изменить, а затем щелкнуть ссылку « Проверить» или « Проверить элемент», которая появляется в нижней части контекстного меню.

Когда откроется панель инструментов разработчика, это предложение должно автоматически выделиться. Довольно аккуратно, да? Важны мелочи.
Теперь, когда мы выбрали слоган на сайте Zapier, давайте изменим его внешний вид.
Изменение цвета и шрифта элементов
Справа от этого предложения на панели инструментов разработчика вы увидите подпанель с тремя дополнительными вкладками: стили, вычисленные и прослушиватели событий. Каждый из них позволяет вам изменить внешний вид этого предложения на странице. Начнем с вкладки «Стили».
Вы можете заметить, что на вкладке «Стили» некоторые элементы перечеркнуты. Это означает, что эти стили не активны для элемента, который мы выбрали, поэтому изменение этих значений не повлияет. Мы можем игнорировать их для наших целей.
Попробуем что-нибудь изменить. Снова щелкните значок стрелки в верхней части Inspect Element и выделите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите «выравнивание текста» на вкладке «Стили» (возможно, вам придется немного прокрутить, чтобы найти это).
Прямо сейчас он установлен в «центр», но дважды щелкните «центр» и введите left
. Это выравнивает текст на странице по левому краю.
Теперь поиграем с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке Styles найдите эту строку:
И дважды щелкните "# ff4a00". Наберите #4199ad
(не забудьте #) и нажмите "Enter".
Мы только что изменили цвет нашей кнопки с оранжевого на синий! А теперь попробуем что-нибудь действительно крутое.
Изменить состояние элемента
Хотите увидеть, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет по ней? Chrome Inspect Element может показать это с помощью инструментов состояния силового элемента. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наведет курсор на элемент (состояние наведения), выберет элемент (состояние фокуса) и / или щелкнет ссылку (состояние посещения).
Давайте попробуем это. Убедитесь, что вы выбрали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите в этом меню :active:
.
Это изменит цвет кнопки на серый, который отображается на сайте Zapier, когда вы нажимаете кнопку.
Теперь измените значение background-color на #FF4A00
, и вы должны сразу увидеть изменение цвета кнопки.
Попробуйте поэкспериментировать - измените :hover:
color, затем снимите флажок :hover:
в контекстном меню и перетащите указатель мыши на кнопку, чтобы увидеть новый цвет кнопки.
Изменить изображения
Вы также можете легко изменить изображения на веб-странице с помощью Inspect Element. Давайте заменим фон Супергероя на сайте Zapier на эту впечатляющую фотографию солнечной вспышки, сделанную НАСА.
Сначала скопируйте и вставьте эту ссылку в изображение:
https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg
Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали строку signup-hero
в коде. Дважды щелкните ссылку URL-адреса фона на панели «Стили» и вставьте ссылку, которую вы скопировали выше.
Нажмите "Enter" и сразу увидите разницу.
Примечание. Вы также можете преобразовать фотографию в GIF или видео - все, что вам нужно, это ссылка на файл, и вы можете добавить ее.
Редактировать текст удобно, менять изображения - весело, а изменение цветов и стилей может помочь вам быстро смоделировать изменения, которые вы хотите внести на свой сайт. Но как этот новый слоган и дизайн кнопок будут выглядеть на мобильных устройствах?
Вот тут-то и появляется эмуляция - здесь все, что мы рассмотрели до сих пор, может быть применено еще дальше. Посмотрим как.
Протестируйте сайт на любом устройстве с помощью эмуляции
Сегодня все должно быть отзывчивым. Веб-сайты больше не просматриваются только на компьютерах - с большей вероятностью, чем когда-либо, их можно будет просматривать на телефоне, планшете, телевизоре или на любом другом экране. Об этом всегда следует помнить при создании нового контента и дизайна.
Эмуляция - отличный инструмент для приблизительного представления того, как веб-сайты будут выглядеть для пользователей на различных устройствах, в браузерах и даже в разных местах. Хотя это не заменяет фактическое тестирование на различных устройствах и браузерах, это отличное начало.
На панели инструментов разработчика вы заметите маленький значок телефона в верхнем левом углу. Щелкните по нему. Это должно превратить страницу в крошечную страницу в стиле телефона с меню вверху для изменения размера.
Измените размер небольшого браузера, чтобы увидеть, как все выглядит, если вы просматриваете страницы на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размеры устройства по умолчанию, такие как 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, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров. Выберите « Датчики», чтобы получить три новых инструмента: «Геолокация», «Ориентация» и «Касание».
Сенсорное управление позволяет включить или выключить селектор круга по умолчанию, который действует больше как палец, чем обычный курсор мыши. Ориентация позволяет вам взаимодействовать с чувствительными к движению веб-сайтами, такими как онлайн-игры, которые позволяют перемещать объекты, перемещая телефон. А геолокация позволяет вам представить, что вы находитесь в другом месте.
Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.
Установите флажок «Эмулировать координаты геолокации» и введите значение 37
в текстовое поле Lat = и 122
в текстовое поле Lon = . Нажмите Enter на клавиатуре.
Ничего не меняется, правда?
Это потому, что на этой странице нет содержимого, которое изменяется в зависимости от вашего местоположения. Если вы измените координаты на таком сайте, как Groupon.com
который использует ваше местоположение для отображения локализованного контента, вы получите другие результаты. Перейдите на Google.com
в другом месте, и, возможно, вы увидите новый логотип Google на празднике в другой стране или, по крайней мере, получите результаты на другом языке.
Эмуляция - отличный способ поставить себя на место пользователя и подумать о том, что пользователь может видеть на вашей веб-странице, и это интересный способ исследовать международную сеть.
Эмуляция мобильных сетей
Вы также можете увидеть, каково это просматривать сайт в разных сетях, возможно, чтобы увидеть, загрузится ли ваш сайт, даже если ваши пользователи находятся в более медленной сети 3G.
Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска «Проверить элемент» и выберите «Условия сети». Там вы можете выбрать быстрый или медленный 3G или автономный режим, чтобы увидеть, как страница работает без Интернета. Или нажмите « Добавить ...», чтобы включить собственное тестирование (возможно, добавьте 56 Кбит / с для тестирования коммутируемого доступа в Интернет). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении и как сайт выглядит во время загрузки. Это покажет, почему вам следует улучшить свой сайт, чтобы он загружался быстрее при медленных соединениях.
Вы также можете изменить свой пользовательский агент - снимите флажок «Выбирать автоматически» рядом с «Пользовательским агентом» и выберите «Internet Explorer 7», возможно, чтобы увидеть, изменит ли сайт свою визуализацию для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.
Вызовы
Давайте закончим несколькими проблемами. Покажи нам, что ты узнал!
Измените заголовки на CNN.com и отправьте нам в Твиттере снимок экрана с заголовком вашей популярной статьи.
Дублируйте свой любимый веб-сайт, используя «Просмотр исходного кода», и поиграйте с HTML, чтобы сделать его своим.
Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно было бы улучшить, исправив это самостоятельно!
Маркетинговая команда Zapier использует Inspect Element для извлечения личной информации из снимков экрана в наших обзорах приложений, а наша команда дизайнеров использует ее для создания макетов изменений и просмотра того, как все будет выглядеть на разных экранах.
Как вы используете Inspect Element? Мы будем рады услышать ваши истории в комментариях ниже!
Вам нравятся ваши новые хакерские навыки? Изучите их дальше в нашем руководстве «Как создать веб-сайт без какого-либо программирования» и его сопутствующем руководстве «Как создать отличную графику без какого-либо кодирования».
Это руководство было первоначально опубликовано 5 января 2015 года, затем было обновлено и переиздано 6 июня 2017 года и 25 января 2018 года со скриншотами и действиями из последней версии Google Chrome.