Developer tools подробное руководство разработчика

Бойченко Александр

Браузеры

Chrome

Firefox

Internet Explorer / Edge

Opera

Safari

История

Сейчас

Chrome

Тюнинг

• chrome://flags

• Enable Developer Tools experiments

• Enable Experimental JavaScript

• Enable experimental Web Platform features

Developer Tools

• Открыть DevTools - F12

• https://developer.chrome.com/devtools/docs/shortcuts - список всех горячих клавиш

Developer Tools Panels• Elements - работа с DOM, CSS и событиями.

• Network - мониторинг сетевых запросов.

• Sources - доступ, редактирование и отладка исходного кода.

• Timeline - работа и запись активности на странице.

• Profiles - профайлинг процессора и памяти.

• Resources - работа с cookies, local storage, indexedDB и пр.

• Audits - поиск проблем с сетью и производительнотью страницы.

• Console - работа с javascript машиной

• Plugins - React, Angular, Grunt, Bash, Backbone …

Developer Tools

Elements Panel

Network Panel

Sources Panel

Editing Content

Workspaces

Restart Frame

Conditional Breakpoints

Asynchronous Stack Traces

Store as Global

Snippets

Timeline Panel

Profiles Panel

Resources Panel

Audits Panel

Console Panel

Device mode

И еще много всего…• Подмена User-Agent

• Javascript Сonsole в любой вкладке DevTools (клавиша ESC)

• Log XMLHttpRequests

• Эмуляция touch screen

• Эмуляция geolocation

• Эмуляция акселерометра

• FPS metter

• Поиск проблем при скролле

• Мониторинг

• Удаленный дебаг мобильного Chrome

Ссылки

• https://developer.chrome.com/devtools

• https://developers.google.com/web/tools/chrome-devtools/

Спасибо!

• Александр Бойченко

• @banzalik