Инструменты гугл хром

Содержание

Введение в Chrome DevTools. Панель Elements

Инструменты гугл хром

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

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

Как открыть инструменты разработчика

OS X — Ctrl+Cmd+I.

Windows — F12.

Linux — Ctrl+Shift+I.

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

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

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

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header, и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

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

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

Начать обучение

Нажатие на кнопку — согласие на обработку персональных данных

Источник: https://htmlacademy.ru/blog/boost/tools/chrome-devtools-1

Профессиональное применение инструментов разработчика Chrome: 13 советов

Инструменты гугл хром
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.

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

Иногда вы заглядываете на панель Elements чтобы взглянуть на CSS-код, который применяется для стилизации DOM-элементов.
Панель Console Но хорошо ли вы знаете инструменты разработчика Chrome? На самом деле, тут есть множество мощных, но не слишком известных возможностей, которые способны значительно повысить эффективность вашего труда.

Здесь я собираюсь рассказать о самых полезных таких возможностях, которые, хочется надеяться, вам пригодятся. Для начала мне хотелось бы в двух словах рассказать о пункте меню инструментов разработчика, который называется Run command. Этот пункт меню для Chrome — всё равно, что командная оболочка для Linux.

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

  • В Windows — Ctrl + Shift + P.
  • В macOS — Cmd + Shift + P.

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

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

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

Это — вполне обычные задачи, но их нелегко решить с помощью всяческих программ для создания скриншотов. Для того чтобы с ними справиться, мы можем воспользоваться возможностями вышеописанной команды меню Run command.

В частности, речь идёт о следующих командах:

  • Screenshot Capture full size screenshot
  • Screenshot Capture node screenshot

Откройте какую-нибудь страницу, например — раздел Medium с самыми популярными материалами по JavaScript.

Теперь откройте панель команд и выберите в ней команду Screenshot Capture full size screenshot.

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

Аналогично, если нужно сделать скриншот элемента DOM, можно воспользоваться сторонней программой, которая, правда, не позволит получить изображение, относящееся в точности к нужному элементу. Решить эту задачу нам поможет команда Screenshot Capture node screenshot.

Пользуются ей так: сначала выбирают нужный элемент в панели Elements, а потом выполняют команду.
Создание скриншота области экрана, относящейся к конкретному элементу DOM Вот как выглядит скриншот, снятие которого показано на предыдущем анимированном рисунке.
Скриншот элемента DOM Консоль часто используется для отладки кода. Представьте, что вам нужно узнать о том, как обратить строку средствами JavaScript. Вы поискали в интернете и нашли такой фрагмент кода: 'abcde'.split('').reverse().join('') Вы попробовали запустить этот код в консоли и, как оказалось, работает он правильно.
Проверка кода в консоли

Итак, строку этот код «переворачивает». Однако вам непонятно то, как работают методы split(), reverse() и join(). Вы не знаете о том, с чем именно они работают на промежуточных этапах «переворачивания» строки. Поэтому вы решаете выполнять этот код пошагово. Начинаете вы с первого метода, получив его результат, запускаете на этом результате второй метод и так далее.

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

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

Пример использования $_ При работе над фронтенд-проектами часто бывает нужно пользоваться API XHR для выполнения запросов к бэкенду на получение данных. А что если нужно повторно отправить уже отправленный XHR-запрос? Если эту задачу решает начинающий разработчик, то он просто обновит страницу. Но постоянное обновление страниц для повторной отправки запросов может оказаться слишком трудоёмкой задачей. На самом деле, с запросами можно работать, используя средства панели Network.
Команда повтора XHR-запроса Для того чтобы повторно выполнить уже отправленный XHR-запрос, надо действовать так:

  • Откройте панель Network.
  • Щёлкните по кнопке XHR.
  • Вызовите контекстное меню запроса, который нужно повторить.
  • Выберите в меню команду Replay XHR.

