Инструменты разработчика подменю дополнительные инструменты настроек браузера
Если вы пользовались 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 элементов с помощью консоли
- $() — эквивалентно 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 файла, то достаточно будет открыть его в соседней вкладке браузера.
Интегрированные наборы инструментов для веб-дизайнеров, разработчиков и тестеров
В дополнение к большинству производителей браузеров, ориентирующихся на обычных пользователей, желающих просматривать веб-страницы, они также обслуживают веб-разработчиков, дизайнеров и специалистов по обеспечению качества, которые помогают создавать приложения и сайты, к которым имеют доступ эти пользователи, путем интеграции мощных инструментов прямо в браузеры. самих себя.
Прошли те времена, когда единственные инструменты программирования и тестирования, доступные в браузере, позволяли вам просматривать исходный код страницы и ничего более. Современные браузеры позволяют вам гораздо глубже погружаться, выполняя такие вещи, как выполнение и отладка фрагментов JavaScript, проверка и редактирование элементов DOM, мониторинг сетевого трафика в реальном времени при загрузке приложения или страницы для выявления узких мест, анализ производительности CSS, обеспечение того, чтобы ваш код был не использовать слишком много памяти или слишком много циклов ЦП и многое другое.
С точки зрения тестирования, вы можете воспроизвести то, как приложение или веб-страница будут отображаться в разных браузерах, а также на разных устройствах и платформах с помощью магии адаптивного дизайна и встроенных симуляторов. Самое приятное, что вы можете делать все это, не выходя из браузера!
В приведенных ниже руководствах вы узнаете, как получить доступ к этим инструментам разработчика в нескольких популярных веб-браузерах.
Гугл Хром
Инструменты разработчика Chrome позволяют редактировать и отлаживать код, проводить аудит отдельных компонентов для выявления проблем с производительностью, моделировать различные экраны устройств, в том числе под управлением Android или iOS, и выполнять несколько других полезных функций.
Выберите главное меню Chrome , отмеченное тремя горизонтальными линиями и расположенное в верхнем правом углу браузера.
Когда появится раскрывающееся меню, наведите курсор мыши на параметр Дополнительные инструменты .
Теперь должно появиться подменю. Выберите вариант с надписью Инструменты разработчика . Вместо этого элемента меню можно также использовать следующую комбинацию клавиш: Chrome OS/Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
Теперь должен отображаться интерфейс инструментов разработчика Chrome, как показано на снимке экрана с примерами. В зависимости от вашей версии Chrome, первоначальный макет, который вы видите, может немного отличаться от представленного здесь. Основной центр инструментов разработчика, обычно расположенный в нижней или правой части экрана, содержит следующие вкладки.
В дополнение к этим разделам вы также можете получить доступ к следующим инструментам с помощью значка >> , расположенного справа от вкладки Эффективность .
- Память . Отслеживайте и записывайте использование памяти на веб-странице. Вы можете увидеть, насколько тяжелым является JavaScript на вашем сайте.
- Безопасность . Выделяет проблемы с сертификатами и другие связанные с безопасностью проблемы с активной страницей или приложением.
- Приложение . Проверьте ресурсы, используемые веб-приложением. Получите полную разбивку того, что используется.
- Аудит . Предлагает способы оптимизации времени загрузки страницы или приложения и общей производительности.
Режим устройства позволяет просматривать активную страницу в симуляторе, который отображает ее почти точно так, как она выглядит на одном из более чем дюжины устройств, включая несколько известных моделей Android и iOS, таких как iPad, iPhone и Samsung Galaxy. Вам также предоставляется возможность эмулировать пользовательские разрешения экрана в соответствии с вашими потребностями при разработке или тестировании.
Чтобы включить или выключить Режим устройства , выберите значок мобильного телефона , расположенный слева от вкладки Элементы .
Вы также можете настроить внешний вид своих инструментов разработчика, сначала выбрав кнопку меню , представленную тремя вертикально расположенными точками , и расположенную в крайней правой части окна. вышеупомянутые вкладки.
Из этого выпадающего меню вы можете изменить положение док-станции, показать или скрыть различные инструменты, а также запустить более сложные элементы, такие как инспектор устройств. Вы обнаружите, что сам интерфейс dev tools сильно настраивается с помощью настроек, описанных в этом разделе.
Mozilla Firefox
В раздел Firefox для веб-разработчиков входят инструменты для дизайнеров, разработчиков и тестеров, такие как редактор стилей и пипетка с таргетингом на пиксели.
Выберите главное меню Firefox, представленное тремя горизонтальными линиями и расположенное в верхнем правом углу окна браузера.
Когда появится раскрывающееся меню, выберите Веб-разработчик . Теперь должно появиться Меню веб-разработчика , содержащее следующие параметры. Вы заметите, что с большинством пунктов меню связаны сочетания клавиш.
Microsoft Edge/Internet Explorer
Обычно упоминается как F12 Developer Tools , дань уважения сочетанию клавиш, которое запустило интерфейс с более ранних версий Internet Explorer, набора инструментов разработчика в IE11 и Microsoft Edge. прошел долгий путь с момента своего создания, предлагая очень удобную группу мониторов, отладчиков, эмуляторов и компиляторов «на лету».
Выберите Дополнительные действия , обозначенные тремя точками и расположенные в верхнем правом углу окна браузера. Когда появится раскрывающееся меню, выберите параметр с меткой Инструменты разработчика .
Теперь интерфейс разработки должен отображаться, как правило, в нижней части окна браузера. Доступны следующие инструменты, каждый из которых доступен путем нажатия на заголовок соответствующей вкладки или с помощью сочетания клавиш.
Чтобы отобразить Консоль , находясь в любом из других инструментов, нажмите квадратную кнопку с правой скобкой внутри нее, расположенной в верхнем правом углу интерфейса инструментов разработки. ,
Чтобы отсоединить интерфейс инструментов разработчика, чтобы он стал отдельным окном, выберите два каскадных прямоугольника или используйте следующую комбинацию клавиш: CTRL + P , Вы можете вернуть инструменты в исходное положение, нажав CTRL + P во второй раз.
Apple Safari (только OS X)
Разнообразный набор инструментов Safari отражает большое сообщество разработчиков, которые используют Mac для своих нужд проектирования и программирования.В дополнение к мощной консоли и традиционным функциям ведения журналов и отладки, также предоставляется простой в использовании режим адаптивного дизайна и инструмент для создания собственных расширений браузера.
Выберите Safari в меню браузера, расположенного в верхней части экрана. Когда появится раскрывающееся меню, выберите Настройки . Вместо этого пункта меню можно также использовать следующую комбинацию клавиш: КОМАНДА + КОММА (,)
Теперь интерфейс Safari Настройки должен отображаться поверх окна браузера. Выберите Расширенный значок , расположенный в правой части заголовка.
Настройки Расширенные теперь должны быть видны. В нижней части этого экрана находится опция с надписью Показать меню разработки в строке меню, сопровождаемая флажком. Если флажок не отображается в поле, щелкните по нему один раз, чтобы разместить его там.
Закройте интерфейс Настройки , нажав на красный значок x в верхнем левом углу.
Теперь вы должны заметить новый параметр в меню браузера под названием Разработка , расположенный между закладками и окном . Нажмите на этот пункт меню. Теперь должно появиться раскрывающееся меню, содержащее следующие параметры.
Небольшой обзор инструментов разработчика под названием Chrome DevTools. Рассказываем, что это такое и как с этим работать.
Вкратце о DevTools
Далеко не все разработчики (даже опытные) достаточно хорошо осознают, что один из лучших инструментов для тестирования, рефакторинга и оптимизации кода всегда был у них под рукой. Речь идет о браузере.
Некоторые вовсе не в курсе, что в браузерах есть инструменты для разработчиков. А те, кто в курсе, зачастую используют их для проверки одного-двух элементов на чужих ресурсах, не углубляясь в возможности DevTools. В то же время это грандиозный набор инструментов, который многим может заменить полноценную среду разработки.
Здесь есть редактор кода, дебаггер, наглядная визуальная система управления стилями, функция автоматической проверки сайтов на качество (производительность, SEO, адаптация под людей с ограниченными возможностями и т.п.). Также сам браузер поможет адаптировать сайты под мобильные устройства и экраны разных гаджетов.
Давайте обо всем поговорим подробнее и выясним, чем же так хорош Chrome DevTools.
Как открыть Chrome DevTools
Начнем с главного – откроем инструменты для разработчика. Это можно сделать тремя способами:
через контекстное меню,
через настройки браузера,
с помощью сочетания клавиш.
В первом случае нужно кликнуть по любой части страницы, а затем выбрать пункт «Посмотреть код» (не путайте с «Просмотром кода страницы», эта опция показывает исходный код в отдельной вкладке, не запуская DevTools).
Чтобы открыть DevTools через настройки, нужно кликнуть по иконке в виде трех точек в правом верхнем углу. В появившемся списке найти пункт «Дополнительные настройки» и навести на него курсор. А затем выбрать пункт «Инструменты разработчика».
Ну и основной способ, которым вы будете пользоваться чаще всего, когда запомните – горячие клавиши. Вызвать DevTools можно одновременным нажатием клавиш Ctrl + Alt + I в Windows и Cmd + Alt + I в macOS.
Основные возможности Chrome DevTools
Разберем базовые функции инструментов разработчика в Google Chrome. Посмотрим, что можно делать с веб-страницей, и поймем, почему некоторые разработчики используют DevTools чуть ли не чаще, чем какую-нибудь IDE или текcтовый редактор.
Поиск DOM-элементов
Первое, что вы увидите, когда откроются инструменты разработчика – редактор HTML-кода. Это полноценное DOM-дерево, которое можно просмотреть от и до. И не только посмотреть, но и изменить. Для начала посмотрим, как легко можно найти любой элемент страницы в коде, используя DevTools.
Во-первых, при вызове инструментария можно кликнуть правой кнопкой мыши не по пустому пространству, а по конкретной кнопке или картинке. Тогда при нажатии на «Просмотреть код» в DOM-дереве подсветится выбранный элемент.
Во-вторых, можно воспользоваться отдельной функцией поиска HTML-компонентов. Для этого нужно кликнуть по иконке в виде стрелки в левом верхнем углу окна DevTools, а затем навести курсор на интересующую кнопку/ссылку/картинку и т.п.
Также элементы подсвечиваются при наведении на них мыши в редакторе.
Редактирование HTML
Весь текст на сайте можно редактировать прямо в браузере. Менять любые параметры DOM.
В DevTools отображаются все вложенные элементы сайта (все div, section, footer, p и прочие). Чтобы отредактировать текст в блоке, нужно кликнуть по нему два раза. Текст выделится, и в нем появится курсор.
То же можно проделать с классами и типами данных. Кликнув по имени класса (или самому слову class), вы получите доступ к редактору именно этой части кода. Это удобно, когда нужно скорректировать небольшую часть кода.
Можно заменить сразу большой участок текста или поменять наименования атрибутов. Для этого кликаем правой кнопкой мыши по элементу или его части, а затем выбираем одну из опций. Например, Edit as HTML.
Работа с CSS
Ниже редактора HTML располагается окно для работы со стилями. В нем есть все необходимое для настройки визуальной составляющей сайта, а также несколько удобств, отличающих DevTools от большинства подобных инструментов.
К примеру, каждое свойство можно отключить, кликнув по чекбоксу слева от него. С добавлением новых свойств та же ситуация. Они тут отображаются как отдельные единицы интерфейса, а не как часть текстового поля.
Также в инструментах разработчика Google Chrome много графических элементов управления. Есть визуальная настройка угла наклона градиентов и удобная палитра для выбора цвета.
Сделаем и то, и другое на примере страницы выше. Поменяем через Chrome DevTools цвет кнопки.
Что получится при смене дизайна клавиш и подсветки ссылок:
Также в Chrome DevTools есть графическая презентация отступов объекта. С помощью нее можно легко настроить положение элемента относительно других, связанных с ним компонентов страницы.
А еще это удобный способ понять, как работают свойства margin и padding.
Также с помощью инструментов разработчика можно вынудить элементы вести себя определенным образом. К примеру, принудительно активировать псевдокласс :hover, чтобы настроить внешний вид кнопки при наведении на нее курсора.
Внесенные изменения можно отследить в графе Changes (в нижнем блоке DevTools, справа от Console). Они оформлены в стиле GitHub. То есть видно и замененный элемент, и его обновленный вариант.
Разработка адаптивного дизайна
Инструменты Chrome DevTools идеально подходят для тестирования сайта на разных экранах. Браузер умеет эмулировать любое устройство и любое разрешение экрана. Так что вы можете, не покидая браузера, взглянуть, как будет выглядеть ваше детище на планшетах, смартфонах и ПК-мониторах любого размера и с любыми органами управления.
Чтобы перейти в режим адаптивной верстки, надо кликнуть по кнопке Toggle device toolbar или нажать Cmd + Shift + M.
Над сайтом слева появится новая панель управления с кнопкой Responsive. Кликнув на нее, вы увидите список доступных устройств. Выбирайте то, которое хотите эмулировать, и разметка сайта адаптируется под его разрешение.
Для упрощения процесса верстки под конкретное разрешение, нужно кликнуть по иконке в виде трех точек слева от кнопки запуска режима адаптивной верстки и нажать на строку Show rulers. Появится пиксельная линейка для «подгонки» сайта.
А еще тут можно делать скриншоты сайта в заданном размере. Там же, где находится линейка, есть кнопка Capture screenshot.
Пример внесения изменений в HTML и CSS через Chrome DevTools
Разберем еще раз описанные выше возможности на конкретном примере. У меня есть страница, на которой некорректно отображается одна из кнопок. Она наползает на другие элементы приложения. Исправим это через DevTools.
Сначала ищем кривую кнопку в коде, активировав функцию поиска элемента.
Видим, что в коде для кнопки нет медиазапроса. То есть окно не адаптировано под конкретный размер дисплея. Добавляем необходимый код в css-файл и смотрим, что вышло. Кнопка уползла на нужно место.
Остается скопировать этот код непосредственно в приложение/сайт или сохранить обновленный CSS-файл в папку проекта. Для этого нужно открыть вкладку Sources, выбрать отредактированный файл (он будет помечен звездочкой), затем кликнуть по нему правой кнопкой мыши и выбрать опцию Save as…
Запуск и дебаггинг JavaScript-кода
Инструменты Chrome DevTools позволяют работать не только с CSS и HTML, но и с JavaScript-кодом. Можно запускать произвольные команды через встроенную консоль или подключая дополнительные JS-файлы.
Чтобы открыть JS-файл, нужно перейти во вкладку Sources справа от Elements.
Через консоль также можно отслеживать работу сайта, наблюдая за появляющимися ошибками и особенностями поведения сайта, в частности с помощью функции console.log( ).
А вот пример запуска произвольного кода внутри консоли браузера.
Также Chrome DevTools отлично подходят для поиска и исправления ошибок в коде. В нем для этого есть целый список брейкпоинтов, то есть точек, на которых останавливается исполнение кода с целью проанализировать его.
Например, можно настроить остановку кода по каждому действию, включая клик по кнопке или нажатие на клавишу. Чтобы создать брейкпоинты на эти действия:
- Открываем JavaScript-файл во вкладке Sources.
- Затем переходим в дебаггер. По умолчанию он привязан к нижней границе окна DevTools.
- Выбираем раздел Event Listener Breakpoints.
- В нем ставим галочку напротив действий, которые хотим отслеживать (при их выполнении исполнение кода будет останавливаться).
Другие возможности DevTools
Далее кратко разберем еще несколько важных вкладок в интерфейсе Chrome DevTools. Это те элементы, на которые стоит обратить внимание в первую очередь. Они отличают инструменты разработчика в браузере Google от аналогичных в других браузерах.
Оптимизация производительности сайта
В разделе Performance можно оценить скорость работы ресурса. Посмотреть, через какой период времени приходит ответ от сервера, за какой период времени отрисовывается интерфейс, в какой момент становится доступен хотя бы один из элементов сайта и так далее.
Браузер в автоматическом режиме создает профайл выбранной страницы и делит процесс загрузки на этапы посекундно, отображая информацию, необходимую для рейтинга Web Vitals. Это новый алгоритм оценки сайтов от Google.
Анализ подключения
В разделе Network можно посмотреть, как проходит подключение к источникам данных и загрузка отдельных элементов страницы. Здесь можно взглянуть на проблемные файлы, которые не загружаются вовсе или загружаются слишком долго.
Уровень безопасности сайта
Chrome DevTools умеет в автоматическом режиме анализировать страницу, проверять сертификаты и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов.
Обязательно отслеживайте эту страницу, если рассчитываете на высокие позиции в поисковой выдаче Google.
Lighthouse
Пожалуй, самый удобный инструмент для первичной аналитики ресурса и выявления в нем недостатков. Одной кнопкой можно создать профиль сайта и получить все необходимые сведения о нем. Lighthouse покажет все слабые и сильные места ресурса.
Скорость загрузки и работы, адаптированность под людей с ограниченными возможностями, корректность верстки, адаптация под поисковые машины (SEO), поддержка Progressive Web App и т.п.
Инструменты разработчиков в Safari и в Mozilla Firefox
Естественно, Chrome – не единственный браузер, оснащенный HTML-редактором и дебаггером. Аналогичная функциональность есть в Safari и Firefox. У них зачастую даже интерфейсы схожие. Примерно такие же инструменты для визуального редактирования CSS и т.п.
Важное отличие инструментария в Chrome – наличие аналитических систем в духе Lighthouse. Они позволяют напрямую взаимодействовать с Google. Так проще исправлять ошибки в коде и адаптировать ресурс под требования поисковых машин.
Также инструменты в Safari и Firefox отличаются во всевозможных мелочах. Разные горячие клавиши, разное поведение при выделении и редактировании текста, разные ошибки в консоли по умолчанию и т.п. Но принцип остается один. Возможно, более детальные отличия изучим в следующих материалах.
Вместо заключения
На этом закончим обзорную статью про Chrome DevTools. При глубоком изучении инструмента выяснится, что в нем есть еще много полезных функций и скрытых настроек. Правда, охватить их в одном материале не получится. Но и описанных возможностей должно хватить, чтобы у тех, кто раньше недооценивал Chrome, появился повод передумать и взглянуть на DevTools по-новому.
Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере.
Примечание: Прежде чем начать заниматься с примерами, откройте пример сайта для начинающих, с которым мы работали на предыдущих занятиях. Вам следует держать его открытым, чтобы выполнить описанные ниже действия.
Как открыть инструменты веб-разработчика в вашем браузере?
Панель разработчика находится в нижней части вашего браузера :
Как её отобразить? Есть три варианта:
- Клавиатура.Ctrl + Shift + I, кроме
- Internet Explorer.(клавиша - F12)
- Mac OS X.(сочетание клавиш - ⌘ + ⌥ + I )
- Firefox. Открыть меню ➤ ➤ Инструменты разработки, илиИнструменты ➤Веб-разработка ➤ Инструменты разработки
- Chrome.Дополнительные инструменты ➤ Инструменты разработчика
- Safari.Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив "Показать меню разработки".
- Opera. Меню➤Разработка ➤ Инструменты разработчика. Если вы не видите меню "Разработка", включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
![]()
Inspector: DOM обозреватель и CSS редактор
По умолчанию, в панели открывается вкладка Inspector, вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.
![]()
Если вы не видите Inspector,
- Нажмите на вкладку Inspector .
- В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
- В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.
Обзор DOM inspector
Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:
![]()
Обзор CSS редактора
По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:
![]()
Эти функции особенно удобны:
- Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
- Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
- Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
- Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором вы можете задать новые значения и увидеть, как изменится ваш элемент с новыми значениями.
- Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт вас в окно, где можно редактировать этот CSS и сохранить.
- Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где вы сможете написать совершенно новую декларацию для вашей страницы.
Вы должно быть уже заметили другие вкладки в CSS редакторе:
- Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
- Блоковая модель: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
- Анимации: В Firefox, на вкладке Анимации вы можете увидеть анимации применённые к выделенному элементу.
Узнать больше
Узнать больше об Inspector в различных браузерах:
Консоль JavaScript
Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:
![]()
Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):
Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.
Вы увидите некоторые ошибки, которые сообщит вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!
Google Chrome![gchrome]()
Инструменты разработчика в Chrome могут понадобиться при тестировании продукта, изучении HTML и CSS, разработке плагинов, вёрстке сайтов. С помощью расширенной консоли можно получать доступ к возможностям персонализации страницы, запуску команд и т. д.
Как включить панель разработчика в Google Chrome на компьютере
Доступ к инструментам разработчика можно получить в любом современном браузере – в Google Chrome перейти в такую консоль можно тремя основными методами.
Способ 1: Через меню браузера
Способ неприменим при работе в полноэкранном режиме, поскольку подменю в таком случае не отображается.
Способ 2: Через контекстное меню
Функционал консоли, открываемой с помощью этого метода, ничем не отличается от предыдущего.
Способ 3: Через сочетание клавиш
С использованием клавиатуры доступ к консоли можно получить не менее быстро – нужно лишь воспользоваться одной из предложенных ниже комбинаций клавиш:
Главное достоинство этого способа – применимость на сайтах, блокирующих запуск панели разработчика другими методами.
Способ 4: Автоматический запуск при старте Chrome
Для тех, кто вынужден постоянно держать консоль разработчика открытой, подойдёт вариант с настройкой автоматического её запуска при старте браузера.
Настраивается следующим образом:
При запуске через исполняемый файл или другие ярлыки консоль открываться не будет.
Дополнительно
Существует несколько хитростей, использование которых значительно упрощает работу с инструментами разработчика на любом сайте:
Представленный список нельзя назвать исчерпывающим – Google добавила массу полезных функций для разработчиков.
Как включить панель разработчика на телефоне
Для перехода к скрытым параметрам нужно выполнить простую последовательность действий:
В трассировке, к которой и будет открыт доступ, содержатся три основных раздела:
В трассировки могут быть включены личные данные и сведения любого открытого сайта (в том числе и во вкладках инкогнито).
Панель разработчика Google Chrome – интересный инструмент тестирования веб-ресурсов, полноценное освоение которого позволит пользоваться массой полезных функций даже при обычной работе с браузером.
Читайте также:
