Search all code in chrome dev tools sources tab

Steps to search across all client side code in the Sources tab of Chrome dev tools. Includes all JavaScript, HTML and CSS downloaded to the browser.

1. Press F12 to open dev tools
2. Select the Sources tab
3. Open the Search tab with:
   • Mac: Cmd + Opt (⌥) + F
   • Windows: Ctrl + Shift + F
4. Type the text you want to search for and press Enter

For example, if you want to find all code that logs messages to the console you can search for console.log. Click on any of the search results to open the file in the Sources panel, showing the line with the selected result.

Adding JS breakpoints

Add breakpoints to any JavaScript code in the Sources panel by clicking the left side of the line where you want to pause execution, a blue indicator shows when a breakpoint has been added.

Refresh the page (if required) to execute the code with the breakpoint. Step through the code with the controls at the top of the right panel, this panel also includes local variables and other debug information for that point in time.

To remove a breakpoint click the blue indicator on the left of the line, you can also see a list of all breakpoints on the right hand panel of the Sources tab, they can be removed or disabled here too.

Edit code in the browser

You can edit code in the browser with a feature called local overrides, this is useful for debugging client side JavaScript or quickly testing changes locally without impacting other users of the site.

Steps to edit code with local overrides.

1. Right click the file you want to edit in the Sources tab
   • In the file tree or the code itself
2. Select Override content
   • If it's the first time you may need to select a folder to store override files and allow DevTools to access the folder
3. Edit the file
4. Save and refresh

Breakpoints work the same way for overridden files including new and edited lines.

Overridden files are displayed in the left panel under the Overrides tab.