Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Workspace

Published on

Settings. Settings > Workspace lets you save changes that you make within DevTools to source code that's stored on your computer.

Important

DevTools automatically maps your local sources to network resources using source maps. This way, you can make changes to sources in DevTools and immediately see the effect on the website you host locally and view in Chrome.

To configure your workspaces, open Settings. Settings > Workspace.

Customize exclusions

The Folder exclude pattern is the default global RegEx pattern that lists common and third-party folders and file types that DevTools excludes from workspaces so you can focus only on your code. Folder exclude pattern in the Workspace tab. You can manually add new folders or file types to the pattern. Pattern changes take effect after reloading DevTools.

To change the default global list of excluded folders and files, edit the Settings. Settings > Workspace > Folder exclude pattern textbox.

Manage Workspaces

The Workspace tab lists folders you have set up as Workspaces and, for each folder, subfolders you manually excluded. A workspace folder with excluded subfolders. Changes to files in subfolders listed as excluded don't persist. Excluded subfolders are workplace-specific, not global.

To add a new Workspace:

  1. Open Settings.
  2. In the Workspace tab, click Add folder.
  3. Select the folder with your sources.
  4. Click Allow in the prompt at the top to let DevTools make changes to sources. The prompt requesting full access to sources for DevTools.

To remove a workspace, click Close. next to the corresponding folder.

Published on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.