Руководство по Chrome 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

54. Conditional Breakpoints

55. Asynchronous Stack Traces

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

86. Ссылки
• https://developer.chrome.com/devtools
• https://developers.google.com/web/tools/chrome-
devtools/

87. Спасибо!
• Александр Бойченко
• @banzalik