Devfest South West, Nigeria - Chrome Developer Tools

Chrome DevToolsIterate, Debug, Profile

Tomiwa Ijaware

This page was intentionally left blank...

Software Engineer

The Chrome DevTools are a set of web authoring tools built into chrome.https://developers.google.com/web/tools/chrome-devtools

Ctrl/Cmd + Shift + iOr right click and select inspect element

The Panels - aka tools

● Elements● Sources● Network● Timeline● Profiles● Resources● Device mode● Remote Debugging● Settings

Quick walk through

IterateReal time iterations

Test and tweak your site design and content iteratively

Inspect and Edit Page styles

Manage your local Data Resources

Simulate Mobile Devices

Debug Find and fix errors in your code

Remote Debugging

Using JavaScript Snippets

Breakpoints and the Console

Cool Tricks to gain an extra 2s

Aggregated Timeline

Color Palettes

Dedicated Menu

Chrome Dev EditorBonus :)

Questions????