Use Chrome DevTools device mode when you need touch emulation, network throttling, a custom user agent or browser debugging tools. Use Mobile Preview when you want a device frame always visible next to your code in VS Code, with live reload and no window switching. Many developers use both: Mobile Preview while writing, DevTools while debugging.
The short comparison
- Where it lives: DevTools device mode is inside the browser. Mobile Preview is a panel inside your editor, next to the code.
- What you see while typing: with DevTools you switch windows; with Mobile Preview the phone is already beside the code and refreshes on save.
- Look: DevTools shows a resized viewport. Mobile Preview shows a device frame with the notch or Dynamic Island and status bar, and can export it as a framed PNG.
- Debugging: DevTools gives you the console, network tab, element inspector, touch emulation, sensors and network throttling. Mobile Preview does not replace those.
- Cost: DevTools is free. Mobile Preview is free for three iPhones; Pro is €6.99 one time.
When DevTools device mode is the better tool
Choose it when you need to emulate touch events, throttle the network, change the user agent or device pixel ratio, or inspect the DOM and network requests. It is also the right place to debug a layout bug once you have found it.
When Mobile Preview is the better tool
Choose it for the constant, low-effort check while you write code: the device is always on screen beside the editor, so you notice a broken mobile layout the moment you save, without resizing windows. It is also convenient when an AI assistant edits files and you want to review the visual result as it changes, and when you need a clean framed screenshot for a post, a README or a store listing.
Using both
A simple routine is to keep Mobile Preview open while building, then open DevTools only when something looks wrong. Neither one replaces a test on a physical phone before you ship.
Frequently asked questions
- Is Mobile Preview a replacement for Chrome DevTools?
- No. It is a device frame beside your code for quick layout checks. DevTools remains the tool for debugging, touch emulation and network throttling.
- Is Mobile Preview an emulator?
- No. It renders your page in a frame with the device’s real viewport dimensions. It does not emulate iOS or Android.
- Can I use both at the same time?
- Yes. Many developers keep Mobile Preview open while coding and use DevTools when they need to debug.
- How much does Mobile Preview cost?
- The free version has no time limit and includes three iPhone models. Pro is a one-time payment of €6.99 for 35+ devices, including Android phones and iPads.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · How to preview your website on an iPhone inside VS Code · How to test responsive design in Cursor and Windsurf