Duration: 4:40

25,689 views

449

Want to test your websites on different mobile devices without owning a real one? In this episode, Jecelyn walks you through 5 ways to simulate mobile viewport with the Chrome DevTools Device Mode. 2 bonus tips included!

Chapters:
0:00 Intro
0:23 Toggle Device Toolbar
0:53 Responsive view mode
1:02 Preset media query breakpoints
1:33 Custom media query breakpoints
1:57 Resize with common devices
2:16 Bonus tip: Take a screenshot with mobile device frame
2:28 Add a custom device
2:48 Resize with Rulers mode
3:06 Bonus tip: Simulate your page’s performance

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Links:
Simulate mobile devices with Device Mode → https://goo.gle/devtools-device-mode
Learn responsive design → https://goo.gle/3UoAO5x
Learn PWA → https://goo.gle/3EUW0KH

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer