Chrome тестирует инструмент создания ссылок на отдельные элементы страницы


Содержание материала:

Chrome научится создавать ссылки на отдельные части страницы

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

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

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

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

Пока неизвестно, собираются ли другие производители браузеров добавлять себе такую функцию, но можно предположить, что в веб-обозревателях на базе движка Chromium она точно появится.

25 полезных Chrome-расширений для веб-разработчиков Материал редакции

Ресурс Creative Bloq выбрал 25 расширений для браузера Google Chrome, которые, по мнению редакции, могли бы пригодиться в работе веб-разработчика.

1. iMacros for Chrome

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

Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.

2. Font Playground

Расширение для тех, кто любит «поиграть со шрифтами» — позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.

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

3. Project Naptha

Расширение для Google Chrome, которое позволяет выделять и копировать текст даже с картинок — будет полезным, по мнению Cretive Bloq, всем, кому хоть раз в своей работе приходилось иметь дело со встроенным текстом.

4. What Font

Расширение, которое позволяет мгновенно определить, какой шрифт использован на той или иной странице, не производя почти никаких дополнительных действий — наведя курсор мыши на надпись.

5. YSlow

YSlow — инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности, сформулированных командой компании Yahoo.

6. Web Developer

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

7. Web Developer checklist

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

8. DevTools Autosave

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

9. Instant Wireframe

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

10. Ripple Emulator

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

11. Streak

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

12. Search Stackoverflow

Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.

13. PHP Ninja Manual

Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.

14. PerfectPixel

PerfectPixel — расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния. Можно накладывать и другие изображения — например, первоначальный макет — чтобы убедиться, что получившаяся страница в точности ему соответствует:

15. Code Cola

Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.

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

16. Chrome Sniffer

Расширение для браузера, которое определяет, какие JavaScript-библиотеки, фреймворк или CMS используются на ресурсе.

17. User-Agent Switcher

User-Agent Switcher — это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.

18. IE Tab

Встроенный эмулятор Internet Explorer для Chrome.

19. PicMonkey

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

20. Chrome Daltonize

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

21. Page Ruler

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

22. Check My Links

Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.

23. Flickr Tab

Расширение, которое помогает не столько в разработке, сколько в поиске вдохновения и хороших фотографий. Показывает на каждой новой вкладке в Google Chrome одно изображение с сервиса Flickr. При нажатии на него пользователь переходит на страницу автора, где может ознакомиться с другими его работами.

24. Google Art Project

Расширение для браузера, похожее на предыдущий плагин в этом списке — только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства — например, полотна кисти Ван Гога или Мане.

25. Data Saver

Официальное расширение от Google для сжатия трафика, которое включает экономию трафика в браузере Google Chrome.

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

Содержание:

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

На сегодняшний день одними из лучших инструментов разработчика обладает браузер Google Chrome. Его встроенная система Chrome DevTools позволяет не только узнавать и менять практически любые элементы веб-страниц «на лету», но также имеет JavaScript-консоль, эмулятор экранов различных устройств и целый ряд диагностических инструментов для аудита и оптимизации загрузки сайтов.

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

Chrome DevTools

Язык: Русский Формат: Обновлено: 2020-09-16 Автор:

Узнайте, что могут дать Вам инструменты разработчика Chrome DevTools и научитесь использовать весь их потенциал.

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

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

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

Подобие таких инструментов появилось ещё в Internet Explorer. В старой Opera для этих целей использовалась панель Dragonfly и даже имелся собственный встроенный аналог Блокнота с подсветкой кода, что позволяло верстать прямо в среде браузера:

Сегодня от подобной практики отошли и снабдили веб-обозреватели специальными инспекторами кода. Наиболее функциональным инструментарием разработчиков могут похвастаться браузеры на базе движка Chromium, а конкретнее в Google Chrome. На его примере всё и рассмотрим.

Вызов инструментов разработчика и представления страницы

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

  1. Из основного меню. Кликаем по кнопке меню (три точки в правом верхнем углу окна браузера), наводим курсор на выпадающий список «Дополнительные инструменты» и в нём нажимаем пункт «Инструменты разработчика».
  2. Горячими клавишами. Для вызова можно нажать кнопку F12 или комбинацию CTRL+SHIFT+I.
  3. Из контекстного меню (наиболее удобно для инспекции конкретных элементов страницы). Нажимаем правой кнопкой мыши по нужному объекту на веб-страничке и выбираем пункт «Просмотреть код» (или «Исследовать элемент» в некоторых более ранних версиях Хрома).

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

