DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее. Dev tools что это?

Узнайте, как создавать удобные, привлекающие внимание веб-сайты, сервисы и приложения, которые нужны всем. Сегодня эта профессия находится на пике популярности: в России насчитывается более 9000 рабочих мест, требующих навыков работы с JavaScript.

Начало работы с расширением DevTools для Visual Studio Code

Это пошаговое руководство по открытию и закрытию инструментов разработки и их использованию для изменения CSS и отладки JavaScript. Следуйте инструкциям сверху вниз, чтобы получить общее представление и убедиться, что ваш компьютер настроен для использования инструментов разработки.

  1. Выполните действия по установке расширения DevTools для Visual Studio Code, а затем продолжите работу ниже.

Шаг 2. Запустите devTools, нажав кнопку запуска экземпляра для страницы по умолчанию

Этот подход открывает вкладки DevTools в неотлаживаемом состоянии и полезен, если вы не хотите использовать отладочные возможности Visual Studio Code. Поддерживаемые сценарии для этого способа открытия Инструментов разработчика:

  • При использовании пути к файлу не нужно открывать папку в Visual Studio Code; вы по-прежнему можете использовать зеркальное редактирование CSS для редактирования исходных файлов CSS.
  • Если у вас нет открытой папки и вы хотите проверить страницу, указанную с помощью URL-адреса.
  • Если у вас нет открытой папки и вы хотите поэкспериментировать с изменением CSS на странице, указанной с помощью URL-адреса, без использования зеркального редактирования CSS.

При нажатии на кнопку Run Instance вы не перейдете непосредственно к файлу. Вы должны ввести путь к файлу или URL-адрес. Эта процедура выделена в пользовательском интерфейсе, и вы должны знать, как закрыть открытые экземпляры devTools таким образом. Вам также необходимо знать, как изменить страницу успешного запуска.

