Инструменты разработчика chrome. Датчики эмуляции устройства. Кодирование изображения в Base64

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

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

Здравствуйте, дорогие друзья. Панель (консоль) разработчика в браузере – это незаменимый инструмент для каждого владельца сайта, с помощью которого можно быстро просмотреть html код страницы и css стили. А также узнать об ошибках, возникших при загрузке сайта и проверить сайт на адаптивность.

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

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

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

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

Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.

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

Открытие панели вебмастера и знакомство с интерфейсом

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

Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.

Мне больше нравится панель в браузере Firefox.

Сама панель поделена на две половины и содержит вкладки и инструменты для работы.

В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)».

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

Здесь же можно узнать в каком файле находятся стили, и на какой строке.

Как проанализировать html элемент на сайте и узнать его стили css

Давайте рассмотрим пример на моей форме подписки, которая располагается в каждой статье.

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

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

И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег

и закрывающий

. И в панели это всё хорошо видно.

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

В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.

Как скопировать код html из панели в файлы сайта

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

Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.

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

Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.

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

Как перенести стили из панели разработчика в файлы сайта

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

Затем открываете в новой вкладке административную панель сайта – «Внешний вид» - «Редактор» - файл, отвечающий за стили. Обычно это style.css.

Я же предпочитаю делать все эти манипуляции через ftp-соединение, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.

Как проверить адаптивность шаблона в панели разработчика

Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.

Заключение

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

Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.

Берите инструмент на вооружение, он вам пригодится ещё много раз.

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

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

С уважением, Максим Зайцев.

1zaicev.ru

Режим разработчика в Яндекс Браузере: как включить, зачем нужен

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

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

Для чего нужен режим разработчика

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

Консоль разработчика предоставляет ряд возможностей для настройки и проверки страниц в реальном времени. Среди них:

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

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

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

Активация режима

Как включить режим разработчика? Интерфейс с инструментами включается несколькими способами. Для начала открываем Yandex browser на любой странице.

Первый способ – открыть консоль с инструментами:

В правом верхнем углу веб-обозревателя кликнуть по значку «настройки» (с тремя горизонтальными полосками).
В открывшемся списке выбираем пункт «дополнительно».
Далее нажимаем на «дополнительные «инструменты» («More tools»).
Выбираем нужный инструмент.

Второй способ для тех, кто не хочет открывать консоль с помощью мышки. Для этого можно воспользоваться горячими клавишами для активации требуемого инструмента, причём при любой раскладке клавиатуры и независимо от того, была ли нажата клавиша «Caps Lock»:

Ctrl+U (при русской раскладке – буква «Г») – для просмотра кода страница («View page code»). Чтобы внести изменения, кликаем на кнопку «Править».
Ctrl+Shift+J («О») – для открытия консоли Java («JavaScript console»). Инструменты открываются после нажатия на вкладку «Console».
Ctrl+Shift+I (Ш) – чтобы выбрать инструменты разработчика («Developer tools»).

Инструменты разработчика можно открыть всего одной клавишей – «F12». Далее кликнуть по той же вкладке «Console». На системе Mac инструментарий разработчика включается нажатием Cmd» ⌘, «Option» ⌥ и «I».

Пользоваться консолью могут и разработчики расширений. Для этого нужно:

Открыть яндекс браузер.
Вставить в адресную строку ссылку browser://extensions/ (тот же способ работает и в Chrome).
Перейти по ней.

Вас направят сюда:

Ставим галочку сверху, где написано «Режим разработчика». После этого пользователю предоставляется выбор того, что нужно сделать с расширениями:

Для обновления установленных в браузере расширений нажимаем на «обновить расширения».
Если нужно протестировать его, выбираем опцию «Загрузить распакованное расширение», а затем нажимаем на нужный файл.

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

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

brauzerok.ru

Как включить режим разработчика Android

Иногда чтобы выполнить ряд определенных системных действий на мобильном устройстве на базе Андроид (скажем, установить карту памяти в качестве основного хранилища или включить отладку по USB) требуется режим разработчика Android. Что это такое и с чем его едят, как его активировать и как отключить – обо всех этих насущных вопросах и пойдет речь в сегодняшнем материале на IT блоге LiveLenta.com

Режим разработчика Android предоставляет пользователю дополнительные функции и возможности, которые непременно будут полезными при записи дисплея при использовании команд adb shell, инсталляции кастомного рекавери, восстановлении данных и других задачах. Ассортимент доступных в этом режиме фич действительно огромен. Чтобы посмотреть на него, обязательно стоит взглянуть на все это многообразие самому.

Важное замечание: в последующем будет описана дефолтная схема визуального меню, доступная практически во всех без исключения телефонах: LG, Moto, Nexus, HTC, Sony Xperia, Pixel, Samsung. При тщательном наблюдении можно заметить, что на индивидуальных девайсах (Xiaomi, Meizu, ZTE) соответствующие элементы меню имеют другое название или содержатся в другой иерархической ветке структуры меню. Если вам не удалось найти указанный в инструкции элемент меню тотчас же, изучите раздел «Дополнительно» и аналогичные подкатегории меню.

