Вредоносное ПО (malware) - это назойливые или опасные программы,...
Здравствуйте, дорогие друзья. Панель (консоль) разработчика в браузере – это незаменимый инструмент для каждого владельца сайта, с помощью которого можно быстро просмотреть html код страницы и css стили. А также узнать об ошибках, возникших при загрузке сайта и проверить сайт на адаптивность.
Именно работу с html кодом, css стилями и адаптивностью в панели разработчика мы сегодня и рассмотрим. Это те инструменты, которые требуются для решения большинства задач.
Для общего понимания картины давайте приведу пример, когда вам может понадобиться панель разработчика.
Допустим, вы пришли на мой блог, и вас заинтересовало, какой я шрифт использую или цвет и так далее. В общем, это может быть любой элемент на сайте. И вы захотели сделать также у себя на сайте.
Тогда вы смотрите через панель разработчика в браузере на нужный элемент, где видны html код и css стили к нему.
Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.
В этом случае тоже можно использовать панель разработчика и посмотреть, как ваша задумка будет выглядеть в браузере. Ведь всё, что вы делаете в панели разработчика видно только вам. А для того чтобы ваши эксперименты увидели посетители, потребуется переносить стили и коды в файлы сайта.
Открытие панели вебмастера и знакомство с интерфейсом
Панель разработчика присутствует в каждом современном браузере. Для того чтобы её открыть нужно нажать на клавиатуре клавишу F12.
Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.
Мне больше нравится панель в браузере Firefox.
Сама панель поделена на две половины и содержит вкладки и инструменты для работы.
В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)» .
Для работы со стилями нужно перейти к разделу панели CSS, где можно добавлять стили или отключать имеющиеся, убрав чекбокс напротив них. Менять можно всё.
Здесь же можно узнать в каком файле находятся стили, и на какой строке.
Как проанализировать html элемент на сайте и узнать его стили css
Давайте рассмотрим пример на моей , которая располагается в каждой статье.
Для того чтобы проанализировать нужный элемент, необходимо нажать на нём правую кнопку мышки, и выбрать пункт меню .
Весь принцип работы с кодом, в панели, заключается в том, что нужно выбрать код html в левом окне, а в правом будут стили для этого элемента.
И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег < div> и закрывающий div> . И в панели это всё хорошо видно.
При копировании или редактировании важно понимать, где блок начинается и где он заканчивается. Допустив здесь малейшую ошибку можно нарушить всю вёрстку шаблона.
В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.
Как скопировать код html из панели в файлы сайта
Идей для применения панели разработчика может быть много. Поэкспериментировав в панели, полученный результат нужно перенести в файлы сайта. И тут есть некоторая трудность. Дело в том, что в панели отображается html код, а большинство современных сайтов, в том числе и на платформе WordPress, созданы с помощью языка программирования PHP. А это, как небо и земля.
Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.
Для этого нужно открываю панель разработчика, исследуя нужный элемент. Определив начало блока ДИВ, нажимаете правую кнопку мушки и выбираете пункт меню «Копировать внешний HTML»
Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.
Процесс этот описывать достаточно сложно, поэтому предлагаю посмотреть видеоурок, в котором всё подробно рассказано и показано.
Как перенести стили из панели разработчика в файлы сайта
После того как вы определились с кодом и стилями можно приступать к переносу их в файлы сайта. Так как пока все эти изменения видны только вам в браузере и, если обновить страницу, то все изменения исчезнут.
, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.
Как проверить адаптивность шаблона в панели разработчика
Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.
Заключение
В этой статья я рассмотрел не все инструменты панели разработчика, а лишь те, которые могут пригодиться и используются многими вебмастерами чаще всего.
Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.
Берите инструмент на вооружение, он вам пригодится ещё много раз.
Если же остались вопросы, буду рад ответить на них в комментариях.
Друзья, желаю вам успехов. До встречи в новых статьях.
С уважением, Максим Зайцев.
- Перевод
Сегодня Google Chrome является самым популярным браузером среди веб разработчиков. С быстрым, шести недельным, циклом релизов и мощным набором постоянно расширяющихся инструментов разработчика, превратившим браузер в инструмент, который вы обязаны иметь. Большинство из вас, вероятно, знакомы со многими его функциями, такими как «живое» редактирование CSS, используя консоль и отладчик. В этой статье мы с вами рассмотрим 15 захватывающих советов и хитростей, которые позволят улучшить вашу производительность еще больше.
1. Быстрая смена файлов
Если вы пользовались Sublime Text, то вы, вероятно, не сможете жить без «Go to anything» (Примечание переводчика: для пользователей Idea эта функция называется «Searching Everywhere» и вызывается двойным нажатием клавиши Shift). Вы будете счастливы узнать, что аналогичная функция есть в инструментах разработчика. Нажмите Ctrl + P (Cmd + P для пользователей Mac) когда открыта панель разработчика, что бы быстро найти и открыть любой файл в вашем проекте.2. Поиск в исходном коде
Но что если вы хотите искать в исходном коде? Для поиска во всех загруженных файлах на странице нажмите Ctrl + Shift + F (Cmd + Opt + F). Этот метод поиска, так же, поддерживает поиск по регулярному выражению.
3. Переход к строке
После того как вы открыли файл во вкладке Sources, инструменты разработчика позволяют перейти к любой строке этого файла. Для этого нажимаем Ctrl + G для Windows и Linux (или Cmd + L для Mac), и введите номер строки.
Еще один способ, это нажать Ctrl + O, но вместо текста для поиска ввести ":" и номер строки (Примечание переводчика: а можно пойти еще дальше и ввести имя файла и номер строки используя ":" как разделитель между ними, при этом вводить имя файла полностью совершенно не обязательно, это же поиск).
4. Выборка DOM элементов с помощью консоли
Консоль инструментов разработчика поддерживает несколько полезных «магических» функций и переменных для выборки DOM:- $() - эквивалентно document.querySelector(). Возвращает первый элемент, соответствующий селектору CSS, например, $ ("DIV") вернет первый элемент DIV на странице.
- $$ () - эквивалентно document.querySelectorAll (). Возвращает список элементов (Примечание переводчика: а именно NodeList), которые соответствуют данному CSS селектору.
- $0 - $4 - история пяти последних элементов DOM, которые вы выбирали во вкладке Elements, где $0 будет последним.
Узнать больше функций консоли можно .
5. Использование нескольких кареток и выделений
При редактировании файла вы можете установить несколько кареток, удерживая Ctrl (Cmd для Mac) и нажав, там где вам нужно, таким образом, вы можете устанавливать каретки во многих местах одновременно.
6. Preserve Log
При включении параметра Preserve Log на вкладке Console, результаты будут сохранять, а не очищаться при каждой загрузке страницы. Это удобно если вы хотите просмотреть историю ошибок, которые появляются перед уходом со страницы.
(Примечание переводчика: аналогичное свойство есть на вкладке Network. При его включении история запросов перестает очищаться при переходах между страницами. Однако, если на странице была установлена переадресация с помощью JavaScript и выполнялся любой другой запрос, то практически всегда просмотреть результат этого запроса невозможно. Не забывайте отключать подобные свойства при долгой отладке! Инструменты разработчика практически всегда потребляют больше системных ресурсов чем сама страница!)
7. Прихорашивание минимизированных исходников
Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.
(Примечание переводчика: порой не хватает возможности включения этого свойства автоматически, как например это сделано в FireFox)
8. Режим устройства
Инструменты разработчика включают в себя мощный режим для разработки страниц оптимизированных под мобильные устройства. В этом видео от Google демонстрируется большинство его дополнительных функций, таких как изменение разрешения экрана, эмуляция прикосновения к сенсорному экрану и эмуляция низкокачественного сетевого соединения.9. Эмуляция датчиков устройства
Еще одной крутой особенностью режима устройства является возможность имитации датчиков мобильных устройств, таких как сенсорные экраны и акселерометры. Вы даже можете указать ваши географические координаты. Объект расположен в нижней части вкладки Elements в Emulation -> Sensors.
10. Выбор цвета
При выборе цвета в редакторе стилей вы можете кликнуть по образцу цвета и появится окно выбора цвета. Пока это окно открыто ваш указатель мыши превращается в увеличительную лупу для выбора цвета, на странице, с точностью до пикселя.
11. Принудительное состояние элемента
Инструменты разработки позволяют симулировать такие CSS состояния DOM элемента как:hover и:focus, упрощая написание стилей для них. Это функция доступна в редакторе свойств CSS.
12. Отображение shadow DOM
Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.
13. Выбрать следующее вхождение
Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, дополнительно выделится следующее вхождение текущего слова, позволяя вам редактировать их одновременно.
14. Изменение формата цвета
С помощью Shift + Click по образцу цвета, в панеле редактирования CSS, формат цвета будет изменен на RGBA, HSL шестнадцатеричный (Примечание переводчика: при этом как шестнадцатеричную сокращенную форму, так и полную, и даже в заглавном регистре. Если вас и это не устроит, то браузер постарается найти данный цвет в списке стандартных цветовых констант. Единственным недостатком данной возможности является то, что для того что бы выбрать нужный формат, зачастую, приходится «проклацать» все другие возможные варианты).
15. Редактирование локальных файлов в рабочей области
Рабочие области - мощнейший инструмент панели разработчика, превращающий инструменты разработчика в IDE. Рабочая область содержит структуру файлов во вкладке Sources соответственно структуре вашего локального проекта, так что теперь вы можете редактировать и сохранять напрямую, без необходимости копировать и вставлять изменения во внешний текстовый редактор.Что бы настроить рабочие области, перейдите во вкладку Sources (Примечание переводчика: включите панель навигации если она скрыта, для этого нажмите на кнопку Show navigator в левом верхнем углу вкладки) и щелкните правой кнопкой мыши в любом месте панели навигатора, или просто перетащите всю вкладку проекта в панель разработчика. Теперь, выбранная папка, её подкаталоги и все файлы в них будут доступны для редактирования независимо от того, на какой странице вы находитесь. Для еще большего удобства, вы можете использовать файлы которые используются на данной странице, что позволит редактировать и сохранять их.
UPD. Примечание переводчика:
Добавленная папка будет доступна со всех вкладок. По этому если в вашем проекте больше одного HTML файла, то достаточно будет открыть его в соседней вкладке браузера.
Вы можете узнать больше о рабочих пространствах
Всем привет.
Надыбал я более продвинутую версию моей статьи по средствам web-разработчика в Google Chrome. Браузер популярный потому и средства его востребованы. Более того совсем недавно Google раздавал полезное расширение для оптимизации html-страниц. Но сейчас Google передумал и такая оценка доступна только онлайн.
Ниже пост автора по имени Akkad .
Этот пост был продолжением обзора самого браузера Google Chrome. В нём я хотел бы обратить внимание на инструменты разработчика Google Chrome (Developers Tools). Считаю, что будет нехорошо не уделить этому средству для хотя бы небольшого внимания. Ведь этот браузер предоставляет для веб-мастеров поистине ценные и важные средства, с помощью которых можно значительно улучшить и усовершенствовать работу ваших страниц, скриптов, найти и устранить множество ошибок, управлять визуальным отображением страниц и т.п. Единственное, что может стать препятствием на пути к активному применению этих инструментов – пожалуй неумение ими пользоваться и даже отсутствие знаний о том, что такое существует.)
Прежде чем перейти к описанию самого интерфейса, хотелось бы ещё остановиться на таком вопросе: как определить браузер Google Chrome?
Такое может потребоваться, если нужно написать специальный код именно для него, или наоборот – сообщить пользователю, что нужен другой браузер, или может использовать специальные возможности, присущие именно ему. Определить, что пользователь использует браузер Chrome можно следующим образом:
if (navigator.userAgent.toLowerCase().indexOf("chrome")>-1) {
//код, если не Хром
или вот так:
if (window.chrome) {
//это браузер Хром}
//это другой браузер
и даже версию:
var chromever=/Chrome\/+\b/i.exec(navigator.appVersion).substring(7);
В переменной получим версию в виде строки, которую можно уже парсить узнавая подверсии. Такой "сложный" код нужен, потому что само свойство appVersion содержит и версию ОС и Хрома и AppleWebKit.
Итак, чтобы открыть инструменты разработчика в Google Chrome на любой странице достаточно нажать комбинацию клавиш Ctrl+Shift+J. Снизу появляется собственно весь инструментарий, разбивая всё окно как бы на два фрейма. Он правда весь на английском языке, но это не столь важно. В верхней части имеется панель кнопок, с помощью которых можно переключаться на конкретный инструмент. Справа от них имеется поле поиска, служащее для нахождения в коде страницы тэгов и других узлов. А в самом низу находится консоль Google Chrome. В ней собраны все предупреждения, и ошибки, произошедшие во время загрузки страницы. При первом тестировании страницы в неё следует смотреть в первую очередь, ибо очень быстро обнаружите не загруженные скрипты, код вызывающий критические ошибки, нарушение в структуре документа, как незакрытые тэги и т.д. Вывод записей в консоли можно отфильтровать с помощью кнопок «All» – показывать все события, «Errors» – только ошибки, «Warnings» – предупреждения. Разумеется в первую очередь нужно устранить ошибки, затем уже можно переходить и к предупреждениям и разбирать, важные ли они.
Панель Elements в Developer Tools.
Это пожалуй самая важная и самая простая секция. В рабочем пространстве слева показан исходный код страницы с подсветкой синтаксиса. Причём не только исходный, отражающий реальную DOM-структуру документа, включая и элементы созданные динамически, которые при обычном просмотре исходного кода не видны. Всё организовано в виде многоуровневого списка, т.е. при нажатии на можно увидеть все вложенные элементы (потомки) данного. Путь до выбранного тэга отображается под кодом (прямо над консолью). А вот справа отображены все свойства сгруппированные по категориям выбранного в данный момент элемента. Причём когда вы подводите мышку на определённый тэг, он выделяется на странице по своему размеру и этот актуальный размер показывается в виде подсказки. Таким образом вы можете тщательно наблюдать, нужные ли размеры принимают блоки на странице, а также найти проблемный, который отображается не так как надо.
Вкладка Computed Style содержит все применяемые для активного элемента стили, причём с учётом всех переопределений, изменений, наследования и т.д. Показаны имеющиеся в настоящий момент значения. Эквивалент объекту currentStyle. Вкладка Styles содержит правила, под действие которых подпадает выбранный объект. Но в отличие от предыдущей не все они совпадают с реальным временем. На ней можно увидеть как собственные правила, так и наследуемые от родителей, а также их значения. Если правило определено, но неактивно, то оно перечёркнуто. Также зачёркнутыми отображаются стили, которые не поддерживаются браузером Google Chrome и тогда выводится иконка с восклицательным знаком. В другом случае у него справа есть флажок, снятие которого отключает действие конкретного CSS-атрибута, а отметка включает. Прибегая к этому способу можно найти определённое CSS-правило из-за которого неправильно отображается элемент. Более того, значения каждого свойства можно редактировать и сразу наблюдать изменения. Для этого нужно выполнить двойной щелчок по значению свойства и напечатать новое значение. Это указано в анимации выше, но для просмотра оригинального размера откройте в новом окне, а то не все браузеры её воспроизводят так.
Следующая вкладка Metrics схематически показывает размещение элемента и значения его: margin, padding, border. Легко видно значения отступов, границ.
Вкладка Properties тоже очень информативная. В ней выбранный элемент представлен в виде экземпляра объекта DOM-дерева. И видны все доступные его свойства, методы, события и их значения. Например: id, title, innerHTML и т.д. Их тоже можно редактировать. Breakpoints – содержит точки останова, когда вы их зададите. Это при отладке.
Панель Resources в Developer Tools.
Этот инструмент подаёт загруженную страницу в виде составляющих: самого файла html, рисунков, стилей css, скриптов, подключенных. А также проводится разбивка на фреймы, если они используются. Все эти компоненты в виде иерархического списка размещены в панели слева, которая напоминает панель проводника Windows. При выборе конкретного компонента, он показывается в правой части. Так доступны для просмотра кода и редактирования скрипты, таблицы стилей.
Панель Networks в Developer Tools.
В этом разделе показываются все запросы, выполненные при загрузке данной страницы и её компонентов.
Столбец «Method» содержит тип запроса (GET,POST).
«Status» – ответ сервера, в идеале должен быть 200 ОК. Здесь важно обратить внимание на ошибочные 404 и 403, которые следует устранить. Их причинами могут быть неверные адреса (атрибуты src). Редиректы 301 и 302 также желательно устранить, чтобы уменьшить общее число запросов, а значит и скорость загрузки сайта.
«Type» – тип содержимого, например для веб-документов должно быть text/html.
«Size/Content» – размер каждого запрошенного компонента.
«Time/Latency» – время загрузки.
Эту информацию можно проверить также через HandyCache. В общем с помощью инструмента Networks вы можете оценить и проанализировать работу сервера, а также размеры ваших файлов. Постараться уменьшить где это возможно для уменьшения нагрузки на сервер. Разумеется также обнаружить и устранить возможные ошибки.
Панель Scripts в Developer Tools.
Она очень похожа на Elements, только предназначена для анализа и отладки скриптов. Выбрать конкретный скрипт можно из списка всех загруженных слева вверху. Сразу в окне слева отображается его код. Панель справа по виду и структуре такая как в Elements, но со специализированными вкладками. «Watch Expression» – можно задать выражение (переменную), которую вы хотите наблюдать. В других – задать точки останова, стек вызовов и другое в этом роде.
Панель Timeline в Developer Tools.
Это очень полезный инструмент для анализа скорости загрузки страниц сайта. С его помощью можно получить визуальное представление в виде диаграммы, сколько времени затрачено на загрузку и интерпретацию страницы.
Как пользоваться Timeline?
1.Запустить его первым делом и выбрать слева раздел «Timelines» со значком часов.
2.Нажать внизу на панели кнопку Record ●.
3.Перезагрузить исследуемую страницу до полной загрузки.
4.Снова нажать на кнопку "Record", которая уже красного цвета.
Теперь слева в списке Records доступны разные события произошедшие в процессе загрузки и отображения документа. А справа вверху они представлены в виде цветной диаграммы со шкалой времени, показывая какой процесс сколько занял времени. Подробности о каждом событии можно узнать щёлкнув на нём в списке Records. Эта информация появится в виде всплывающей подсказки. События соответствующие загрузке, приёму данных окрашены в синий цвет; исполнение скриптов – в жёлтый; визуальное отображение элементов – в фиолетовый. Таким образом вы можете легко и наглядно видеть, на что тратится больше всего времени при загрузке вашего сайта или не вашего. На синие отрезки повлиять практически невозможно, ибо они зависят от скорости работы хостинга, а вот постараться сократить жёлтые и фиолетовые – это в ваших силах.
Чтобы масштабировать и выделить только некоторый период времени, используйте мышь и ползунки на шкале времени вверху. Внизу будут в увеличенном масштабе отображаться только события из этого периода. Помимо этого внизу можно отключить отображения каждого вида события, сняв соответствующий флажок.
Перейдя в раздел «Memory» вам будет доступен график использования памяти данной страницей.
Панель Profiles в Developer Tools.
1.«CPU Profiles», посредством которого можно посмотреть затраты процессорного времени на выполнение скриптов страницы.
2.«Heap Snapshots», предназначен для сбора статистики используемой памяти элементами страницы и скриптами. Сколько памяти какой объект использует.
Панель Audits в Developer Tools.
Этот инструмент оценит производительность страницы и сети, а также даст советы по её увеличению. Например: удалить неиспользуемые css-правила, функции javascript, а возможно и целые модули и т.п. Для его запуска надо выбрать нужные аудиты (Web Page Performance) и внизу нажать кнопку "Run". Получим результаты с советами.
Кажется всё, о чём хотел написать. Надеюсь материал этого поста об инструментах для web- разработчиков Google Chrome стал или станет для вас полезным и сможете применять его на практике. Если есть чем дополнить или критиковать, комментарии к вашим услугам. Выразить благодарность можно поделившись постом в социальных сетях или ссылкой со своих сайтов.
Многие из нас тратят сотни и тысячи долларов на сервисы, которые помогают автоматизировать и упростить повседневную работу. Но в нашем распоряжении есть отличный бесплатный набор средств для SEO – инструменты разработчика (DevTools) в браузере Chrome. С его помощью можно проверить самые важные и фундаментальные для поисковой оптимизации аспекты любой страницы.
В Chrome DevTools есть несколько очень удобных приложений, которые пригодятся при проведении SEO-анализа. Ниже мы рассмотрим их подробнее.
Для начала откройте страницу, которую вы хотите проверить, в браузере, а затем – панель инструментов разработчика. Для этого перейдите в меню Chrome, расположенное в правом верхнем углу экрана, и выберите «Дополнительные инструменты » -> «Инструменты разработчика ».
Вы также можете использовать сочетания клавиш: Ctrl+Shift+I (для Windows) или Cmd+Opt+I (для Mac).
Ещё один вариант – кликнуть правой кнопкой мыши по странице, которую вы хотите проверить, и в появившемся меню выбрать пункт «Просмотреть код» .
Теперь можно приступить к аудиту.
1. Проверка основных элементов контента страницы
В настоящее время Google способен сканировать и индексировать JavaScript-контент, однако он не всегда делает это корректно. Поэтому необходимо проверять основные элементы содержимого страницы – тайтл, метаописание и текст. Это значит, что нужно не только анализировать HTML-код, но и проверять DOM. Таким образом вы сможете увидеть, как эта информация будет визуализирована и идентифицирована Google.
Просмотреть DOM любой страницы можно на вкладке «Elements» панели Инструментов разработчика.
Проверяйте эту вкладку, чтобы убедиться, что вся необходимая информация доступна для Google.
К примеру, в левом верхнему углу на скриншоте ниже мы видим, что отображаемый основной текст (в красной рамке) заключен в тег
. Но на самом деле он написан с помощью JavaScript, код которого мы можем увидеть в правом верхнем углу скриншота, где открыт код страницы.
Сравнивая эти различия, вы сможете проверить, правильно ли выполняется индексация. Для этого можно:
- просмотреть версию страницы, сохранённую в кэше Google;
- посмотреть, показывается ли текст в результатах поиска Google;
- использовать «Сканер Google для сайтов» в Search Console и т.д.
2. Просмотр контента, скрытого при помощи CSS
Google не учитывает текстовый контент, который включен в HTML-код страницы, но при этом скрыт для пользователя под вкладками, пунктами меню или ссылками «Нажмите, чтобы прочитать».
Один из самых распространённых способов скрыть текст – использовать свойства CSS «display:none» или «visibility:hidden». Поэтому рекомендуется проверять, нет ли на страницах сайта важной информации, которая скрыта при помощи этих средств.
Сделать это можно с помощью функции «Search» на панели инструментов разработчика. Получить доступ к ней можно с помощью сочетания клавиш: Ctrl + Shift + F (для Windows) или Cmd + Opt + F (для Mac), когда панель DevTools открыта.
Эта функция позволяет выполнить поиск не только по файлу открытой страницы, но и по всем используемым ресурсам, включая CSS и JavaScript.
Чтобы найти скрытый текст, нужно ввести в строку поиска требуемые свойства. В данном случае – «hidden» или «display:none». Так вы сможете узнать, содержатся ли они в коде страницы.
Нажмите на результат поиска, чтобы посмотреть полный код, окружающий свойство, которое вы ищете. Изучите этот код, чтобы выяснить, какой текст скрыт. Если это важный контент, проверьте, учитывается ли он Google.
3. Проверка альтернативного текста изображений
Помимо проверки основных элементов текстового содержимого, на вкладке «Elements» вы также сможете просмотреть описание изображений – текст, который содержится в атрибуте alt. Кликните правой кнопкой мыши на нужную картинку и выберите пункт «Просмотреть код» :
4. Проверка конфигурации тегов
Chrome DevTools также можно использовать для проверки технической конфигурации страниц. К примеру, тегов и атрибутов. Для этого нужно ввести в строку «Search» нужные теги и проверить, как они реализованы.
С помощью инструментов разработчика можно проверить конфигурацию тегов не только в блоке
, но и в заголовках HTTP. Для этого нужно перейти на вкладку «Network» панели, выбрать нужную страницу или ресурс и проверить содержимое заголовка, включая наличие link rel=canonical в файле изображения:
5. Просмотр статуса HTTP в конфигурации заголовка
При проверке конфигурации заголовков страниц и ресурсов на вкладке «Network» вы также сможете посмотреть статуc HTTP, проверить наличие редиректов, узнать их тип, найти статусы ошибок и включения других конфигураций (X-Robots-Tag, hreflang или vary: user agent).
6. Проверка оптимизации для мобильных устройств
На сегодняшний день оптимизация сайта для мобильных устройств – неотъемлемая часть работы по поисковой оптимизации. Проверить мобильную конфигурацию страницы и контента можно, используя режим эмуляции мобильных устройств в DevTools – « Device Mode» . Для перехода в него нужно нажать на иконку устройства в правом верхнем углу панели или же использовать сочетание клавиш: Command+Shift+M (Mac) или Ctrl+Shift+M (Windows, Linux), когда панель открыта.
В режиме «Device» можно выбрать адаптивный видовой экран или конкретное устройство для проверки страницы. Если нужное устройство отсутствует в списке, его можно будет добавить с помощью опции «Edit».
7. Проверка времени загрузки страницы
Анализируйте время загрузки страницы, эмулируя условия сети и используемое устройство. Для этого перейдите в меню кастомизации DevTools, которое находится в правом верхнем углу панели, выберите пункт «More tools» , а затем – «Network Conditions» .
На открывшейся панели вы найдёте поля «Caching» , «Network throttling» и «User agent» .
Задав нужные настройки, перезагрузите страницу и перейдите на вкладку «Network» . Здесь вы увидите не только полное время загрузки страницы, но и когда была загружена исходная разметка (DOMContentLoaded). Эта информация появится внизу окна. Вы также сможете посмотреть время загрузки и размеры каждого используемого ресурса и записать эту информацию, нажав на красную кнопку в левой части панели.
Кроме того, вы можете сделать скриншоты рендеринга страницы, используя опцию «Filmstrip» . Нажав на иконку камеры и перезагрузив страницу, вы сможете просмотреть её скриншоты на разных стадиях процесса загрузки. Таким способом вы сможете узнать, что видят пользователи на каждом этапе.
8. Выявление ресурсов, блокирующих визуализацию
Вы также можете использовать данные по загрузке ресурсов на вкладке «Networks» , чтобы узнать, какие JS и CSS-ресурсы загружаются перед DOM и, возможно, блокируют его. Это одна из самых распространённых проблем, влияющих на скорость загрузки страницы. Просмотреть CSS или JS-ресурсы можно, нажав на соответствующий переключатель:
9. Поиск небезопасных элементов на странице во время перехода на HTTPS
Инструменты разработчика Chrome также могут сослужить хорошую службу во время перехода на HTTPS. С помощью вкладки «Security» можно будет найти небезопасные элементы на любой странице. Здесь вы сможете посмотреть, насколько страница безопасна и есть ли у неё валидный HTTPS-сертификат, проверить тип соединения и наличие смешанного содержимого.
10. Проверка AMP
DevTools также можно использовать для проверки AMP-страниц. Для этого добавьте строку «#development=1» в URL страницы, а затем откройте вкладку «Console» . Здесь вы сможете посмотреть есть ли какие-либо ошибки на странице. Вы также будете видеть, в каких элементах и строках кода они были найдены.
Бонус: персонализируйте настройки DevTools
Возможно, вы захотите персонализировать панель согласно своим предпочтениям: изменить внешний вид, добавить кнопки ярлыки и т.д. Всё это можно сделать в настройках. Нажмите на значок меню в правом верхнем углу панели и выберите пункт «Settings ».
Ещё один совет: сокращённый код нелегко разобрать. Чтобы просмотреть полную версию кода, нажмите кнопку «{}» в центре нижней области панели.
Узнайте, что могут дать Вам инструменты разработчика Chrome DevTools и научитесь использовать весь их потенциал.
Из всех компьютерных дисциплин, связанных с программированием, веб-разработка, безусловно, имеет самый низкий порог вхождения. Практически всё, что нужно для создания простой веб-странички - Блокнот и браузер.
Однако, с усложнением вёрстки уследить за изменениями в коде страниц в обычном Блокноте становится всё сложнее и сложнее. По себе знаю, что начинающий веб-разработчик может потратить не один час, просто пытаясь найти в таблице стилей правило для изменения внешнего вида того или иного элемента...
Можно, конечно, искать наобум, но уже наученные горьким опытом специалисты не полагаются на свою зоркость. Они просто используют специальные инструменты разработчика , которые встроены в большинство браузеров и позволяют быстро проинспектировать код и протестировать те или иные варианты его работы.
Подобие таких инструментов появилось ещё в Internet Explorer. В старой Opera для этих целей использовалась панель Dragonfly и даже имелся собственный встроенный аналог Блокнота с подсветкой кода, что позволяло верстать прямо в среде браузера:
Сегодня от подобной практики отошли и снабдили веб-обозреватели специальными инспекторами кода. Наиболее функциональным инструментарием разработчиков могут похвастаться браузеры на базе движка Chromium, а конкретнее в Google Chrome. На его примере всё и рассмотрим.
Вызов инструментов разработчика и представления страницы
Вызвать инструменты разработчика в Хроме можно несколькими способами:
- Из основного меню . Кликаем по кнопке меню (три точки в правом верхнем углу окна браузера), наводим курсор на выпадающий список "Дополнительные инструменты" и в нём нажимаем пункт "Инструменты разработчика" .
- Горячими клавишами . Для вызова можно нажать кнопку F12 или комбинацию CTRL+SHIFT+I .
- Из контекстного меню (наиболее удобно для инспекции конкретных элементов страницы). Нажимаем правой кнопкой мыши по нужному объекту на веб-страничке и выбираем пункт "Просмотреть код" (или "Исследовать элемент" в некоторых более ранних версиях Хрома).
Панель инструментов разработчика представляет собой набор вкладок, на которых размещены те или иные функциональные модули, а также кнопки управления и настройки. Первым делом стоит обратить внимание на общие кнопки. Слева можно найти кнопку выбора элемента страницы и кнопку выбора представления страницы:
Поведение первой мы ещё изучим, а, что касается второй, то она позволяет эмулировать отображение веб-страницы на экране одного из доступных мобильных устройств (например, 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-команд , введённых пользователем. Явно выполняется первая функция. В выводе консоли все события группируются на три категории с разным цветом фона:
- Белый - "отстуки" об успешно выполненных событиях.
- Жёлтый - предупреждения о возможных некритических ошибках и сбоях.
- Красный - ошибки в выполнении скриптов или в доступе к определённым запрашиваемым ресурсам.
Ошибки и предупреждения содержат в себе краткое описание проблемы и ссылку на файл и строку в нём, которая эту проблему вызывает. Зная точный адрес возникновения неполадки (при условии, что она возникает в файле на Вашем сервере), Вы можете быстро локализовать и устранить ошибку.
Что касается выполнения пользовательского кода, то данная возможность применяется очень часто для быстрой отладки кода и проведения различных экспериментов с JavaScript. Например, при изучении этого языка Вам не всегда нужен отдельный Блокнот или даже полновесная среда разработки. Простенькие скрипты Вы можете выполнять прямо в консоли (тем более, что она поддерживает автодополнение команд).
Для программирования в консоли лучше всего открывать в Хроме несуществующую внутреннюю страницу (например, chrome://blank/) или новую пустую вкладку (chrome://newtab/). Это позволит избежать накладок в выполнении уже работающих на странице скриптов. По сути и всё - можем писать код в консоли и выполнять его нажатием Enter. Единственное, что нужно помнить, для вывода, вместо традиционного "document.write("");", используется конструкция "console.log("");". Вот Вам самый примитивный пример для вывода текстовой строки:
console.log("Мой первый вывод текста в консоли Хрома:)");
Консоль поддерживает ряд спецификаторов, позволяющих явно определить тип вывода (строка/число/элемент DOM/объект JavaScript), выполнить подстановку данных обозначенного типа или применить форматирование:
Вот несколько примеров применения спецификаторов:
*** Пример 1 ***
console.log("Я считаю до пяти: %d, %d, %d, %d, %d \n%s", 1, 2, 3, 4, 5, "Я иду искать!");
*** Пример 2 ***
console.log("%cЭто будет написано большими красными буквами на синем фоне", "color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold");
*** Пример 3 ***
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, 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, то сможете существенно повысить производительность своего труда и улучшить качество создаваемых Вами веб-страниц!
P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.
Рекомендуем почитать
Лучшие программы для восстановления данных с любых носителей информации....
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
