Узнайте, как создавать удобные, привлекающие внимание веб-сайты, сервисы и приложения, которые нужны всем. Сегодня эта профессия находится на пике популярности: в России насчитывается более 9000 рабочих мест, требующих навыков работы с JavaScript.
Начало работы с расширением DevTools для Visual Studio Code
Это пошаговое руководство по открытию и закрытию инструментов разработки и их использованию для изменения CSS и отладки JavaScript. Следуйте инструкциям сверху вниз, чтобы получить общее представление и убедиться, что ваш компьютер настроен для использования инструментов разработки.
- Выполните действия по установке расширения DevTools для Visual Studio Code, а затем продолжите работу ниже.
Шаг 2. Запустите devTools, нажав кнопку запуска экземпляра для страницы по умолчанию
Этот подход открывает вкладки DevTools в неотлаживаемом состоянии и полезен, если вы не хотите использовать отладочные возможности Visual Studio Code. Поддерживаемые сценарии для этого способа открытия Инструментов разработчика:
- При использовании пути к файлу не нужно открывать папку в Visual Studio Code; вы по-прежнему можете использовать зеркальное редактирование CSS для редактирования исходных файлов CSS.
- Если у вас нет открытой папки и вы хотите проверить страницу, указанную с помощью URL-адреса.
- Если у вас нет открытой папки и вы хотите поэкспериментировать с изменением CSS на странице, указанной с помощью URL-адреса, без использования зеркального редактирования CSS.
При нажатии на кнопку Run Instance вы не перейдете непосредственно к файлу. Вы должны ввести путь к файлу или URL-адрес. Эта процедура выделена в пользовательском интерфейсе, и вы должны знать, как закрыть открытые экземпляры devTools таким образом. Вам также необходимо знать, как изменить страницу успешного запуска.
Откройте вкладки devTools:
- В Visual Studio выберите » Файл>нового окна». Изначально папка не открывается.
- На панели действий щелкните «Инструменты Microsoft Edge» (значок Откроется боковая панель инструментов Microsoft Edge .
- Нажмите кнопку запуска экземпляра. Откроется вкладка «Edge DevTools » и откроется вкладка «Edge DevTools: Browser » (Браузер) со страницей успешности по умолчанию. В адресной строке браузера DevTools file:/// есть путь (а не URL-адрес), например file:///C:/Users/myusername/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html. Панель инструментов отладки не открывается, консоль отладки не открывается внизу, а боковая панель запуска и отладки с областью контрольных значений не открывается.**** **** Это означает, что Visual Studio Code не находится в режиме отладки. Вы можете изменить CSS локальных файлов, а также ввести локальные пути к файлам или URL-адреса localhost в адресной строке и взаимодействовать со страницами локального веб-приложения. Откройте папку: Обратите внимание, что папка в Visual Studio Code. Во многих случаях для редактирования веб-страницы с помощью средств разработки, а не просто для проверки веб-страницы, необходимо открыть папку, содержащую исходные файлы, соответствующие отображаемой веб-странице. Открытие папки обеспечивает большую гибкость, поэтому вы можете открыть URL-адрес или путь к файлу в адресной строке вкладки Edge DevTools: Browser и иметь полные функциональные возможности DevTools. Открытие папки дает возможность предоставить доверие папке, чтобы не получать сообщение об ошибке при попытке изменить исходные файлы. В противном случае может возникнуть сообщение об ошибке, так как папка, содержащая страницу успешного выполнения, не является доверенной, а при редактировании зеркального CSS-файла в исходном файле в этой папке выполняется попытка изменения CSS index.html .
- На вкладке браузера Edge в адресной строке выберите и скопируйте путь к файлу, но не имя файла, например C:/Users/myusername/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/ .
- В панели действий>Explorer нажмите кнопку «Открыть папку «. В диалоговом окне «Открыть папку » вставьте или выберите путь, скопированный выше. Для вставки в Windows может / \ потребоваться изменить путь. Затем нажмите кнопку «Выбрать папку «. При первом открытии папки необходимо убедиться, что вы доверяете авторам файлов в этой папке:
- Нажмите кнопку «Да», «Я доверяю авторам «. Может потребоваться снова запустить DevTools, как показано ниже.
- На панели действий щелкните «Средства Microsoft Edge» (кнопка Откроется боковая панель инструментов Microsoft Edge .
- Нажмите кнопку запуска экземпляра. Откроется вкладка «Edge DevTools » и откроется вкладка «Edge DevTools: Browser » (Браузер) со страницей успешности по умолчанию. Исходный файл страницы успешного выполнения — это автономный .html файл в каталоге на диске. Это один файл .html, содержащий правила CSS (в элементе ). Он также содержит инструкцию JavaScript console (в элементе ). Измените CSS:
- На вкладке Edge DevTools нажмите кнопку » Выбрать элемент» на странице, чтобы проверить его ( «Проверить «.
- На вкладке «Edge DevTools: Browser » наведите указатель мыши на разные части страницы, пока **** вы будете наблюдать за расширением и обновлением дерева DOM средства «Элементы».
- Нажмите кнопку «Успешно!». заголовок, который является элементом .
- На вкладке » Стили» средства » Элементы» на вкладке «Edge DevTools » в разделе объявления h2 без курсивов щелкните справа от margin-bottom правила.
- Введите новое правило CSS и font-size: 5em нажмите клавишу Enter. Орфография аналогична правилу, показанному в разделе курсив h2 из таблицы стилей агента пользователя под ней. index.html открывается, автоматически редактируется с помощью зеркального редактирования CSS, чтобы добавить строку font-size: 5em;. Прокрутите страницу до этой строки в разделе h2. Упорядочить вкладки:
- На вкладке Edge DevTools в разделе h2, отличном от курсивного, font-size щелкните введенное правило CSS, а затем нажмите и Down Arrow«Up Arrow. Значение автоматически изменяется index.html с помощью зеркального редактирования CSS.
- На вкладке Edge DevTools несколько раз нажмите кнопку «Переключить экранную трансляцию». Откроется и закрывается вкладка «Edge DevTools: Browser «, экономя место.
- На вкладке «Edge DevTools: Browser » нажмите кнопку «Закрыть devTools » или «Открыть devTools » несколько раз. Откроется и закрывается другая вкладка DevTools, экономя место.
- В верхней части Visual Studio Code щелкните правой кнопкой мыши вкладки и расположите их, чтобы отобразить различные вкладки одновременно:
- Боковая панель с целевыми объектами средств>Microsoft Edge .
- Редактор index.html .
- Вкладка «Edge DevTools «.
- Вкладка «Edge DevTools: Browser «.
Шаг 3. Запустите devTools, нажав кнопку «Запустить экземпляр» для демонстрации задач
Microsoft Edge
- Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
- Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
- После этого в правой части экрана откроется раздел с DevTools.
Как и в Chrome, DevTools в Edge можно открыть с помощью Ctrl+Shift+I (или Command+Option+I на Mac).
Mozilla
- Выберите меню-гамбургер в верхнем углу экрана.
- Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
- После этого в нижней части экрана откроется раздел с DevTools.
Горячая клавиша Mozilla — Ctrl+Shift+I (или Command+Option+I на Mac).
Какие вкладки есть в DevTools
Элементы. Отображает весь код HTML и CSS для открытой страницы. Там можно просматривать и изменять файлы CSS и JavaScript, а также изменять элементы DOM (элементы интерфейса прикладного программирования (API) для документов HTML и XML). Вы можете редактировать элементы HTML на странице, открытой в браузере, щелкнув правой кнопкой мыши на нужном элементе и выбрав Edit as HTML. Вы можете наблюдать за изменениями в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Чтобы применить изменения, необходимо поработать с соответствующими файлами на веб-сервере.
Консоль. В консоли можно просмотреть вывод JavaScript и выполнить свой код для тестирования и отладки страницы. Если на открытой странице не удается загрузить некоторые данные, такие как стили, шрифты и изображения, соответствующие ошибки отображаются подробно. Вы также можете ввести команду JavaScript в консоль, и она будет выполнена.
Источники. На этой вкладке отображаются файлы, которые были загружены из всех источников, к которым они ранее обращались.
Исполнения. На вкладке отображается нагрузка на компьютер пользователя. Здесь вы можете увидеть FPS, загрузку процессора и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. Таблица включает в себя временную шкалу использования сети, выполнения JavaScript и использования памяти. После создания временных диаграмм можно найти данные обо всем жизненном цикле страницы и выполнении кода.
Также можно просмотреть время выполнения отдельных фрагментов кода и выбрать определенный период времени на временной шкале, чтобы увидеть, какие процессы происходили в этот период времени. Это позволяет проанализировать любое событие, произошедшее во время загрузки или взаимодействия с пользователем.
Память. Вот несколько инструментов, которые можно использовать для отслеживания того, сколько кода нагрузки выполняется в системе:
Найдите нужный элемент DOM. Раздел Элементы содержит все дерево DOM, которое можно просматривать и изменять. Существует два способа найти определенный элемент.
- Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
- Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
- Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.
Основные инструменты и как их использовать
1. выберите элемент на странице.
Например, наведите указатель мыши на изображение на сайте, щелкните правой кнопкой мыши и выберите «Показать код». Код выбранного элемента выделяется в дереве DOM. 2.
2. используйте функцию поиска в HTML
Нажмите на кнопку со стрелкой в левом верхнем углу консоли, а затем щелкните на нужном элементе на странице.
Редактирование HTML: В консоли отображаются все элементы — div, section, footer и т.д. Например, вы можете редактировать текст, дважды щелкнув по нему. Те же действия возможны для классов и типов данных. Чтобы отредактировать конкретный раздел кода, нажмите на название класса или на слово самого класса. Также можно редактировать большой участок текста или, например, имена атрибутов. Просто щелкните правой кнопкой мыши на элементе и выберите соответствующую опцию.
Работайте с CSS. Ниже редактора HTML находится консоль стилей. В Chrome DevTools вы можете отключать и включать любое свойство простым щелчком по флажку слева. Он также находится в Chrome DevTools, где есть удобная палитра для выбора оттенка и возможность задать угол градиента. Имеется визуализация отступов элементов, чтобы вы могли легко настроить положение одного элемента по отношению к другим. Это далеко не полный перечень всех удобных функций.
Поиск и исправление «мертвого» кода. Иногда файлы CSS и JavaScript содержат много кода, который присутствует, но нигде не используется. Их наличие напрямую влияет на производительность сайта. В Chrome DevTools есть инструмент обложки для этой цели. В баре с
Строительные нормы и правила. Код без «мертвых» элементов повышает производительность сайта, но его трудно читать (иногда даже удаляя пробелы и разделители). С помощью Chrome DevTools вы можете структурировать их. На вкладке Элементы выберите любой свернутый ресурс (CSS, JS или HTML), и содержимое появится в новой вкладке с иконкой изогнутой скобки внизу. Когда вы нажимаете эту кнопку, Chrome DevTools структурирует код, подходящий для внесения изменений.
Каждый браузер имеет встроенные инструменты разработки, которые помогают быстро выявить и исправить ошибки в разметке или коде. С их помощью можно узнать, как было построено дерево DOM, какие теги и атрибуты присутствуют на странице, почему не загрузились шрифты и многое другое.
Введение в Chrome DevTools. Панель Elements
В этой серии статей мы рассмотрим основные возможности Chrome DevTools, но этого должно быть достаточно для того, чтобы вы могли начать обучение.
macOS — Ctrl + Cmd + I
Как открыть инструменты разработчика
Linux — Ctrl + Shift + I
Вы можете настроить инструменты разработки и изменить их внешний вид — например, выбрать более темное оформление пользовательского интерфейса.
Тема интерфейса
В настройках есть список сочетаний клавиш — рекомендуется ознакомиться с ними, так как знание этих комбинаций значительно ускорит вашу работу.
Горячие клавиши
В правом верхнем углу находится кнопка, которая отвечает за расположение панели. DevTools может находиться внизу, слева или справа, или мы можем отключить отладчик и работать с ним в отдельном окне.
Расположение панелей
С его помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять макет на переполнение. Как вы это делаете? Давайте узнаем.
Вкладка Elements
Есть три способа получить информацию о любом элементе на странице — выберите тот, который вам больше подходит.
Как получить информацию об элементе
Через инспектора. Это полезно, если вы четко видите элемент и щелкаете по нему правой кнопкой мыши. Выберите Инспектор или Просмотрщик кода. Это вызовет панель разработчика.
Найти предмет. Когда отладчик отображается на экране, нажмите Ctrl+F. Ниже показано окно поиска имени, атрибута, класса или текстового содержимого элемента.
Например, введите Header Class и вы увидите все подходящие элементы:
Визуальный поиск. При открытом отладчике откройте функцию визуального поиска, найдите нужный элемент и нажмите на него.
Если вы хотите отредактировать атрибут, класс или текст элемента, дважды щелкните по нему и внесите изменения.
Как внести изменения в элемент на странице
Нажмите Tab для прокрутки вперед, Shift+Tab для прокрутки назад и H для скрытия элемента.
Поклонники пом
Как изменить разметку страницы
Вкладка для проверки и очистки всех загруженных ресурсов, включая базы данных IndexedDB или Web SQL, локальное и сеансовое хранилище, файлы cookie, кэш приложений, изображения, шрифты и таблицы стилей.
Проверка вёрстки на переполнение
Основные характеристики:
Эта вкладка позволяет прочитать журнал безопасности (если таковой имеется) и просмотреть сведения о сертификате безопасности (если таковой имеется).
- Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
- Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.
Этот инструмент используется для устранения проблем со смешанным содержимым, проблем с сертификатами и других проблем.
Основные характеристики:
После выбора нужных настроек и нажатия кнопки «Запустить» приборная панель анализирует загрузку страницы, а затем дает рекомендации по оптимизации, чтобы сократить время загрузки страницы и улучшить отзывчивость.
Просмотр и тестовое редактирование стилей
Анализируются такие параметры, как кэширование ресурсов, сжатие Gzip, наличие неиспользуемых фрагментов кода JS и правил CSS и многие другие параметры. Затем пользователю представляется сгруппированный список рекомендаций, применение которых может значительно оптимизировать скорость загрузки и отзывчивость страницы.
Панель Application
- Быстрая очистка хранилищ и кэша.
- Инспектирование и управление хранилищами, базами данных и кэшем.
- Инспектирование и удаление файлов cookie.
Панель Security
- Окно Security Overview быстро подскажет безопасна ли текущая страница или нет.
- Возможность просмотреть отдельные источники, чтобы просмотреть соединение и детали сертификата (для безопасных источников) или узнать, какие запросы не защищены (для небезопасных источников).
Панель Audits
