Skip to content

Instantly share code, notes, and snippets.

@m0rtyn
Last active January 12, 2018 03:48
Show Gist options
  • Save m0rtyn/d4cd465e9a9fcb611e83e1b33c494b02 to your computer and use it in GitHub Desktop.
Save m0rtyn/d4cd465e9a9fcb611e83e1b33c494b02 to your computer and use it in GitHub Desktop.
Лекция по HTML, CSS, Devtools

Введение DevTools

Вкладки:

  • Elements +
  • Console +
  • Sources
  • Network +
  • Perfomance
  • Memory
  • Application +
  • Security
  • Audits

Elements

HTML view

  • Показывает DOM-дерево
  • Позволяет изменеие/добавление/удаление DOM-узлов, аттрибутов, классов, данных.
  • Показывает псевдо-элементы

CSS view

  • Показывает CSS-правила для активного элемента (V специфичност)
  • Включение/выключение свойств
  • Изменение правил для псевдо-классов
  • Указание источников CSS-правил

Sources

  • Изменение исходных файлов приложения
  • Экспорт изменений
  • Ослеживание версий файла

Console

  • Запуск JS-комманд
  • Взаимодействие с app's views and scripts
  • Просмотр лога событий

Network

  • Информация ресурсов — размер, тип, время и тд
  • Детали ответов с сервера
  • Временная шкала сетевых запросов
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment