A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.chrome.com/docs/devtools/customize below:

Customize DevTools | Chrome DevTools

Customize DevTools

Stay organized with collections Save and categorize content based on your preferences.

This page lists the ways you can customize Chrome DevTools.

Settings

settings Settings > Preferences contains many options for customizing DevTools.

See Open Settings and Preferences.

Dark theme

You can enable dark theme in Settings or the Command Menu.

  1. Open the Command Menu.
  2. Start typing dark, select the Switch to dark theme command, and then press Enter to run the command.

  3. Alternatively, set your theme in settings Settings > Preferences > Appearance > Themes.

Dynamic theme

DevTools can automatically match Chrome's color theme.

To set a theme:

  1. Open a new tab and click edit Customize Chrome in the right bottom corner.
  2. In Appearance, pick a theme through wallpaper Change themes or select a color palette.

To turn off dynamic theming, clear settings Settings > Preferences > Appearance > check_box_outline_blank Match Chrome color scheme and reload DevTools.

Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

Click more_vert More Tools to open other Drawer tabs.

Change DevTools placement

By default, DevTools is docked to the right of your viewport. You can also dock to the bottom or left sides or undock DevTools into a separate window.

You can change the placement of DevTools in two ways:

To toggle Restore last dock position with a keyboard shortcut, press:

Reorder panels, tabs, and panes

To change ordering, click and drag left or right any of the following:

Additionally, you can move panels and tabs up and down to and from the Drawer. To do this, right-click the panel or tab and select Move to top or Move to bottom from the drop-down menu.

Your custom tab order persists across DevTools sessions.

Panel layout

By default, DevTools will auto-rearrange your panel layout depending on window size. You can disable the auto-rearrangement. Go to settings Settings > Preferences > Appearance and update the panel layout based on your preference.

For example, the Styles pane in the Elements panel will move from the side to the bottom when screen size is small. If you want the Style pane to always stay on the side, change the panel layout to vertical.

Change DevTools UI language

See settings Settings > Preferences > Appearance > Language.

Sync settings

You can sync your DevTools settings across multiple devices.

To enable sync, first turn on Chrome Sync. Once enabled, your DevTools settings are synced by default.

You can enable or disable the DevTools settings sync separately using the settings Settings > Sync > check_box Enable settings sync checkbox.

DevTools syncs most of the settings except those in the Workspace, Experiments, and Devices tabs and a few other general settings. The state of the Enable settings sync checkbox is synced across devices as well.

Note: DevTools also doesn't sync Snippets, they are stored as local preferences.

For example, the following Appearance settings are synced, so you have a consistent experience across devices and don't need to re-define the same settings again.

However, the dock setting isn't synced because developers have different dock preferences when debugging on different sites.

Customize keyboard shortcuts

See Settings > Shortcuts.

Enable experiments

See Settings > Experiments.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-11-01 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-01 UTC."],[],[]]


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4