Developer tools - подробное руководство разработчика
•
1 like•2,606 views
Руководство по Chrome Developer Tools
More Related Content
Similar to Developer tools - подробное руководство разработчика (20)
More from Aleksandr Boichenko (6)
Developer tools - подробное руководство разработчика
- 1. Developer tools подробное руководство разработчика Бойченко Александр
- 2. Браузеры
- 3. Chrome
- 4. Firefox
- 5. Internet Explorer / Edge
- 6. Opera
- 7. Safari
- 8. История
- 9. Сейчас
- 10. Chrome
- 11. Тюнинг • chrome://flags • Enable Developer Tools experiments • Enable Experimental JavaScript • Enable experimental Web Platform features
- 14. Developer Tools • Открыть DevTools - F12 • https://developer.chrome.com/devtools/docs/ shortcuts - список всех горячих клавиш
- 15. Developer Tools Panels • Elements - работа с DOM, CSS и событиями. • Network - мониторинг сетевых запросов. • Sources - доступ, редактирование и отладка исходного кода. • Timeline - работа и запись активности на странице. • Profiles - профайлинг процессора и памяти. • Resources - работа с cookies, local storage, indexedDB и пр. • Audits - поиск проблем с сетью и производительнотью страницы. • Console - работа с javascript машиной • Plugins - React, Angular, Grunt, Bash, Backbone …
- 16. Developer Tools
- 21. Elements Panel
- 35. Network Panel
- 45. Sources Panel
- 51. Editing Content
- 52. Workspaces
- 53. Restart Frame
- 56. Store as Global
- 57. Snippets
- 58. Timeline Panel
- 63. Profiles Panel
- 65. Resources Panel
- 67. Audits Panel
- 70. Console Panel
- 83. Device mode
- 85. И еще много всего… • Подмена User-Agent • Javascript Сonsole в любой вкладке DevTools (клавиша ESC) • Log XMLHttpRequests • Эмуляция touch screen • Эмуляция geolocation • Эмуляция акселерометра • FPS metter • Поиск проблем при скролле • Мониторинг • Удаленный дебаг мобильного Chrome
- 87. Спасибо! • Александр Бойченко • @banzalik