Dev Tools

1.

DevTools

2.

Chrome DevTools
современные инструменты
разработчика
#Эффективность #Надёжность #Экспертиза

3.

• Основные функции
• Network
• Source
• Экспериментальные и полезные
функции
• Отличие Chrome DevTools от FireFox
DevTools

4.

Основные
функции DevTools
• Работа с DOM
• Работа со стилями
• Консоль

5.

Работа с DOM
Изменение
элементов DOM а
так же его структуры

6.

Работа с DOM
Поиск элементов
DOM по его
атрибутам

7.

Работа с DOM
Дерево
специальных
возможностей

8.

Работа с DOM
Создание
скриншота
DOM элемента

9.

Работа со стилями
Просмотр дерева
стилей примененных
к элементу

10.

Работа со стилями
Изменение стилей
онлайн

11.

Работа со стилями
Добавление новых
селекторов и применение
псевдоклассов

12.

Работа со стилями
Подсвечивание
неподдерживаемых
стилей

13.

Работа со стилями
Просмотр
отрендеренного
шрифта

14.

Консоль разработчика
Вывод ошибок,
логирование данных

15.

Консоль разработчика
Отслеживание
переменных

16.

Консоль разработчика
Стиль jQuery

17.

Консоль разработчика
Вывод данных в
виде таблицы и
копирование
объектов

18.

Network
• Работа с запросами
• Скорость соединения
• Диафильм

19.

Работа с запросами
Просмотр тела
запроса и ответа
от сервера

20.

Работа с запросами
Повторная отправка
прямо из консоли

21.

Работа с запросами
Фильтрация
запросов

22.

Скорость соединения
Принудительное
замедление
скорости
соединения

23.

Диафильм
Capture
screenshot

24.

Source
• Просмотр исходного кода
• Debug
• Сниппеты

25.

Просмотр исходного кода
Просмотр и
редактирование
исходных файлов прямо
в браузере

26.

Debug
Точки остановка в js
и DOM

27.

Debug
Стек вызовов

28.

Debug
Отслеживание
событий

29.

Сниппеты
Запуск кода на
странице с
помощью DevTools

30.

Экспериментальные и
полезные функции
• DesignMode
• Debug анимации
• Recorder
• Rendering

31.

DesignMode
Редактирование страницы
с помощью функции
document.designMode

32.

Debug анимации
Возможность просмотра
анимации и ее отладки
прямо в консоли

33.

Recorder
Воспроизведение флоу на
сайте с записью событий

34.

Rendering
Отладка ререндеринга
элементов на сайте

35.

Отличия Chrome DevTools и
Firefox DevTools

36.

Основные
Удобство использования
отличия
Chrome DevTools
FireFox DevTools
Отладка ререндеринга
на сайте и громоздкий
•элементов
Более сложный
User friendly интерфейс
интерфейс
Больше функционала «из коробки»
Больше возможностей и
Открытый исходный код
подключаемого функционала
Для разработки базово подходят оба браузера, однако
Chrome имеет больший функционал, что позволяет более
гибко производить отладку веб-сайтов

37.

Спасибо за внимание
www.st.by
[email protected]
Instagram