Вот анимированный пример выполнения вышеописанных действий.
Повтор XHR-запроса На полную загрузку страницы, от самого начала этого процесса, до самого конца, может потребоваться более десяти секунд. Для того чтобы узнать о том, что именно происходит в ходе загрузки страницы, можно организовать наблюдение за этим процессом. В инструментах разработчика Chrome можно делать скриншоты страницы в разные моменты загрузки, установив флаг Capture screenshots на панели Network.
Флаг Capture screenshots и наблюдение за загрузкой страницы Щёлкая по скриншотам, можно просматривать запросы, выполнявшиеся в соответствующие моменты времени. Визуальное представление процесса загрузки страницы даст вам более высокий, чем раньше, уровень понимания того, что именно происходит при загрузке страницы.
Анализ загрузки страницы
Можно ли скопировать значение JavaScript-переменной для последующего использования этого значения? Не исключено, что вам такая задача может показаться невозможной, но в консоли Chrome можно воспользоваться особой командой, copy(), которая позволяет копировать содержимое переменных в буфер обмена.
Копирование содержимого JS-переменной Этой функции нет в стандарте ECMAScript. Она доступна нам благодаря Chrome.
Есть два способа работы с изображениями, выводимыми на веб-страницах. Первый способ заключается в загрузке изображений из внешних источников. Второй — в кодировании изображений в виде так называемых Data URL. На MDN можно узнать о том, что Data URL — это URL с приставкой :data. Такие URL позволяют встраивать прямо в документ файлы небольшого размера. Раньше их называли «Data URI», так было до тех пор, пока это название не было выведено из обращения WHATWG. Преобразование небольших изображений в виде Data URL и встраивание их непосредственно в код страницы снижает количество HTTP-запросов, которые нужно выполнить при загрузке страницы. Это, в результате, способно ускорить загрузку страницы. Как, пользуясь Chrome, превратить изображение в Data URL? Ниже приведена анимированная демонстрация этого процесса.
Копирование изображения в виде Data URL Представьте, что у нас имеется массив объектов. Например — такой: let users = [{name: 'Jon', age: 22},  {name: 'bitfish', age: 30},  {name: 'Alice', age: 33}] Выведем его в консоли.
Массив объектов, выведенный в консоли Как видите, просматривать его, когда он выведен в таком виде, не очень-то удобно. А если подобный массив будет длиннее, а элементы, которые в нём имеются, будут иметь более сложную структуру, тогда разобраться с ним будет ещё сложнее.

К нашему счастью, в Chrome есть специальная функция, table(), которая позволяет форматировать массивы объектов.

Отформатированный массив объектов Часто эта функция оказывается очень кстати. Иногда, в ходе тестирования интерфейса, нужно поменять расположение некоторых DOM-элементов страницы. Для того чтобы это сделать, мы можем воспользоваться возможностью панели Elements, которая заключается в перемещении любых HTML-элементов в коде страницы.
Перетаскивание элемента

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

Поговорим об ещё одной «магической» переменной, которой можно пользоваться в консоли. Это — переменная $0. Она позволяет обратиться из консоли к элементу, который выделен в панели Elements.
Обращение к элементу с помощью $0
На MDN можно узнать о псевдоклассах следующее:

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

Для некоего элемента можно предусмотреть стили, имеющие отношение к различным псевдоклассам. Для того чтобы проверить эти стили, псевдоклассами можно управлять прямо из панели Elements.
Управление псевдоклассами Вот код веб-страницы:   hello world Нам надо проверить стилизацию псевдоклассов. Для этого мы можем воспользоваться панелью Elements.
Исследование стилей псевдоклассов
При отладке стилей страницы часто нужно скрыть элемент. Для того чтобы сделать это максимально быстро, достаточно выделить элемент и нажать на клавиатуре клавишу H.
Быстрое скрытие элемента

Это приводит к добавлению стиля visibility: hidden !important; к соответствующему элементу.

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

  • Выделить элемент.
  • Щёлкнуть по нему правой кнопкой мыши, вызвав контекстное меню.
  • Выбрать в меню команду Store as a global variable.

Сохранение ссылки на элемент DOM в виде временной глобальной переменной

А какими малоизвестными возможностями инструментов разработчика Chrome пользуетесь вы?

Источник: https://habr.com/ru/company/ruvds/blog/512862/

Инструменты разработчика DevTools в Google Chrome

Инструменты гугл хром

Как известно, веб-разработка делится на 2 части: frontend (фронтенд) и backend (бэкенд).

Вольно выражаясь, фронтенд это то, что работает в браузере, т.е. верстка (html + css) и браузерные скрипты (javascript).

Бэкенд — это скрипты, работающие на сервере.

В этой статье разберем инструменты разработчика (DevTools), которые встроены во все современные браузеры. Эти инструменты — незаменимая вещь для фронтенд-разработчика.

Разбирать будем на примере инструментов разработчики, которые встроены в браузер Google Chrome.

Открыть инструменты разработчика можно 3-мя способами:

  • Нажать клавишу F12
  • Нажать сочетание клавиш ctrl+shift+i

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

