Webflow sync, pageviews & more.
NEW

How can I preview a Webflow site in the actual browser like Chrome instead of the designer preview?

TL;DR
  • Publish your site to the Webflow.io staging domain or a connected custom domain, then open the link in Chrome to view it in a real browser.
  • Use the CMS preview URL for draft content and Chrome’s DevTools for responsive testing.

To view your Webflow site in a real browser like Chrome, rather than in the built-in Designer preview, you're looking to open the staged (published but private) or fully published version of your site. Here’s how to do that.

1. Use the Webflow Staging Subdomain

  • Publish your site to Webflow’s staging environment by clicking Publish in the top-right corner of the Designer or project settings.
  • Choose the Webflow.io domain (usually something like yoursite.webflow.io).
  • Once publishing is complete, click the link icon to open the live preview in Chrome.
  • You are now viewing your site in a real browser environment—not the Designer.

2. Publish to a Custom Domain (Optional)

  • If you've connected a custom domain, you can also publish to that domain using the same method.
  • Select the custom domain checkbox when hitting the Publish button.
  • Visit your custom domain in Chrome (e.g., https://yourdomain.com) to preview it live.

3. Use Preview Mode URL (for CMS/Collection Items)

  • In Editor or Designer mode, navigate to a CMS item and click eye icon (Preview).
  • Copy the preview URL and paste it into Chrome.
  • This lets you preview draft or staged content that hasn’t yet been published.

4. Enable Responsive Testing in Chrome

  • After loading your site in Chrome, press F12 or right-click and choose Inspect.
  • Click the device toggle icon (top-left of the DevTools panel) to simulate mobile/tablet viewports directly in the browser.

Summary

To preview your Webflow site in Chrome, publish it to the Webflow.io staging domain or a custom domain, then open that link in Chrome. This ensures you're testing in a real browser environment instead of the internal Designer preview.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a lightbox hover effect with text in Webflow similar to the example shown in the tutorial?
How can I make the links in my Webflow navbar take users to the exact start of each section on my home page?
How do I fix the issue where my mobile drop-down menu does not scroll fully even though I have set the height and overflow properties correctly? I want it to work like the Webflow website. Thank you.
Is there a way to animate the border lines of button menus in Webflow, wherein the line appears from left to right as if it's being drawn, instead of just changing the width?
Need assistance with Webflow's Finsweet filter. The search field and filtering number are functional, but the checkbox filter is not working. Urgently seeking help with this issue.
How can I fix the issue of my Webflow site not scrolling on mobile?
Why are the fields filled in Ukrainian in my Webflow RSS feed displaying as random characters and how can this be fixed?
How do I remove the white space at the bottom of a site in Webflow on the Gallio theme?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I create a navigation with a sub-menu option in Webflow's navbar component?
How can I select product variants using swatches in Webflow and display the corresponding image for each variant?
Is it possible to retrieve the items, price, and quantity from the shopping cart in my Python code when using a Stripe Gateway checkout on Webflow for integration with iDeal in the Netherlands?
How can I prevent DotLottie animations from crashing in Android Mobile browsers on my Webflow site?
How can I keep images in the same position when resizing in Webflow without using one large image? I have tried using %, VH, and VW, and have reached out to Webflow for support. Can someone please assist with this issue? Thank you.
How can I ensure that the sizes and positioning of my web design elements in Webflow remain consistent and accurate across different views, such as the designer and the toggle preview?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?