Как включить режим разработчика Android на телефоне или планшете?

Процедура активации меню на всех гаджетах с Андроид 6, 7 и предыдущих версий на борту выполняется совершенно идентичным образом.

Чтобы получить доступ к режиму разработчика Android, повторите следующие действия:

1. Тапните на иконке Настройки и в нижней части открывшегося меню раскройте ветку «О планшете» либо «О телефоне». В моем случае нужный мне элемент меню получил название «Справка».

3. Наконец, финальным пунктом нашего изучения структуры меню параметров станет опция «Номер сборки». Нажмите на нее 7 раз подряд, и в результате на экране появится надпись «Вы стали разработчиком!». Это будет свидетельствовать о том, что мы достигли своей цели – режим разработчика Андроид включен.

Примечание: после нескольких нажатий (примерно, 3-4) на экране будут появляться сообщения о том, что вскоре режим разработчика Android будет активирован. Это укажет нам на верность выполненных действий, так что обратите на них внимание.

В результате проделанных манипуляций в меню настроек появится новая категория – «Для разработчиков».

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

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

Как дезактивировать режим разработчика Android и устранить элемент меню настроек «Для разработчиков»?

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

Штатные параметры ОС позволяют отключить developer mode с помощью простого переключателя, находящегося в том же самом разделе меню «Для разработчиков». Тем не менее, при его дезактивации сам элемент меню никуда не девается и остается все так же «висеть» на своем месте. Если вы хотите избавиться от него насовсем, выполните следующие итерации:

1. Откройте Настройки -> Приложения и активируйте функцию отображения всех установленных программ.

2. Найдите в списке программу под названием «Настройки» и тапните на ней.

3. Теперь откройте раздел «Хранилище».

4. Нажмите на кнопку «Стереть данные»

5. Спустя мгновение перед вами появится предупреждающее сообщение о том, что вся информация о выбранной программе будет безвозвратно удалена, и восстановить ее никак не удастся. Это касается действующих рабочих аккаунтов, настроек, баз данных и прочих элементов конфигурации ОС. Тем не менее, не стоит опасаться, что все это произойдет. На самом деле, ничего страшного не случится, поэтому можете без опасений нажать на кнопку «ОК» и подтвердить свое решение.

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

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

Если примете решение воспользоваться этой методикой, предварительно создайте резервную копию данных в одном из внешних хранилищ (подойдет и синхронизация с учетной записью Google). Когда это будет сделано, откройте меню «Настройки» -> «Восстановление и сброс».

В данном разделе меню выберите опцию «Сброс настроек».

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

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

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

Перевод

Сегодня 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 файла, то достаточно будет открыть его в соседней вкладке браузера.

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

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

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

Открытие панели вебмастера и знакомство с интерфейсом

Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.

Мне больше нравится панель в браузере Firefox.

Сама панель поделена на две половины и содержит вкладки и инструменты для работы.

В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)» .

Здесь же можно узнать в каком файле находятся стили, и на какой строке.

Как проанализировать html элемент на сайте и узнать его стили css

Давайте рассмотрим пример на моей , которая располагается в каждой статье.

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

В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.

Как скопировать код html из панели в файлы сайта

Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.

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

Код скопирован в буфер обмена, и теперь его нужно вставить в то место, где вы хотите видеть этот баннер.

Как перенести стили из панели разработчика в файлы сайта

, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.

Как проверить адаптивность шаблона в панели разработчика

Заключение

Берите инструмент на вооружение, он вам пригодится ещё много раз.

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

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

С уважением, Максим Зайцев.

Всем привет.

Надыбал я более продвинутую версию моей статьи по средствам 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 стал или станет для вас полезным и сможете применять его на практике. Если есть чем дополнить или критиковать, комментарии к вашим услугам. Выразить благодарность можно поделившись постом в социальных сетях или ссылкой со своих сайтов.

Из этого туториала Вы узнаете, как работать с Инструментом исследования Google Chrome.
Наверное, Вы уже знаете о FireBug, плагине для Mozilla Firefox. Один из наших видео-туториалов покажет, как работать с FireBug . Из этого туториала Вы узнаете, как работать с подобным расширением для Google Chrome.
Для того чтобы использовать Инструмент исследования Google Chrome, следуйте таким инструкциям:
В этом инструменте есть несколько доступных настроек:
Редактирование стилей CSS
Вкладка Элемент (Element) позволяет редактировать CSS в живом режиме. Это обозначает то, что Вы можете предварительно посмотреть изменения, которые Вы вносите в 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 ):

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

Реклама

Подпишитесь на новости