Откройте вкладки devTools:

  1. В Visual Studio выберите » Файл>нового окна». Изначально папка не открывается.
  2. На панели действий щелкните «Инструменты Microsoft Edge» (значок Откроется боковая панель инструментов Microsoft Edge .
  3. Нажмите кнопку запуска экземпляра. Откроется вкладка «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 .
  4. На вкладке браузера Edge в адресной строке выберите и скопируйте путь к файлу, но не имя файла, например C:/Users/myusername/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/ .
  5. В панели действий>Explorer нажмите кнопку «Открыть папку «. В диалоговом окне «Открыть папку » вставьте или выберите путь, скопированный выше. Для вставки в Windows может / \ потребоваться изменить путь. Затем нажмите кнопку «Выбрать папку «. При первом открытии папки необходимо убедиться, что вы доверяете авторам файлов в этой папке:Доверяете ли вы авторам файлы этой папки?
  6. Нажмите кнопку «Да», «Я доверяю авторам «. Может потребоваться снова запустить DevTools, как показано ниже.
  7. На панели действий щелкните «Средства Microsoft Edge» (кнопка Откроется боковая панель инструментов Microsoft Edge .
  8. Нажмите кнопку запуска экземпляра. Откроется вкладка «Edge DevTools » и откроется вкладка «Edge DevTools: Browser » (Браузер) со страницей успешности по умолчанию. Исходный файл страницы успешного выполнения — это автономный .html файл в каталоге на диске. Это один файл .html, содержащий правила CSS (в элементе ). Он также содержит инструкцию JavaScript console (в элементе ). Измените CSS:
  9. На вкладке Edge DevTools нажмите кнопку » Выбрать элемент» на странице, чтобы проверить его ( «Проверить «.
  10. На вкладке «Edge DevTools: Browser » наведите указатель мыши на разные части страницы, пока **** вы будете наблюдать за расширением и обновлением дерева DOM средства «Элементы».
  11. Нажмите кнопку «Успешно!». заголовок, который является элементом .
  12. На вкладке » Стили» средства » Элементы» на вкладке «Edge DevTools » в разделе объявления h2 без курсивов щелкните справа от margin-bottom правила.
  13. Введите новое правило CSS и font-size: 5em нажмите клавишу Enter. Орфография аналогична правилу, показанному в разделе курсив h2 из таблицы стилей агента пользователя под ней. index.html открывается, автоматически редактируется с помощью зеркального редактирования CSS, чтобы добавить строку font-size: 5em;. Прокрутите страницу до этой строки в разделе h2. Упорядочить вкладки:
  14. На вкладке Edge DevTools в разделе h2, отличном от курсивного, font-size щелкните введенное правило CSS, а затем нажмите и Down Arrow«Up Arrow. Значение автоматически изменяется index.html с помощью зеркального редактирования CSS.
  15. На вкладке Edge DevTools несколько раз нажмите кнопку «Переключить экранную трансляцию». Откроется и закрывается вкладка «Edge DevTools: Browser «, экономя место.
  16. На вкладке «Edge DevTools: Browser » нажмите кнопку «Закрыть devTools » или «Открыть devTools » несколько раз. Откроется и закрывается другая вкладка DevTools, экономя место.
  17. В верхней части Visual Studio Code щелкните правой кнопкой мыши вкладки и расположите их, чтобы отобразить различные вкладки одновременно:
    • Боковая панель с целевыми объектами средств>Microsoft Edge .
    • Редактор index.html .
    • Вкладка «Edge DevTools «.
    • Вкладка «Edge DevTools: Browser «.

    Шаг 3. Запустите devTools, нажав кнопку «Запустить экземпляр» для демонстрации задач

    Запуск пути></p><ol><li>В Visual Studio выберите папку «Открыть>файл». Откройте папку \Demos\demo-to-do\ клонированного репозитория Demos, например C:\Users\myusername\Documents\GitHub\Demos\demo-to-do\ .</li><li>При появлении запроса нажмите кнопку «Да», «Я доверяю авторам «. Помимо предоставления доверия, подход к запуску экземпляра на самом деле не требует открытия папки, если вы указываете путь к файлу, а не URL-адрес в браузере DevTools.****</li><li>Панель действий>обозревателя>правой кнопкой мыши » \demo-to-do\index.html>Копировать путь» .</li><li>В Visual Studio на вкладке «Edge DevTools: Browser » в адресной строке вставьте полученный ранее локальный путь к файлу, например «»C:\Users\myusername\Documents\GitHub\Demos\demo-to-do\index.html. The **demo-to-do** app opens. In the address bar, the file:/// prefix is added and Windows backslashes are changed to forward slashes; for example: file:///C:/Users/myusername/Documents/GitHub/Demos/demo-to-do/index.html». Или, если сервер localhost запущен, вставьте URL-адрес localhost, например http://localhost:8080/ или http://localhost/demos/demo-to-do/. Если вы хотите использовать зеркальное редактирование CSS для редактирования исходных файлов, необходимо открыть папку в Visual Studio Code; в противном случае снимите флажок зеркального редактирования CSS на вкладке **** «Стили» **** в средстве «Элементы» на вкладке Edge DevTools. Снятие флажка предотвращает сообщения об ошибках сопоставления и зеркального редактирования при эксперименте с изменением CSS в DevTools и не предоставили исходный файл CSS для DevTools. Или вставьте URL-адрес github.io сервера. https://microsoftedge.github.io/Demos/demo-to-do/</li><li>В демонстрационном приложении введите задачу, например тест .</li><li>В средстве «Элементы » на вкладке «Стили» измените значение CSS, например: **** body<font-size: 11pt;>щелкните размер точки и измените значение. Откроется .css соответствующий файл в открываемой папке, который автоматически изменяется в соответствии с изменениями, внесенными на вкладке «Стили» (но не сохраненным).**** к файлу>режиме без отладки» />Закройте devTools:</li><li>Нажмите кнопку » Закрыть» ( x ) на вкладке «Edge DevTools » и на вкладке «Edge DevTools: Browser «, если эти вкладки открыты.</li></ol><ul><li>Выберите панель действий>Microsoft Edge Tools. Если в разделе » Целевые объекты» перечислены все целевые объекты, наведите указатель мыши на правую сторону целевого экземпляра и нажмите кнопку «Закрыть экземпляр ( x). Появится кнопка запуска экземпляра, указывающая, что все экземпляры DevTools закрыты.</li></ul><ol><li>Закройте index.html без сохранения изменений.</li><li>Выберите папку>»Закрыть файл» .</li></ol><p>Если вы щелкните правой кнопкой мыши на файле .html в браузере Visual Studio Code, **** вы можете открыть devTools, если веб-страница не должна работать на веб-сервере.</p><h3>Google Chrome</h3><ol><li>Нажмите значок с тремя точками в правом верхнем углу окна браузера.</li><li>В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.</li><li>После этого в правой части экрана откроется раздел с DevTools.</li></ol><p>Другой вариант — использовать сочетания клавиш. В Chrome это Ctrl+Shift+I (или Command+Option+I на Mac).</p><p><img decoding=Microsoft Edge

    1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
    2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
    3. После этого в правой части экрана откроется раздел с DevTools.

    Как и в Chrome, DevTools в Edge можно открыть с помощью Ctrl+Shift+I (или Command+Option+I на Mac).

    Mozilla

    1. Выберите меню-гамбургер в верхнем углу экрана.
    2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
    3. После этого в нижней части экрана откроется раздел с 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

    Есть три способа получить информацию о любом элементе на странице — выберите тот, который вам больше подходит.

    Интерфейс вкладки Elements

    Как получить информацию об элементе

    Через инспектора. Это полезно, если вы четко видите элемент и щелкаете по нему правой кнопкой мыши. Выберите Инспектор или Просмотрщик кода. Это вызовет панель разработчика.

    Найти предмет. Когда отладчик отображается на экране, нажмите Ctrl+F. Ниже показано окно поиска имени, атрибута, класса или текстового содержимого элемента.

    Меню выбора инспектора

    Например, введите Header Class и вы увидите все подходящие элементы:

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

    Поиск элементов по слову header

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

    Как внести изменения в элемент на странице

    Нажмите Tab для прокрутки вперед, Shift+Tab для прокрутки назад и H для скрытия элемента.

    Поклонники пом

    Как изменить разметку страницы

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

    Меню выбора редактирования

    Проверка вёрстки на переполнение

    Основные характеристики:

    Эта вкладка позволяет прочитать журнал безопасности (если таковой имеется) и просмотреть сведения о сертификате безопасности (если таковой имеется).

    Проверка на переполнение через панель инструментов

    1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
    2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

    Этот инструмент используется для устранения проблем со смешанным содержимым, проблем с сертификатами и других проблем.

    Основные характеристики:

    Проверка на переполнение потоковыми блоками

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

    Просмотр и тестовое редактирование стилей

    Анализируются такие параметры, как кэширование ресурсов, сжатие Gzip, наличие неиспользуемых фрагментов кода JS и правил CSS и многие другие параметры. Затем пользователю представляется сгруппированный список рекомендаций, применение которых может значительно оптимизировать скорость загрузки и отзывчивость страницы.

    Панель Application

    image

    • Быстрая очистка хранилищ и кэша.
    • Инспектирование и управление хранилищами, базами данных и кэшем.
    • Инспектирование и удаление файлов cookie.

    Панель Security

    image

    • Окно Security Overview быстро подскажет безопасна ли текущая страница или нет.
    • Возможность просмотреть отдельные источники, чтобы просмотреть соединение и детали сертификата (для безопасных источников) или узнать, какие запросы не защищены (для небезопасных источников).

    Панель Audits

    image

      DIT_MOS пришла СМС о штрафе 4000 что это такое. Дит москвы что это?
Оцените статью
Бизнес блог