Инструменты разработчика для верстальщика

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

Панель «Elements»

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

Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.

Выбрать элемент, для просмотра его свойств, можно разными способами:

Щелкнуть по нему правой кнопкой мыши и выбрать пункт меню «Посмотреть код»
При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент:
Выбрать элемент в инспекторе кода
При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента…

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

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

И в этом случае вкладка «Elements» просто незаменима. На скриншоте ниже показан элемент, на который действует множество правил, находящихся в разных местах и разных файлах, сразу видно, в каком файле и на какой строке находится то или иное правило:

Это очень удобно при изучении чужого кода.

Например, мы изучаем популярнейший css-фреймворк bootstrap. Среди его классов, относящихся к сетке (т.е. к позиционированию элементов) имеется класс .row. Любой, кто верстает с использованием этого фреймворка использует этот класс, практически, на каждой странице. Для чего же он нужен?

Открывает инструменты разработчика, находим элемент с этим классом, выделяем его и смотрим:

Глядя на эти правила, мы понимаем, что:

  • Этот класс является flex-контейнером для вложенных элементов display: flex;
  • Элементы, находящиеся внутри этого контейнера, будут выстраиваться в несколько строк flex-wrap: wrap;
  • Ну и видим, справа и слева минусовые отступы.

Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:

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

Переключившись на вкладку «computed» можно посмотреть окончательную версию всех стилей, примененных к элементу:

Проверка разметки на адаптивность

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

Для этого мы можем использовать «Переключение в режим устройства» (Toggle device mode). Повторное нажатие на эту иконку, вернет обычный режим:

И после этого, можно выбирать какое-то устройство из списка или выбрать произвольную ширину:

Вы можете выбрать устройство и повернуть его:

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

Инструменты разработчика для javascript-программиста

Программирование состоит не только из написания кода. Редко случается, что мало-мальски сложный код начинает сразу работать так, как было задумано.  В большинстве случаев “что-то идет не так”. Чтобы заставить программу (скрипт) выполняться так, как задумал разработчик, ее «отлаживают».

Отладка — этап разработки, на котором обнаруживают и устраняют ошибки. Часто она занимает больше времени, чем собственно написание кода.

Для фронтенд javascript-программиста средой выполнения скриптов, которые он пишет, является браузер. Дальше посмотрим какие возможности для отладки предоставляют нам «инструменты разработчика» в Google Chrome.

Панель «Console»

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

В принципе, при написании js-скриптов консоль, обычно, открыта всегда, поскольку любые необработанные ошибки, сразу видны. Видны файл и строка, где произошла ошибка:

Щелкнув по имени файла со строкой, мы открываем место, где произошла ошибка

В консоль можно выводить сообщения прямо из скрипта. На практике это самый широко используемый метод отладки, поскольку является простым и универсальным. Выражение типа “законсоль эту переменную” понятно любому JS-программисту.

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

Для вывода сообщений используется объект Console, доступ к нему можно получить через свойство console глобального объекта Window.

У объекта Console несколько методов. Все их можно посмотреть в документации, но чаще всего используется метод log.

Отладка командой debugger

Следующий способ отладки, это использование команды debugger. Она прописывается прямо в скрипте.

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

Панель Sources состоит из 3-х областей:

  • Navigation – на ней отображаются все файлы используемые на странице
  • Sources – отображается исходный код, тот его фрагмент, где находится команда debugger.
  • Information – эта область содержит разнообразную информацию, которую можно использовать для отладки.Например, на скриншоте видны значения переменных, которые они имеют на момент остановки на команде debugger. Причем доступны как локальные переменные, находящиеся в той же функции, так и переменные в модуле, и глобальные переменные.

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

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

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

Breakpoints (точки останова)

Кроме использования команды debugger, остановить выполнение скрипта в определенном месте можно при помощи так называемых breakpoints или точек останова.

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

Затем в Navigation выбираем нужный файл, в области Sources находим нужное место, и щелкаем мышью на номере нужной строки. Номер строки будет помечен синим цветом:

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

Заключение

В заключение хочется сказать, что в статье рассмотрены часто используемые возможности инструментов разработчика в Google Chrome.

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

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

Источник: https://zen.yandex.ru/media/id/5e824e9e6ae5482256ca8012/instrumenty-razrabotchika-devtools-v-google-chrome-5f7719e5952c3b370e1b460c

10 возможностей Google Chrome для SEO-аудита сайта (перевод)

Инструменты гугл хром

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

на рассылку и получи книгу в подарок!

