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.
  • Open the published URL in Chrome to preview live behavior and use DevTools for testing responsiveness and debugging.

To preview your Webflow site in a real browser like Chrome, you need to publish it to a staging or custom domain. The Designer preview reflects the layout inside the editor, but a browser preview shows the live interactions, styles, and loading behavior.

1. Use Webflow’s Staging Domain

  • Click the “Publish” button in the top-right corner of the Webflow Designer.
  • In the dropdown, select your Webflow.io domain (e.g., your-site.webflow.io).
  • After publishing, click the link or manually open the URL in Chrome.

2. Publish to a Custom Domain (Optional)

  • If you’ve added a custom domain under Project Settings > Hosting, you can also choose to publish there.
  • After publishing to your domain, open that URL directly in Chrome to test your site.

3. Use Browser Developer Tools

  • While viewing your site in Chrome, you can use Chrome DevTools (right-click > Inspect) to simulate different devices or view live code behavior.
  • This is useful for checking responsive design or debugging issues not visible in Webflow’s Designer.

Summary

To preview your Webflow site in Chrome, publish it to the Webflow.io staging domain or your custom domain, then open that link in Chrome. This lets you see exactly how it renders and behaves in a real environment.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are some recommended methods for setting up a staging environment in Webflow that allows for testing website changes before going live?
How can I auto-populate a form field in Webflow with the CMS item name from the same page?
How can I ensure that the dates and times in the dynamic collections on my Webflow site appear correctly in French and Arabic? Additionally, how can I add an RTL code for my Arabic site?
Has anyone found a way to create a copy to clipboard button in Webflow that can dynamically copy the link of a CMS item without manually creating a link for each button? Thank you!
Is anyone else experiencing issues with Webflow when uploading multiple custom fonts at once? It seems that now you can only select and install one font at a time, and attempting to upload another without installing causes Webflow to crash.
How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?
How can I create a simple floating animation using images as floating objects in Webflow?
Is it possible to display data from a webhook response on a Webflow page?
How can I enable scroll in the navbar on my Webflow site so that all navigation links are visible on mobile?
What referral program service have you used to integrate with Webflow?
How can I create an interaction for a scrolling text on loop on the homepage of my website in Webflow?
How can I implement a GDPR-compliant server-side cookie management solution on Webflow hosting, including a cookie consent banner or popup, and are there any third-party tools or workarounds that can assist with this?
How can I fix the issue with headings on my website's CMS collection pages in Webflow to avoid SEO problems caused by an excessive number of H1, H2, and H3 headings? Is there a way to increase the custom fields limit or find an alternative solution to avoid recreating each page manually?
Is there a way to animate the opening of the dropdown menu in Webflow to make it smoother and less abrupt?
Where can I start to resolve an 'INP issue' with mobile views for a Webflow site flagged by Google search console?
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!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?