developer tools - подробное руководство разработчика
TRANSCRIPT
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