Если вы проводите SEO-аудит, скорее всего вам знакомы инструменты разработчика от Google Chrome.
Колумнист Алейда Солис делится 10 способами применения этих инструментов для выявления и устранения проблем в области SEO.

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

Однако у нас уже есть один из самых удобных бесплатных наборов инструментов SEO, который идет в комплекте с браузером – инструменты разработчика.

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

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

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

В качестве альтернативы можете использовать сочетания клавиш:

  • Ctrl + Shift + I для Windows.

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

1. Проверяйте основные элементы контента вашей страницы, включая рендеринг JavaScript

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

Быстро посмотреть DOM любой страницы с помощью браузера можно в панели инструментов разработчика, раздел «Elements».

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

Например, в верхнем левом углу на изображении ниже мы можем увидеть, как отображается основной текст (обведен красным цветом), выделенный элементом . Но на самом деле он написан с помощью JavaScript. Cоответствующий код можно увидеть на скриншоте, представленном в верхней правой части изображения, там, где открыт код страницы.

Сравнивая содержание левого и правого скриншотов, вы можете проверить, правильно ли выполняется индексация:

  • Просмотрев кэшированную страницу в Google.
  • Проверив, отображается ли текст в выдаче Google при поиске.
  • Используя «Просмотреть как Googlebot» в Google Search Console.

2. Ищите содержимое, скрытое при помощи CSS

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

Один из наиболее распространенных способов скрыть текст – использовать свойства CSS display:none или visibility:hidden. Поэтому нужно проверить, нет ли на страницах вашего сайта важной информации, которая скрыта с помощью этих средств.

Сделать это вы можете с помощью инструмента Search, доступ к которому можно получить, нажав комбинацию клавиш Ctrl + Shift + F (Windows) или Cmd + Opt + F (Mac), когда открыта панель инструментов Google. Функция поиска позволит вам просмотреть не только открытый файл страницы, но также CSS или JavaScript.

С помощью Search вы можете выполнить поиск требуемых свойств, например visibility:hidden или display:none. Если они есть в коде страницы, вы их найдете.

Откройте код строки с вашим сайтом в выдаче поиска. Найдите скрытые фрагменты текста. Если это важный контент, проверьте, был ли он обесценен поисковиком, и если да, примите меры.

3. Проверяйте заполнение атрибута alt изображений

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

4. Выявляйте неиндексируемые конфигурации и атрибут rel=canonical

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

Проверку можно выполнить не только для тегов HTML, но и заголовков HTTP. Для этого перейдите к панели Network и выберите страницу или ресурс, содержимое заголовков которого хотите проверить. Там же вы сможете посмотреть, есть ли ссылка rel=canonical в файле изображения.

5. Проверяйте статус HTTP в конфигурации заголовка

При проверке конфигурации заголовка страниц и ресурсов с помощью раздела Network панели инструментов, вы также можете проверить статус HTTP, посмотреть, есть ли там какие-либо редиректы, какого они типа, найти статусы ошибок, а также вкрапления других конфигурации, таких как х-robots-tag, hreflang или vary: user agent.

6. Следите за мобильной веб-оптимизацией

Удобство чтения информации на мобильных устройствах сейчас важно для SEO, и вы можете проверить конфигурацию страницы и контента в мобильном телефоне с помощью инструмента Mode Device.

Эта опция активируется нажатием на значок устройства в левой верхней части панели или нажатием сочетания клавиш Ctrl + Shift + M (Mac) или Ctrl + Shift + M (Windows, Linux) при открытой панели инструментов.

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

7. Контролируйте время загрузки страницы

Анализировать время загрузки любой страницы можно путем эмуляции условий сети и используемого устройства. Для этого, перейдите к инструменту Network Conditions, доступ к которому можно получить из диалогового окна настроек в верхнем правом углу панели, раздел More tools.

Здесь вы найдете такие конфигурации, как Caching, Network throttling и User agent.

После того, как вы выбрали необходимые настройки, перезагрузите нужную страницу и перейдите к панели Network, чтобы увидеть не только полный цикл загрузки данной страницы (Load), но также и то, когда произошло событие DOMContentLoaded. Эта информация содержится в нижней части окна. Вы можете также просмотреть время загрузки и размер каждого из используемых ресурсов, записав его нажатием на красную кнопку на левой стороне панели.

Чтобы получить рекомендацию о том, как увеличить скорость страницы, перейдите к панели Audits и нажмите кнопку Run. Каждая рекомендация будет указывать на имеющиеся проблемы. Пример представлен ниже:

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

