The Search panel

Use the Search tool to find specific source files for a webpage.

A webpage is mainly an HTML file that's used by the browser to display content. But webpages commonly require other resources in addition to the HTML file, such as CSS, JavaScript, or image files, to provide richer content.

In the Sources tool, the Page tab of the Navigator pane shows all the resources that are downloaded by a webpage. But when there are many resources, it can become useful to search through them. To do text and regular expression searches across all the resources of a webpage, use the Search tool.

Open the Search tool by using a keyboard shortcut

To quickly open the Search tool:

  1. Open DevTools (F12).

  2. Press Control+Shift+F (Windows/Linux) or Command+Option+F (macOS).

The Search tool appears in the Drawer, and shows the search toolbar:

The Search tool, with the search toolbar.

See also Global keyboard shortcuts.

Open the Search tool by using the Command Menu

To open the Search tool from the Command Menu:

  1. Open DevTools (F12).

  2. Open the Command Menu, by pressing Control+Shift+P (Windows/Linux) or Command+Shift+P (macOS).

  3. Type search, and then press Enter.

The Command Menu with the Show Search item selected.

Search for text

To search for text in the current webpage and its resource files:

  1. Focus the search input field.
  2. Type the text you want to search.
  3. Press Enter.

The Search tool shows the list of matching resources, and highlights the corresponding lines of text. The number of matching files and lines is also indicated at the bottom of the tool.

Search results displayed in the search tool, with matching text highlighted in yellow.

Match case (lowercase or uppercase characters)

By default, the Search tool is not case-sensitive. A search for a term matches occurrences of that term, regardless of lowercase or uppercase characters.

To only find results that match a particular case (lowercase or uppercase characters), click the Match Case (Aa) button in the search toolbar.

Search for regular expressions

You can use regular expressions, including JavaScript regular expressions, to find matching results. To use a regular expression, click the Use Regular Expression (.*) button in the toolbar and enter a valid regular expression in the search input field.

Searching for a regular expression.

Open a found file in the Sources tool

After doing a search, click a result line to open the corresponding file. The Sources tool opens in the main panel and loads the resource file, scrolled to the matching line.

Clicking on a search line opens the Sources tool and loads the corresponding resource.

Update search results

A webpage can continue to request resources after it has finished loading, so the results displayed in the Search panel may become stale after a while.

To update the search results, do either of the following:

  • Search again by typing a term in the search input field.
  • Click the Refresh (Refresh search button) button in the toolbar.

To clear the search results, click the Clear (Clear search button) button in the toolbar.