Simulate mobile devices with Device Mode #DevToolsTips
Channel: Chrome for Developers
Date: 2022-12-02

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