> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Preview > Learn how to use Preview to view and interact with your web app as you build. Preview shows your web app output and offers browser developer tools and debugging capabilities. When you launch your web app using the **Run** button, Replit assigns it a temporary URL that's reachable on the internet. The Preview tool renders the page just as you would see in a browser. It also includes developer tools with functionality similar to what you find in popular browsers. Preview is the new name for Webview. screenshot of the Preview tool ## Features Preview includes the following functionality to let you seamlessly test and debug your web apps: * **Live web view**: See your app and interact with it without leaving your browser tab * **Developer tools**: Use built-in tools to diagnose problems quickly * **Responsive testing**: View your app in different mobile device screen sizes ## Usage The Preview tool automatically opens when you run a web app. You can toggle this behavior in the **User Settings** tool under the **Automatic Preview** setting. The following instructions explain how to open Preview. From the left **Tool dock**: 1. Select All tools icon **All tools** to see a list of Project Editor tools. 2. Select Preview icon **Preview**. From the **Search bar**: 1. Select the magnifying glass icon magnifying glass at the top to open the search tool 2. Type "Preview" to locate the tool and select it from the results. ## Location bar The location bar at the top of the **Preview** tab includes the following tools: * **Back button**: Navigate to the previous page in the browsing history * **Forward button**: Navigate to the next page in the browsing history * **App domain**: View information about your Replit App's temporary URL by selecting `{...}.replit.dev` * **Address field**: View the current URL path or enter a new path ## Browser tools The browser tools on the right side of the location bar include the following functions: * **Screen size**: Select from different device screen size presets to test responsive designs * **Devtools**: Toggle the [developer tools](#Developer_tools) pane * **New tab**: Open your web app URL in a new browser tab **Building a mobile app?** The Preview panel also supports previewing on an **iOS Simulator** or **Android Emulator**. See [Native Mobile Apps](/replitai/building-mobile-apps#preview-on-a-simulator-or-emulator) for details. ## Developer tools Developer tools, powered by the Eruda open source project, help you perform the following tasks: * View and interact with the JavaScript console in the context of your app * Inspect DOM elements * Monitor network requests * Configure display and behavior preferences To access the developer tools, select the wrench icon **Devtools** button at the top of the **Preview** tab to toggle them. The following sections describe the actions you can perform in each developer tools tab. ### Console The **Console** tab displays JavaScript logs generated by your application. In this tab, you can perform the following actions: * **Clear output**: Remove all console output by selecting the clear icon circle with slash icon. * **Filter output**: View console output filtered by type (All, Info, Warning, or Error). * **Filter matching text**: Show output that matches by selecting the filter icon filter icon and entering the text. * **Copy output**: Copy selected console messages by selecting the copy icon copy button. * **Run JavaScript code**: Run JavaScript code in your app's context by selecting the right arrow icon right angle brace. Enter the expression and select **Execute**. ### Elements The **Elements** tab lets you inspect and modify the DOM structure of the web page. * **View element details**: View details about the DOM element and the location in the HTML code * **Copy output**: Copy selected console messages by selecting the copy icon copy button. Use the select icon arrow selection to toggle selection mode. After entering selection mode, select an element on the web page. The HTML and CSS for that element should appear in the Elements tab. ### Network The **Network** tab monitors requests initiated by the web page. In this tab, you can perform the following actions: * **Track requests**: View all network requests initiated by your app. Select a request to view details. * **Filter**: View matching results by selecting the filter icon funnel icon to show results that match your text. Enter an empty filter to clear it. * **Copy**: Copy storage information by selecting the copy icon copy button. ### Resources The **Resources** tab shows assets loaded by the page and browser storage, such as cookies and local storage. You can view and refresh lists for the following asset types: * JavaScript files * Stylesheets * Iframes * Images In this tab, you can perform the following actions: * **View storage**: Review local storage, session storage, and cookies. * **Filter**: View matching results by selecting the filter icon funnel icon to show results that match your text. Enter an empty filter to clear it. * **Clear**: Delete all data for that storage type by selecting the clear icon clear button. * **Delete selected**: Remove storage items by selecting the delete icon "X" icon. * **Copy**: Copy storage information by selecting the copy icon copy button. ### Settings The **Settings** tab allows you to customize the developer tools' appearance and behavior. This tab includes customization options for the following: * **Tool settings**: Customize options that apply to each tool tab * **JavaScript controls**: Specify JavaScript behavior options, such as turning it off to test how your app behaves * **Display preferences**: Change the theme, panel size, transparency, and other behavior of the developer tools