VDS Хостинг для Ваших проектов

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

Май 7th, 2012 Рубрики: Браузеры и расширения

Этот пост будет продолжением обзора браузера Google Chrome, как и планировалось. В нём я хотел бы обратить внимание на инструменты разработчика Google Chrome (Developers Tools). Считаю, что будет нехорошо не уделить этому средству для веб-разработчиков хотя бы небольшого внимания. Ведь этот браузер предоставляет для веб-мастеров поистине ценные и важные средства, с помощью которых можно значительно улучшить и усовершенствовать работу ваших страниц, скриптов, найти и устранить множество ошибок, управлять визуальным отображением страниц и т.п. Единственное, что может стать препятствием на пути к активному применению этих инструментов – пожалуй неумение ими пользоваться и даже отсутствие знаний о том, что можно сделать.

Прежде чем перейти к описанию самого интерфейса, хотелось бы ещё остановиться на таком вопросе: как определить браузер Google Chrome? Такое может потребоваться, если нужно написать специальный код именно для него, или наоборот – сообщить пользователю, что нужен другой браузер, или может использовать специальные возможности, присущие именно ему. Определить, что пользователь использует браузер Chrome можно следующим образом:

if (navigator.userAgent.toLowerCase().indexOf("chrome")>-1) {
//здесь код для Хрома}
else {
//код, если не Хром
}
или вот так:
if (window.chrome) {
//это браузер Хром}
else {
//это другой браузер
}
И ещё один полезный код, чтобы определить версию Chrome:
var chromever=/Chrome\/[0-9+\.]+\b/i.exec(navigator.appVersion)[0].substring(7);
В переменной получим версию в виде строки, которую можно уже парсить узнавая подверсии. Такой "сложный" код нужен, потому что само свойство appVersion содержит и версию ОС и Хрома и AppleWebKit.

Итак, чтобы открыть инструменты разработчика в Google Chrome на любой странице достаточно нажать комбинацию клавиш Ctrl+Shift+J. Снизу появляется собственно весь инструментарий, разбивая всё окно как бы на два фрейма. Он правда весь на английском языке, но это не столь важно. В верхней части имеется панель кнопок, с помощью которых можно переключаться на конкретный инструмент. Справа от них имеется поле поиска, служащее для нахождения в коде страницы тэгов и других узлов. А в самом низу находится консоль Google Chrome. В ней собраны все предупреждения, и ошибки, произошедшие во время загрузки страницы. При первом тестировании страницы в неё следует смотреть в первую очередь, ибо очень быстро обнаружите незагруженные скрипты, код вызывающий критические ошибки, нарушение в структуре документа, как незакрытые тэги и т.д. Вывод записей в консоли можно отфильтровать с помощью кнопок «All» – показывать все события, «Errors» – только ошибки, «Warnings» – предупреждения. Разумеется в первую очередь нужно устранить ошибки, затем уже можно переходить и к предупреждениям и разбирать, важные ли они.

Панель Elements в Developer Tools

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

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

Вкладка Computed Style содержит все применяемые для активного элемента стили, причём с учётом всех переопределений, изменений, наследования и т.д. Показаны имеющиеся в настоящий момент значения. Эквивалент объекту currentStyle. Вкладка Styles содержит правила, под действие которых подпадает выбранный объект. Но в отличие от предыдущей не все они совпадают с реальным временем. На ней можно увидеть как собственные правила, так и наследуемые от родителей, а также их значения. Если правило определено, но неактивно, то оно перечёркнуто. Также зачёркнутыми отображаются стили, которые не поддерживаются браузером Google Chrome и тогда выводится иконка с восклицательным знаком. В другом случае у него справа есть флажок, снятие которого отключает действие конкретного CSS-атрибута, а отметка включает. Прибегая к этому способу можно найти определённое CSS-правило из-за которого неправильно отображается элемент. Более того, значения каждого свойства можно редактировать и сразу наблюдать изменения. Для этого нужно выполнить двойной щелчок по значению свойства и напечатать новое значение. Это указано в анимации выше, но для просмотра оригинального размера откройте в новом окне, а то не все браузеры её воспроизводят так.

Следующая вкладка Metrics схематически показывает размещение элемента и значения его: margin, padding, border. Легко видно значения отступов, границ.

Вкладка Properties тоже очень информативная. В ней выбранный элемент представлен в виде экземпляра объекта DOM-дерева. И видны все доступные его свойства, методы, события и их значения. Например: id, title, innerHTML и т.д. Их тоже можно редактировать.

Breakpoints – содержит точки останова, когда вы их зададите. Это при отладке.

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

Панель Resources в Developer Tools

Этот инструмент подаёт загруженную страницу в виде составляющих: самого файла html, рисунков, стилей css, скриптов, подключенных. А также проводится разбивка на фреймы, если они используются. Все эти компоненты в виде иерархического списка размещены в панели слева, которая напоминает панель проводника Windows. При выборе конкретного компонента, он показывается в правой части. Так достпуны для просмотра кода и редактирования скрипты, таблицы стилей.

Что ещё является инересным здесь – это возможность посмотреть какие файлы cookies установил сайт, страница которого анализируется.

Панель 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» – можно задать выражение (переменную), которую вы хотите наблюдать. В других – задать точки останова, стэк вызовов и другое в этом роде. Честно сказать с этим не работал, так что подробнее ничего не могу сказать.

инструменты разработчика google chrome, панель scripts и отладка скриптов

Панель Timeline в Developer Tools

Это очень полезный инструмент для анализа скорости загрузки страниц сайта. С его помощью можно получить визуальное представление в виде диаграммы, сколько времени затрачено на загрузку и интерпретацию страницы. Как пользоваться Timeline?

  1. Запустить его первым делом и выбрать слева раздел «Timelines» со значком часов.
  2. Нажать внизу на панели кнопку Record ●.
  3. Перезагрузить исследуемую страницу до полной загрузки.
  4. Снова нажать на кнопку "Record", которая уже красного цвета.

Теперь слева в списке Records доступны разные события произошедшие в процессе загрузки и отображения документа. А справа вверху они представлены в виде цветной диаграммы со шкалой времени, показывая какой процесс сколько занял времени. Подробности о каждом событии можно узнать щёлкнув на нём в списке Records. Эта информация появится в виде всплывающей подсказки. События соответствующие загрузке, приёму данных окрашены в синий цвет; исполнение скриптов – в жёлтый; визуальное отображение элементов – в фиолетовый. Таким образом вы можете легко и наглядно видеть, на что тратится больше всего времени при загрузке вашего сайта или не вашего. На синие отрезки повлиять практически невозможно, ибо они зависят от скорости работы хостинга, а вот постараться сократить жёлтые и фиолетовые – это в ваших силах.

инструменты разработчика google chrome, панель timeline

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

Перейдя в раздел «Memory» вам будет доступен график использования памяти данной страницей.

Панель Profiles в Developer Tools

Здесь доступны два инструмента:

  1. «CPU Profiles», посредством которого можно посмотреть затраты процессорного времени на выполнение скриптов страницы.
  2. «Heap Snapshots», предназначен для сбора статистики используемой памяти элементами страницы и скриптами. Сколько памяти какой объект использует.

Панель Audits в Developer Tools

Этот инструмент оценит производительность страницы и сети, а также даст советы по её увеличению. Например: удалить неиспользуемые css-правила, функции javascript, а возможно и целые модули и т.п. Для его запуска надо выбрать нужные аудиты (Web Page Performance) и внизу нажать кнопку Run. Получим результаты с советами.

инструменты разработчика google chrome, панель audits, оценка производительности страницы

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

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

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

Официальная документация по инструментам разработчика браузера Chrome на английском языке.
Понравился пост? Поделись с другими!
Теги: , , ,

Есть 10 коммент. к “Инструменты веб разработчика Google Chrome”

  1. Май 31st, 2012 at 01:54
    1

    Коллега доброе время! С успехами у Вас порядок! Давно общались с друзьями! На хорошем уровне, однако! Реклама наш двигатель! Вас приглашаю в гости на свой сайт, как молодого веб–мастера и друга! Пожелания наилучшие!

    • Июнь 2nd, 2012 at 20:28
      2

      Доброе! Спасибо, как веб-мастера Вы работу предлагаете? Если да, то пишите на почту.

  2. Март 4th, 2014 at 12:52
    3

    А как вызвать есть ли короткая команда?

    • Март 6th, 2014 at 21:20
      4

      В статье же написано:

      Итак, чтобы открыть инструменты разработчика в Google Chrome на любой странице достаточно нажать комбинацию клавиш Ctrl+Shift+J

      Читайте внимательнее. Или можно с контекстного меню.

  3. Сентябрь 22nd, 2015 at 12:05
    5

    Здравствуйте! У меня комбинация клавиш, что вы предлагаете не работает. Хотела в хроме установить это расширение. Видела, как оно появляется в новом окне и показывает код страницы. У меня ничего не получается. Напишите где его взять и как установить? Спасибо.

    • Сентябрь 23rd, 2015 at 19:45
      6

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

  4. Март 9th, 2016 at 12:11
    7

    в хроме не работает просмотр кода элемента – подскажите почему

    • Март 14th, 2016 at 19:26
      8

      А что показывает? Возможно поможет, если открыть в новой вкладке ту же страницу и там посмотреть.

  5. Яна
    Август 15th, 2016 at 17:58
    9

    Здравствуйте. У меня в коде элемента пропала Панель Resources. Через нее я хотела скачать фильм. Теперь этого не могу сделать. Подскажите пожалуйста, как ее вернуть, ну или как без нее по другому скачать.

  6. Shin
    Сентябрь 6th, 2016 at 01:49
    10

    Панель Resources была переименована в панель Application. Все функции доступны.

Написать комментарий

   b2bbonbone