devfest south west, nigeria - chrome developer tools
TRANSCRIPT
![Page 1: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/1.jpg)
Chrome DevToolsIterate, Debug, Profile
![Page 2: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/2.jpg)
Tomiwa Ijaware
This page was intentionally left blank...
Software Engineer
![Page 3: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/3.jpg)
The Chrome DevTools are a set of web authoring tools built into chrome.https://developers.google.com/web/tools/chrome-devtools
![Page 4: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/4.jpg)
Ctrl/Cmd + Shift + iOr right click and select inspect element
![Page 5: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/5.jpg)
![Page 6: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/6.jpg)
The Panels - aka tools
● Elements● Sources● Network● Timeline● Profiles● Resources● Device mode● Remote Debugging● Settings
![Page 7: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/7.jpg)
Quick walk through
![Page 8: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/8.jpg)
IterateReal time iterations
Test and tweak your site design and content iteratively
![Page 9: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/9.jpg)
Inspect and Edit Page styles
![Page 10: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/10.jpg)
Manage your local Data Resources
![Page 11: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/11.jpg)
Simulate Mobile Devices
![Page 12: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/12.jpg)
Debug Find and fix errors in your code
![Page 13: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/13.jpg)
Remote Debugging
![Page 14: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/14.jpg)
Using JavaScript Snippets
![Page 15: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/15.jpg)
Breakpoints and the Console
![Page 16: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/16.jpg)
Cool Tricks to gain an extra 2s
![Page 17: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/17.jpg)
Aggregated Timeline
![Page 18: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/18.jpg)
Color Palettes
![Page 19: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/19.jpg)
Dedicated Menu
![Page 20: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/20.jpg)
Chrome Dev EditorBonus :)
![Page 21: Devfest South West, Nigeria - Chrome Developer Tools](https://reader036.vdocuments.mx/reader036/viewer/2022062503/58ed23a41a28ab661b8b4697/html5/thumbnails/21.jpg)
Questions????