Поведение первой мы ещё изучим, а, что касается второй, то она позволяет эмулировать отображение веб-страницы на экране одного из доступных мобильных устройств (например, iPhone) или на дисплее заданного разрешения в пикселях. Всё, что нужно для этого – нажать её и выбрать желаемое устройство:

В правой части также имеется несколько кнопок и индикаторов. Индикаторы отображают количество ошибок (красным) и предупреждений (жёлтым) в работе скриптов. Основной же кнопкой здесь можно назвать меню настроек. Она позволяет изменять привязку самой панели относительно фрейма со страницей, а также включать и отключать дополнительные вкладки с инструментами (раздел «More tools»). По умолчанию она находится внизу под инспектируемой страницей, но её также можно разместить сбоку или даже открепить в отдельное окно:

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

Вкладка Elements

По умолчанию Chrome DevTools открывается на вкладке «Elements». Это одна из самых полезных вкладок, поскольку позволяет просматривать и быстро менять HTML и CSS-код различных элементов веб-страницы. Чтобы выбрать элемент, достаточно активировать первую кнопку в левой части панели («Select an element in the page to inspect it») и курсором мышки ткнуть в нужный фрагмент страницы. На самой страничке вокруг выбранного элемента отобразится выделение и размеры блока в пикселях, а во вкладке «Elements» HTML-код развернётся до строки, описывающей выбранный фрагмент:

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

Как видим, внутри него находится три блока с разными репликами и скрипт, который эти реплики переключает через определённые отрезки времени. Чтобы написать что-то своё, мы можем остановить работу скрипта и прописать в одном из блоков наш текст (правка HTML доступна после двойного клика по элементу). Хотя, чего мелочиться? Можем убрать все лишние блоки, оставив только один (а заодно можно и скрипт снести :)):

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

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

