# Source: https://docs.replit.com/replit-workspace/workspace-features/preview.md

> ## 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

> The Preview workspace tool lets you instantly view and interact with your web app.

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.

<Note>
  Preview is the new name for Webview.
</Note>

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5ffbd7ac3ed55cbb43c25b699562cf22" alt="screenshot of the Preview tool" data-og-width="3078" width="3078" data-og-height="1638" height="1638" data-path="images/workspace/preview-tool.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=21bd50a65b404b680d8c4d9d6f55afa5 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=d34438236911c793e0d8e5a079dbfe9e 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=a53c3d3ce638f876ca5c0f70e89350eb 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=bb229f1ef747442962c675470eb4551c 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=a0358f29ba17bb146d6b545db857af7f 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/preview-tool.png?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=195af0a85c787169cfb01d9a5f16b90a 2500w" />
</Frame>

## 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.

<Accordion title="How to access Preview">
  From the left **Tool dock**:

  1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1ce550630ae0eaa9eb8cb66e68da4f04" alt="Preview icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/preview-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=20436bd411c115d46de155a315f814bc 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f40bc6b75037a9a5af1d43cdf02d8541 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9d94f43e391be19f19a74e4d0325735e 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8224fcbc0130b63408bdb633310deaef 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0ce2006c5bc003f411e8cb86bbd72a7e 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b67f085630c311a49f5a40d12c28b69a 2500w" /> **Preview**.

  From the **Search bar**:

  1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Preview" to locate the tool and select it from the results.
</Accordion>

## 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

## Developer tools

Developer tools, powered by the <a href="https://github.com/liriliri/eruda" target="_blank">Eruda</a> 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 <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2f3caa243a7f4b532d079d01169ac006" alt="wrench icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/wrench.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6083b2ed2f956cc763b52b4059980a09 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5559da339dc5f7dec13159cfd6d011a0 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7949abc4c19522248620fce84119b070 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=38e71072a319e565b88c34b90d2c665e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=be17fc9574f32c839c41bb36b955f8d9 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bdcf0259f4d1b72f875bd3cd1bab7b86 2500w" /> **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 <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=66073b14bf1a1f9bf18f0b40938d92c1" height="16" width="16" alt="clear icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/clear.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=025a37680f51235e13b522159e5c1d6a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=925d63ace9aafed633894de43838e986 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eb6273efed1a68ee596e2a92bd401551 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=9dff38ecbbee8eaa509d1365953239fd 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=520c4f1db6467a493c0d5d4ef1d022b0 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=881b7a7a16c85b675144befb502c1ab6 2500w" /> 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 <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> filter icon and entering the text.
* **Copy output**: Copy selected console messages by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.
* **Run JavaScript code**: Run JavaScript code in your app's context by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae3adda9dd3fd3948f84d06eb6cb65ed" height="16" width="16" alt="right arrow icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/arrow-right.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=55bf8075a4a3f3393e186a8a2c4be7c8 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=5c2b0a5bc4935719657010104eb582a5 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=62bbf342d5d5a2b1578538277e222468 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e5144e333bffd40c82bd39b4d2094a49 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=dc71412dbbe62e5f3c3ba9f1fe218ba5 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cd074e8feea287f334f69e19584155e 2500w" /> 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 <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.

Use the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8aeef14671a3f59d81c45b35b2b9aede" height="16" width="16" alt="select icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/select.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e5ccda2cbc2423b813db9b695340a932 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=710cb7a14263cba1fb1589de88672eec 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a543abf4a0ca6295cfe68e7e815e238f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f4e4cd2b07b5b719d2c25dee2f699f6e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2cb44dd9b402456484e36ef10055401c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f553862df5969c9af9dfae0c7f0762bc 2500w" /> 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 <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> funnel icon to show results that match your text. Enter an empty filter to clear it.
* **Copy**: Copy storage information by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> 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 <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> 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 <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=66073b14bf1a1f9bf18f0b40938d92c1" height="16" width="16" alt="clear icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/clear.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=025a37680f51235e13b522159e5c1d6a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=925d63ace9aafed633894de43838e986 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eb6273efed1a68ee596e2a92bd401551 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=9dff38ecbbee8eaa509d1365953239fd 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=520c4f1db6467a493c0d5d4ef1d022b0 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=881b7a7a16c85b675144befb502c1ab6 2500w" /> clear button.
* **Delete selected**: Remove storage items by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=74c6bd9909a55d49974da517e817518e" height="16" width="16" alt="delete icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/delete.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a4b1891d64f653e822bf49c1c07ffa77 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b82efad0eca16e08c692d18b12d2e4e5 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0e0bbf7e1eb7c7862b605d545036313e 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bd45f5e57bf101e37cbd126083d4f733 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=70082ebb03f90e07b041777b90b032d5 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bd94acd362159e68edb7afac4072073e 2500w" /> "X" icon.
* **Copy**: Copy storage information by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> 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