8. Определяйте ресурсы, блокирующие рендеринг

Также вы можете использовать данные о времени загрузки ресурса в панели Network, чтобы определить, какие JS и CSS ресурсы загружаются быстрее DOM и, возможно, блокируют его. Это одна из наиболее распространенных проблем, влияющих на скорость загрузки страницы.

9. Находите небезопасные ресурсы во время перехода на HTTPS

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

10. Проверяйте ускоренные мобильные страницы

Если вы реализуете AMP, можете посмотреть, есть ли какие-либо проблемы на ваших страницах, добавив строку #development= 1 к вашему URL AMP , а затем проверив в панели Console.

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

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

Бонус: персонализируйте настройки инструментов Chrome

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

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

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

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

Олег Васильев

Тимлид SEO-отдела SEMANTICA

Google Chrome отличный браузер, который используют свыше 50% пользователей в рунете. Для полноценного комплекса работ, к сожалению, его недостаточно, но стандартные инструменты гугл хром, безусловно, полезны в работе. Они бесплатны и всегда находятся всегда под рукой специалиста. Однако их использование ограниченно: они подходят только для работы с небольшими сайтами или для проведения поверхностного аудита на наличие технических ошибок. Но на браузер можно навешать много дополнительных плагинов. Например, в своей работе мы испольльзуем: Web Developer, RDS Bar, а также Yandex Assistant для работы с вордстатом.

Источник: https://semantica.in/blog/10-vozmozhnostej-google-chrome-dlya-seo-audita-sajta.html

Как открыть меню «Инструмент разработчика» в Google Chrome

Инструменты гугл хром

Неужели все, на что способен веб-обозреватель от Google – это только обрабатывать и отображать содержимое страниц сайтов без возможности управления ими? Конечно нет, ведь инструменты разработчика в Google Chrome открывают доступ к продвинутым возможностям по персонализации страниц, изучению кода, запуску программных команд и т.п. В браузере есть специальное меню с обилием полезных средств настройки и управления как для веб-программистов, так и обычных пользователей. Подробности о способе запуска этих параметров в Chrome, содержимом разделов и способах их использования находятся ниже.

Как открыть меню браузера Гугл Хром со средствами разработки

Сперва стоит найти, где находится эта консоль в Гугл Хроме. Для запуска необходимого инструмента разработчики предусмотрели сразу 3 способа.

Решение 1: посмотреть через меню браузера

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

Как включить меню Гугл Хром:

  1. Нажимаем на три точки справа от поисковой строки.
  2. Ведем мышь к строке «Дополнительные инструменты» и останавливаем курсор на ней.
  3. Выбираем «Инструменты разработчика».

Решение 2: запустить консоль из контекстного меню

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

Как открыть консоль разработчика в Гугл Хром:

  1. На любом веб-портале нажимаем правой кнопкой мыши (ПКМ) по любому месту страницы.
  2. Выбираем опцию «Просмотреть код».

Полезно! Чтобы увидеть код конкретного элемента, жмем ПКМ по нему. После перехода в панель инструментов Гугл Хрома отобразится код ссылки, блока или строки, по которому сделали клик.

Решение 3: отобразить продвинутые настройки страницы горячими клавишами

Способ противоположный предыдущим методам тем, что он не требует наличие мышки, все действия легко выполнить только на клавиатуре. Достаточно нажать Ctrl + Shift + I. Важное достоинство метода – его можем применять практически на всех сайтах, даже на тех, что блокируют доступ к консоли альтернативными способами.

Панель разработчика Google Chrome: советы по использованию

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

Раздел Console

Это своеобразная панель задач Google Сhrome, позволяющая видеть ошибки в JavaScript-коде, а также запускать различные команды. Активно используется разработчиками и хакерами, обычным пользователям не слишком полезный раздел. В целом здесь масса гибких возможностей, основанных на использовании JS.

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

Группа Sources

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

Папка Network

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

Страница Performance

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

Блок Memory

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

Вкладка Application

Многофункциональная папка, в которой совмещены инструменты для управления сервисами, работы с куки, локальным кэшем, данными сессий, базой данных и многим другим. Для обычного пользователя может быть полезна очистка данных, которая доступна на странице «Clear Storage», а также средства для просмотра cookies и cache

Раздел Security

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

Подгруппа Audits

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

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

Источник: https://GuideComp.ru/kak-otkryt-menyu-instrument-razrabotchika-v-google-chrome.html

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.