Ну и, пожалуй, самое полезное – для каждого селектора с описанием стилей имеется точная ссылка на строку, в которой он реально прописан в CSS-файле. Это позволяет открыть файл и внести необходимые правки в заранее известном месте вместо того, чтобы искать вручную! То есть, использовать инструменты разработчика на вкладке «Elements» можно для внесения и оценки предварительных временных правок кода (все правки исчезают после перезагрузки страницы) с последующим внесением наиболее удачных изменений в код на постоянной основе.

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

  • Computed – отображает модель выбранного блока и вычисленные для него автоматически стили, которые явно не заданы или были унаследованы от родительских блоков;
  • Event Listeners – выводит список функций, «слушающих» определённые события для всей страницы или конкретно выбранного блока (нужно снять галочку ;
  • DOM Breakpoints – содержит так называемые «точки остановки» DOM (сокр. англ. «Document Object Model» – «объектная модель документа»), которые можно создавать из контекстного меню HTML-кода (группа «Break on») при его модификации для быстрой отмены/применения внесённых правок;
  • Properties – позволяет просмотреть полный список JavaScript-свойств для выбранного блока на страничке;
  • Accessibility – показывает иерархический уровень вложенности для выбранного блока без учёта типов блоков, их классов, идентификаторов или иных характеристик.

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

Консоль

Раз уж речь зашла о JavaScript, то нельзя не сказать о таком инструменте, встроенном в Chrome DevTools, как консоль. Найти её можно на отдельной вкладке «Console», а также она по умолчанию отображается в качестве дополнительной нижней панели на всех других вкладках (отключить отображение можно в настройках, выбрав пункт «Hide console drawer» или нажав кнопку ESC):

Консоль может выполнять сразу две функции: мониторинг событий на странице с отображением предупреждений и ошибок, а также исполнение JavaScript-команд, введённых пользователем. Явно выполняется первая функция. В выводе консоли все события группируются на три категории с разным цветом фона:

  1. Белый – «отстуки» об успешно выполненных событиях.
  2. Жёлтый – предупреждения о возможных некритических ошибках и сбоях.
  3. Красный – ошибки в выполнении скриптов или в доступе к определённым запрашиваемым ресурсам.
Топ-пост этого месяца:  Как вывести описание рубрики WordPress без плагинов


Ошибки и предупреждения содержат в себе краткое описание проблемы и ссылку на файл и строку в нём, которая эту проблему вызывает. Зная точный адрес возникновения неполадки (при условии, что она возникает в файле на Вашем сервере), Вы можете быстро локализовать и устранить ошибку.

Что касается выполнения пользовательского кода, то данная возможность применяется очень часто для быстрой отладки кода и проведения различных экспериментов с JavaScript. Например, при изучении этого языка Вам не всегда нужен отдельный Блокнот или даже полновесная среда разработки. Простенькие скрипты Вы можете выполнять прямо в консоли (тем более, что она поддерживает автодополнение команд).

Для программирования в консоли лучше всего открывать в Хроме несуществующую внутреннюю страницу (например, chrome://blank/) или новую пустую вкладку (chrome://newtab/). Это позволит избежать накладок в выполнении уже работающих на странице скриптов. По сути и всё – можем писать код в консоли и выполнять его нажатием Enter. Единственное, что нужно помнить, для вывода, вместо традиционного «document.write(«»);», используется конструкция «console.log(«»);». Вот Вам самый примитивный пример для вывода текстовой строки:

console.log(«Мой первый вывод текста в консоли Хрома :)»);

Консоль поддерживает ряд спецификаторов, позволяющих явно определить тип вывода (строка/число/элемент DOM/объект JavaScript), выполнить подстановку данных обозначенного типа или применить форматирование:

Спецификатор Назначение
%s Определяет результат вывода как строку
%d Определяет результат вывода как любое число
%i Определяет результат вывода как целое число
%f Определяет результат вывода как десятичную дробь (число с плавающей запятой)
%o Определяет результат вывода как элемент DOM, аналогичный тому, который отображался на панели «Elements»
%O Определяет результат вывода как JavaScript-объект
%c Позволяет применить к результату вывода CSS-правила, которые указываются в формате инлайн-стилей в качестве второго параметра

Вот несколько примеров применения спецификаторов:

console.log(«Я считаю до пяти: %d, %d, %d, %d, %d \n%s», 1, 2, 3, 4, 5, «Я иду искать!»);

console.log(«%cЭто будет написано большими красными буквами на синем фоне», «color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold»);

var curDate = new Date();
var day = curDate.getDate();
var month = curDate.getMonth();
var arr = [
‘Январь’,
‘Февраль’,
‘Март’,
‘Апрель’,
‘Май’,
‘Июнь’,
‘Июль’,
‘Август’,
‘Сентябрь’,
‘Ноябрь’,
‘Декабрь’,
];
console.log(«%cСегодня: %s — %d число», «color: orange; font-size: 30px; background: blue; padding: 20px», arr[month], day);

Как видим, консоль можно с успехом использовать не только для инспектирования существующего кода, но и в качестве среды для изучения JavaScript. Она поддерживает как однострочные выражения, так и более сложные многострочные конструкции с переменными, массивами и циклами. Для перевода строки в консоли вместо Enter нужно нажимать SHIFT+ENTER, а для перевода строк в результатах вывода пользуйтесь символом перевода строки – «\n».

Вкладка Sources

На первый взгляд назначение третьей вкладки инструментов разработчика «Sources» не совсем понятно. По умолчанию в центре рабочего пространства здесь также открывается исходный код страницы, который, почему-то, нельзя править. По бокам расположено две панели: «Page» (слева) и «Threads» (справа). И вот как раз левая панель и является основным «богатством» вкладки «Sources»!

Эта панель позволяет просмотреть все ресурсы, которые подгружаются вместе со страницей. Картинки, скрипты, таблицы стилей – всё это можно выделить и просмотреть в рабочей области (а скрипты можно ещё и править):

Помимо просмотра ресурсов и правки JavaScript (кстати, при этом можно использовать инструменты из правой панели), вкладка «Sources» позволяет скачивать любые файлы на компьютер. Эту особенность можно применить в дело, для скачивания, например, фотографий из Instagram и других веб-ресурсов, на которых прямое сохранение изображений недоступно! Просто открываем инструменты разработчика, в списке ресурсов ищем нужные картинки, а затем сохраняем их:

Аналогично можно скачивать, например, понравившиеся шрифты SVG-графику и подобные ресурсы, прямое сохранение которых может быть недоступно.

Инструменты тестирования и аудита

Рассмотренные выше три вкладки являются, можно сказать, основными в инструментах разработки. Состав же и количество остальных от версии к версии Google Chrome может меняться (как это, например, происходит с вкладкой «Memory», которая то появляется, то исчезает). К тому же, количество вкладок может увеличиваться за счёт устанавливаемых расширений, которые добавляют собственные панели инструментов.

На данный момент актуальной версией Google Chrome является недавно обновлённая 69-я ветка. Поэтому рассматривать дополнительные вкладки будем на её примере.

Вкладка «Network»

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

Полученные результаты можно изучить, используя фильтрацию событий по типы передаваемых данных, по их размеру, времени загрузки и т.п. Кроме того, можно эмулировать загрузку страницы с искусственным ограничением скорости, соответствующим тем или иным мобильным сетям (выпадающий список «Online»). Всё это можно использовать для выявления самых «тяжеловесных» файлов и оптимизации их загрузки (или вообще исключения) для экономии трафика и ускорения Вашего сайта.

Вкладка «Performance»

Если предыдущая вкладка позволяла нам отследить сугубо сетевую активность страницы, то «Performance», работая по схожим принципам (запись действий), позволяет оценить, какую нагрузку создаёт веб-ресурс на компьютер пользователя. Чтобы получить достаточное для анализа количество данных, достаточно записывать работу страницы в течении минуты, после чего останавливаем и смотрим результаты:

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

Вкладка «Memory»

Одна из самых непостоянных вкладок Google DevTools, которая то есть, то пропадает. Работать она может в двух режимах. По умолчанию на ней отображается обобщённое текущее потребление памяти открытой страницей. Если же Вам нужен детальный отчёт, можете запустить процесс записи, аналогичный тому, который был на предыдущих вкладках. В результате Вы получите данные обо всех процессах, потребляющих оперативную память компьютера:

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

Вкладка «Application»

Если Вам нужно узнать, что хранит веб-страница в сессиях, cookie-файлах или иных локальных хранилищах, Вам на вкладку «Application». Здесь всё максимально просто – в левой панели выбираем интересующее нас хранилище данных, а в основной области смотрим его содержимое. И, что характерно, здесь же мы можем сразу это содержимое править и даже полностью удалять (кнопки «Clear all» и «Delete selected»):

Вкладка «Security»

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

Вкладка «Audits»

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

Выводы

Google Chrome предоставляет пользователю довольно хороший набор инструментов разработчика. В нём есть практически всё, что может потребоваться для инспектирования и оптимизации веб-страниц. В Вашем распоряжении средства для правки HTML-кода, управления стилями и даже полного контроля над скриптами. Кроме того, в Chrome DevTools Вы найдёте инструменты для тестирования производительности сайта, что позволит наметить пути для дальнейшей оптимизации.

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

Как использовать Инструмент исследования Google Chrome

Октябрь 10, 2020

Из этого туториала Вы узнаете, как работать с Инструментом исследования Google Chrome.

Наверное, Вы уже знаете о FireBug, плагине для Mozilla Firefox. Один из наших видео-туториалов покажет, как работать с FireBug. Из этого туториала Вы узнаете, как работать с подобным расширением для Google Chrome.

Для того чтобы использовать Инструмент исследования Google Chrome, следуйте таким инструкциям:

Выберите кнопку меню Chrome в верхнем углу;

Выберите Больше инструментов (More Tools) > Инструменты (Tools) > Инструменты разработчика (Developer Tools):

Нажмите правой кнопкой мышки на элемент, который Вы хотите исследовать и выберите Исследовать (Inspect):

Используйте горячие клавиши: Ctrl+Shift+I (или Cmd+Opt+I для Mac). В качестве альтернативы, Вы можете нажать на F12 на клавиатуре.

В этом инструменте есть несколько доступных настроек:

Редактирование стилей CSS

Вкладка Элемент (Element) позволяет редактировать CSS в живом режиме. Это обозначает то, что Вы можете предварительно посмотреть изменения, которые Вы вносите в CSS вашего сайта, перед тем как вносить изменения напрямую на вашем сайте.

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

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

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

Обратите внимание! Изменения, внесённые в инструменте разработчика, не будут сохранены. Вы можете только узнать, как такие изменения повлияют на ваш сайт. Для того чтобы сохранить изменения, внесите изменения в файлы . HTML и .CSS.

Исследование разметки HTML

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

В левом широком разделе, Вы увидите код HTML , используемый на вашей странице.

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

Работа с Консолью

Консоль поможет найти баги на вашей странице. Для того чтобы открыть страницу Консоли:

Используйте сочетание клавиш CRTL+Shift+J для Windows (или Cmd+Opt+J для Mac).

Или нажмите на кнопку Консоль (Console) в ранее открытом инструменте разработчика.

Когда Консоль открыта, Вы увидите ошибки, которые отображаются на вашем сайте.

Этот инструмент очень полезен, если у Вас какие-то проблемы с сайтом. Консоль отобразит все ошибки сайта и некоторые подсказки, как их устранить.

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

Для того чтобы узнать больше о консоли Google Chrome, Вы можете ознакомиться со стандартным сайтом Google Chrome.

Использование функции Эмулятора устройств Google Chrome

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

Для того чтобы получить доступ к этой функции, убедитесь, что ваш инструмент разработчика открыт. Нажмите на кнопку Перетягиваемая панель инструментов устройства (Toggle Device Toolbar )(или используйте сочетание клавиш CTRL+Shift+M):

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

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

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Также, ознакомьтесь с нашей коллекцией новых html5 шаблонов для сайтов.

22 плагина Google Chrome для веб-разработчика

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

Stylebot

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

Image Downloader

Приложение для скачивания понравившихся картинок с любого сайта.

DomFlags

Создание меню ссылок для быстрой навигации по вашему коду.

CSS-Shack

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

Marmoset

Предельно бесполезное приложение для создания красивых скриншотов вашего кода. Под красотой понимается возможность изменения цвета фона и вращение в 3D.

iMacros for Chrome

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

Font Playground

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

Firebug Lite

Возможно, вы знаете про подобную мощную надстройку для Firefox, которая служит отладчиком и DOM-инспектором JavaScript, HTML, CSS. Чуть менее функциональная версия есть и на Chrome.

Window Resizer

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

Ripple Emulator

Аналогичная утилита, которая демонстрирует отображение страницы на конкретном гаджете.

Project Naptha

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

What Font

Чтобы узнать, какой перед вами шрифт, просто установите в браузер приложение What Font.


ColorZilla

А это приложение позволит узнать номер цвета.

Yslow

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

Web Developer

Какой веб-разработчик сможет жить без приложения Web Developer? Добавляет на главное окно кнопки-стандартные инструменты разработчика.

Page Ruler

Рулетка для веб-страниц сообщит вам габариты того или иного элемента.

DevTools Autosave

Как понятно из названия, данное приложение автоматически сохраняет ваши труды по созданию кода.

Instant Wireframe

С помощью этой утилиты вы сможете на любо ресурсе просмотреть структурную схему страницы (wireframe).

Search Stackoverflow

Быстрый поиск по популярному сервису вопросов и ответов для программистов и разработчиков.

PerfectPixel

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

Chrome Daltonize

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

Check My Links

Расширение, которое проверяет все ссылки в тексте и удостоверяется в их работоспособности. Работают – выделяет зелёным, не работают – красным.

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

Если вы еще не стали веб-разработчиком, рекомендуем пройти интенсив «Основы программирования».

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

Stylebot

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

Image Downloader

Приложение для скачивания понравившихся картинок с любого сайта.

DomFlags

Создание меню ссылок для быстрой навигации по вашему коду.

CSS-Shack

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

Marmoset

Предельно бесполезное приложение для создания красивых скриншотов вашего кода. Под красотой понимается возможность изменения цвета фона и вращение в 3D.

iMacros for Chrome

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

Font Playground

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

Firebug Lite

Возможно, вы знаете про подобную мощную надстройку для Firefox, которая служит отладчиком и DOM-инспектором JavaScript, HTML, CSS. Чуть менее функциональная версия есть и на Chrome.

Window Resizer

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

Ripple Emulator

Аналогичная утилита, которая демонстрирует отображение страницы на конкретном гаджете.

Project Naptha

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

What Font

Чтобы узнать, какой перед вами шрифт, просто установите в браузер приложение What Font.

ColorZilla

А это приложение позволит узнать номер цвета.

Yslow

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

Web Developer

Какой веб-разработчик сможет жить без приложения Web Developer? Добавляет на главное окно кнопки-стандартные инструменты разработчика.

Page Ruler

Рулетка для веб-страниц сообщит вам габариты того или иного элемента.

DevTools Autosave

Как понятно из названия, данное приложение автоматически сохраняет ваши труды по созданию кода.

Instant Wireframe

С помощью этой утилиты вы сможете на любо ресурсе просмотреть структурную схему страницы (wireframe).

Search Stackoverflow

Быстрый поиск по популярному сервису вопросов и ответов для программистов и разработчиков.

PerfectPixel

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

Chrome Daltonize

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

Топ-пост этого месяца:  Использование компонентов Symfony 4 в собственном PHP проекте. Часть 2

Check My Links

Расширение, которое проверяет все ссылки в тексте и удостоверяется в их работоспособности. Работают – выделяет зелёным, не работают – красным.

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

Если вы еще не стали веб-разработчиком, рекомендуем пройти интенсив «Основы программирования».

6 расширений Google Chrome для дизайнеров и веб-разработчиков

6 расширений Google Chrome для дизайнеров и веб-разработчиков

Сохраните себе, чтобы не потерять!

1. Web Developer

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

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

3. HTML Validator

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным.

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы.

5. Chrome Palette

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения.

Очень полезное расширение для Google Chrome. What Font позволяет разработчикам и дизайнерам определить, какие шрифты используются на веб-странице.

Найдены возможные дубликаты

Этот пост опоздал на много лет, все перечисленное уже давно встроено в дефолтный Developer Tools.

В каком архиве статью откопал?

Уууупс, и меня поглотила временная аномалия, отбросив год так в 2010, когда эти расширения были актуальны.

Штука действительно крутая! Очень радует адекватный редактор css и js в браузере, работа с кэшем и куками, проверка адаптива сразу на все экраны (правда косячить начало с последних 3х обновлений), да и валидаторы уже встроены в него

Хрень какая, актуальность поста — 10 лет

чувак, да ты упоролся.

правая кнопка мыши «посмотреть код» на элементе

уже лет как 5 действует.

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

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

нормальный верстала сразу строит каркас под СЕО-оптимизацию и абсолютно похеру сколько процентов соответствия выдаст валидатор. Хром, Фокс и Оперу держит — и норм.

Можно ссылку на статью о «Каркасе под СЕО-оптимизацию»?

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

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

Вы не правы! Если вы руководствуетесь статьёй по ссылке, то там вот что написано:

Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.


Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.

Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта. Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.

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

Из изменений — только поддержка не ниже IE10, в остальном же требования не поменялись. А то, что прогер (скорее всего верстальщик) не может что-то реализовать в для ослика, то это проблемы специалиста, а не чьи то ещё. Просто все современные фронтенды жизни не могут представить без билиотек и всяких свисто-перделок, которые появились совсем недавно. В нативный js и адекватный css уже не могут! Встречал чела, который не мог эл-ты выровнять по вертикали без flex’а. И это печально.

Вот ответь на вопрос, пожалуйста. Я, скорее всего, многого в этом не понимаю, но нашему верстальщику 50 лет, он говорит, что опыт у него 20 лет почти в разработке сайтов.

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

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

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

Есть молодые и «горячие» верстальщики, сввоеобразные хипстеры, которые ни строчки кода написать на js не могут, а всё на библиотеках решают (вызов библиотеки по ммнуалу не считается за написание кода). Они даже не до конца догоняют, как работает @media в css. Чаще всего эти люди хвастаются HTML5 и SCSS, при этом растыкивая section, header и footer не думая, зачем они нужны, а их исходники SCSS смотреть страшно. У этих специалистов фронтенд будет нормально работать только на последних версиях браузеров и на ПК, где не меньше 4 ГБ ОЗУ, т.к. скриптов там тьма-тьмущая.

А есть старики, которые застряли, в лучшем случае, в 2005 году и для них использование «новомодных» инструментов сродни сатанизму. Такие товарищи редко могут в адаптив, не приветствуют анимацию и псевдоклассы в css, а использование jQuery вызывает расстройство кишечника.

Так вот первые — делают красиво, но вёрстка не пройдёт валидацию, а скрипты конфликтуют друг с другом и дико грузят клиента (ониж на маках все сидят, такие модные)

Вторые же «на лицо ужасные — добрые внутри». Их код валиден, с какой стороны не подойди, но выглядит продукт убого и слабо вписывается в нынешний веб.

Лично моё мнение — держать нужно золотую середину. Об использовании каждой библиотеки думать несколько раз. Не нужно тянуть весь Бутстрап ради грида и фотмочек. Но и в каменный век отходить не нужно, отказываясь от более современных «примочек» (например, того же html5)

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

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

Chrome DevTools — уникальный инструмент для веб-разработки

Здравствуйте, дорогие друзья!

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

Рассмотрим инструмент WebTools подробнее.

Как открыть окно веб-инспектора

Это можно сделать двумя способами:

  • 1 способ: при активном окне браузера Google Chrome нажать клавишу F12.
  • 2 способ: щелкнуть ПКМ на том элементе, код которого вы хотите посмотреть, и в контекстном меню выбрать Просмотреть код. В этом случае WebTools покажет именно эту часть кода.

Окно инструмента состоит из двух частей. По умолчанию, слева открывается вкладка Elements, в которой отображается HTML-код страницы, а справа – вкладка Styles. В ней расположен CSS-код выделенного элемента.

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

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

Способы перемещения по коду

Возможны два таких способа.

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

Для переключения режимов перемещения используется самая левая кнопка.

Редактирование кода

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

Чтобы редактировать код, нужно сделать двойной щелчок на соответствующем теге, атрибуте, CSS-селекторе или его значении. Элемент выделится и его можно редактировать.

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

Выделение столбиком

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

Тестирование адаптивной верстки

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

Кодирование изображения в Base64

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

  1. Переходим на вкладку Network
  2. Нажимаем img
  3. Нажимаем клавишу F5
  4. Выбираем нужную картинку
  5. Щелкаем правой кнопкой по ней и выбираем Копировать data URL
  6. Переходим на вкладку Console и вставляем скопированное
  7. Появляется код, которым можно заменить нашу картинку

Секретная фишка

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

Недостатки

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

А пока для наглядности предлагаю посмотреть видео:

Сегодня я познакомил вас с одним из инструментов, полезных для веб-разработки, но таких инструментов много, поэтому команда WebForMyself разработала новый курс «Инструменты Front-End разработчика» . Если вы занимаетесь созданием сайтов, то вам этот курс будет наверняка интересен и полезен. Вот ссылка на курс

Инструменты Front-End разработчика

Надеюсь, и моя статья была вам полезна. Если так, не забудьте поделиться ей в cоцсетях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Просмотрев кэшированную страницу в 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.

Топ-пост этого месяца:  Yii2 как убрать web из адреса URL

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 помогут сделать вашу жизнь проще!

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

Как создать расширение для Chrome за 10 минут

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

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

В этом уроке я собираюсь показать, как создать базовое расширение для Chrome, затратив на это около 5 минут — без шуток!

Что мы собираемся разрабатывать

Я одержим заботой о скорости моего сайта, http://simpleprogrammer.com , так что я часто использую такие сайты как GTmetrix , чтобы проверить скорость сайта.

Также я часто проверяю другие сайты, чтобы сравнивать.

Было бы неплохо иметь расширение для Chrome, которое позволяло бы, используя GTmetrix, проверить скорость сайта, который вы в данный момент просматриваете, просто нажав кнопку?

Я проверил Chrome Web Store и не нашел подобного расширения, так что именно это мы и реализуем.

Что такое расширение для Google Chrome

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

На самом базовом уровне расширение Chrome — это набор HTML, CSS и JavaScript-файлов, позволяющий добавить некоторую функциональность в Chrome через JavaScript API, который предоставляет браузер. По сути, расширение — это веб-страница в Chrome, имеющая доступ к некоторым дополнительным API.

В этом уроке я собираюсь показать вам, как создать базовое расширение Chrome, которое называют Browser Action. Этот вид расширения добавляет в панель инструментов Chrome кнопку, нажатие на которую показывает HTML-страницу. Также такие расширения позволяют выполнять какой-либо JavaScript-код.

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

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

Шаг 1: Создание проекта

Первое, что мы должны сделать, это создать проект и все файлы, которые нужны для нашего расширения. Давайте начнем с создания нового каталога, который мы назовем «GTmetrix Extension». В этот каталог мы поместим все файлы, которые нужны для расширения. Chrome позволяет загрузить плагин, указав директорию, содержащую файлы с расширением.

Все расширения Chrome требуют наличия файла манифеста. Файл манифеста сообщает браузеру все, что нужно для загрузки расширения. Создадим файл manifest.json в директории проекта. Оставим пока его пустым.

Далее нам потребуется иконка для нашего расширения. Это должен быть PNG-файл 19×19px. Можно взять пример иконки .

Далее создадим HTML-страницу, которая будет отображаться при нажатии на иконку. ДЛя этого добавим файлы popup.html и popup.js в директорию проекта «GTmetrix Extension».

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

Шаг 2: Создание файла манифеста

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

Откройте файл manifest.json и добавьте в него следующий код:

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

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

Шаг 3: Создание интерфейса

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

Наш интерфейс будет очень простым, содержащим заголовок «GTmetrix Analyzer» и кнопку, по которой пользователь сможет проанализировать текущую страницу.

Откройте popup.html и добавьте следующий код:

В HTML-файле мы подключаем скрипт popup.js. В этом скрипте будет реализована логика нашего расширения, которая будет выполняться при нажатии на кнопку с id checkPage.

Шаг 4: Реализация логики

Последняя вещь, которую нам необходимо будет сделать, это реализация логики, которая должна выполняться при нажатии на кнопку «Check this page now!».

Нам нужно добавить обработчик события click для кнопки checkPage. При нажатии на эту кнопку будет создаваться новая форма, содержащая URL текущей страницы, и отправляться в GTmetrix.

Откройте popup.js и добавьте следующий код:

Большую часть кода для создания и отправки формы я взял из букмарклета, предоставленного на сайте GTmetrix, и просто немного изменил код, чтобы передать URL текущей вкладки.

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

Тестирование

Проверить новое расширение очень просто. Для этого введите «chrome://extensions» в адресной строке браузера, чтобы перейти на страницу расширений.

На этой странице включите галочку «Developer mode», чтобы разрешить загрузку расширений из исходников. И далее нажмите кнопку «Load unpacked extension» или просто перетащите директорию с расширением на эту страницу. Вы должны увидеть, что новая иконка добавилась в панель инструментов браузера.

Чтобы проверить расширение, откройте страницу, которую вы хотите проанализировать в GTmetrix. Нажмите на иконку расширения в панели инструментов, далее нажмите на кнопку «Chech this page now!». Вы должны увидеть результат анализа на текущей вкладке.

И это все! Если у вас есть какие-либо проблемы или вопросы, не стесняйтесь задавать. Я надеюсь, что такого введения в создание расширений для Chrome достаточно, чтобы вы начали разрабатывать собственные расширения.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

6 расширений Google Chrome для дизайнеров и веб-разработчиков

6 расширений Google Chrome для дизайнеров и веб-разработчиков

Сохраните себе, чтобы не потерять!

1. Web Developer

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

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

3. HTML Validator

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным.

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы.

5. Chrome Palette

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения.

Очень полезное расширение для Google Chrome. What Font позволяет разработчикам и дизайнерам определить, какие шрифты используются на веб-странице.

Найдены возможные дубликаты

Этот пост опоздал на много лет, все перечисленное уже давно встроено в дефолтный Developer Tools.

В каком архиве статью откопал?

Уууупс, и меня поглотила временная аномалия, отбросив год так в 2010, когда эти расширения были актуальны.

Штука действительно крутая! Очень радует адекватный редактор css и js в браузере, работа с кэшем и куками, проверка адаптива сразу на все экраны (правда косячить начало с последних 3х обновлений), да и валидаторы уже встроены в него

Хрень какая, актуальность поста — 10 лет

чувак, да ты упоролся.

правая кнопка мыши «посмотреть код» на элементе

уже лет как 5 действует.

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

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

нормальный верстала сразу строит каркас под СЕО-оптимизацию и абсолютно похеру сколько процентов соответствия выдаст валидатор. Хром, Фокс и Оперу держит — и норм.

Можно ссылку на статью о «Каркасе под СЕО-оптимизацию»?

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

а валидатор свой засунь в жопу его бесполезным разработчикам. эта ваша валидность верстки была модна где-то лет 7 назад. сейчас на дворе 2020 и всем насрать насколько сайт косоежит в ИЕ или насколько он несоответствует их странным представлениям о структуре верстки.

Вы не правы! Если вы руководствуетесь статьёй по ссылке, то там вот что написано:

Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.

Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.

Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта. Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.

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

Из изменений — только поддержка не ниже IE10, в остальном же требования не поменялись. А то, что прогер (скорее всего верстальщик) не может что-то реализовать в для ослика, то это проблемы специалиста, а не чьи то ещё. Просто все современные фронтенды жизни не могут представить без билиотек и всяких свисто-перделок, которые появились совсем недавно. В нативный js и адекватный css уже не могут! Встречал чела, который не мог эл-ты выровнять по вертикали без flex’а. И это печально.

Вот ответь на вопрос, пожалуйста. Я, скорее всего, многого в этом не понимаю, но нашему верстальщику 50 лет, он говорит, что опыт у него 20 лет почти в разработке сайтов.

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

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

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

Есть молодые и «горячие» верстальщики, сввоеобразные хипстеры, которые ни строчки кода написать на js не могут, а всё на библиотеках решают (вызов библиотеки по ммнуалу не считается за написание кода). Они даже не до конца догоняют, как работает @media в css. Чаще всего эти люди хвастаются HTML5 и SCSS, при этом растыкивая section, header и footer не думая, зачем они нужны, а их исходники SCSS смотреть страшно. У этих специалистов фронтенд будет нормально работать только на последних версиях браузеров и на ПК, где не меньше 4 ГБ ОЗУ, т.к. скриптов там тьма-тьмущая.

А есть старики, которые застряли, в лучшем случае, в 2005 году и для них использование «новомодных» инструментов сродни сатанизму. Такие товарищи редко могут в адаптив, не приветствуют анимацию и псевдоклассы в css, а использование jQuery вызывает расстройство кишечника.

Так вот первые — делают красиво, но вёрстка не пройдёт валидацию, а скрипты конфликтуют друг с другом и дико грузят клиента (ониж на маках все сидят, такие модные)

Вторые же «на лицо ужасные — добрые внутри». Их код валиден, с какой стороны не подойди, но выглядит продукт убого и слабо вписывается в нынешний веб.

Лично моё мнение — держать нужно золотую середину. Об использовании каждой библиотеки думать несколько раз. Не нужно тянуть весь Бутстрап ради грида и фотмочек. Но и в каменный век отходить не нужно, отказываясь от более современных «примочек» (например, того же html5)

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

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

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