diff --git a/microsoft-edge/devtools/about-tools.md b/microsoft-edge/devtools/about-tools.md index 6c262aa9bc..e94e86a751 100644 --- a/microsoft-edge/devtools/about-tools.md +++ b/microsoft-edge/devtools/about-tools.md @@ -18,16 +18,16 @@ DevTools provides more than 30 tools, consisting of _Default tools_ and _More to By default, the following tools are listed in the **Activity Bar** at the top of DevTools: -* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool** -* ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** -* ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** -* ![Elements icon](./about-tools-images/elements-icon.png) **Elements** -* ![Console icon](./about-tools-images/console-icon.png) **Console** -* ![Sources icon](./about-tools-images/sources-icon.png) **Sources** -* ![Network icon](./about-tools-images/network-icon.png) **Network** -* ![Performance icon](./about-tools-images/performance-icon.png) **Performance** -* ![Memory icon](./about-tools-images/memory-icon.png) **Memory** -* ![Application icon](./about-tools-images/application-icon.png) **Application** +* **Inspect tool** +* **Device Emulation** +* **Welcome** +* **Elements** +* **Console** +* **Sources** +* **Network** +* **Performance** +* **Memory** +* **Application** ![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png) @@ -37,16 +37,16 @@ By default, the following tools are listed in the **Activity Bar** at the top of | Tool | Purpose | Article | | --- | --- | --- | -| ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | -| ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | -| ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, release notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) | -| ![Elements icon](./about-tools-images/elements-icon.png) **Elements** | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | -| ![Console icon](./about-tools-images/console-icon.png) **Console** | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) | -| ![Sources icon](./about-tools-images/sources-icon.png) **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) | -| ![Network icon](./about-tools-images/network-icon.png) **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) | -| ![Performance icon](./about-tools-images/performance-icon.png) **Performance** | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Analyze runtime performance (tutorial)](./performance/index.md) | -| ![Memory icon](./about-tools-images/memory-icon.png) **Memory** | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) | -| ![Application icon](./about-tools-images/application-icon.png) **Application** | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) | +| **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage. When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) | +| **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) | +| **Welcome** | The **Welcome** tool opens when you first open DevTools. It displays links to developer docs, latest features, release notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) | +| **Elements** | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) | +| **Console** | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) | +| **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) | +| **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) | +| **Performance** | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Analyze runtime performance (tutorial)](./performance/index.md) | +| **Memory** | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | [Fix memory problems](memory-problems/index.md) | +| **Application** | Use the **Application** tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | [The Application tool, to manage storage](storage/application-tool.md) | The **Elements**, **Console**, and **Sources** tools (tabs) are permanent, in the **Activity Bar**. The other tool tabs can be removed, or moved down to the **Quick View** toolbar. @@ -128,7 +128,7 @@ To move a tool to the other toolbar, right-click the tool's tab and then select ![The right-click menu for a tool in the Quick View toolbar, including the 'Move to top Activity Bar' command](./about-tools-images/move-from-quickview-to-activitybar.png) -To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Or, click the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) button and then select **Run command**. +To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Or, click the **Customize and control DevTools** button and then select **Run command**. @@ -148,7 +148,7 @@ The **Console** tool is also a permanent tab on the **Quick View** toolbar. In To restore all of the default tool tabs in the **Activity Bar** and **Quick View**: -1. In DevTools, select **Customize and control DevTools** (![Customize and control DevTools icon](./about-tools-images/customize-devtools-icon-light-theme.png)) > **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**. +1. In DevTools, select **Customize and control DevTools** > **Settings** > **Preferences**. 1. Click the **Restore defaults and refresh** button. DevTools restarts, and the default tabs appear in both toolbars. diff --git a/microsoft-edge/devtools/contact.md b/microsoft-edge/devtools/contact.md index c31aa1eaa3..05051d2dea 100644 --- a/microsoft-edge/devtools/contact.md +++ b/microsoft-edge/devtools/contact.md @@ -25,9 +25,11 @@ There are several ways to get in touch with the Microsoft Edge DevTools team: To report a bug or request a feature from within DevTools: -1. Click the **Help** (![Help icon](./contact-images/help-icon.png)) icon, and then click **Send Feedback** (![Send Feedback icon](./contact-images/send-feedback-icon-light-theme.png)) (or press **Alt+Shift+I** on Windows and Linux or **Option+Shift+I** on macOS) to open the **Send feedback** window. +1. Click **Send Feedback** (![Send Feedback icon](./contact-images/send-feedback-icon-light-theme.png)) (or press **Alt+Shift+I** on Windows and Linux or **Option+Shift+I** on macOS). -1. In the **Send feedback** window, describe your bug or feature request. You can also attach a screenshot to help the team understand the problem better and add your email address so we can follow-up with you. + The **Send feedback** dialog opens. + +1. Describe your bug or feature request. You can also attach a screenshot to help the team understand the problem better and add your email address so we can follow-up with you. 1. Press **Send** to create a tracked issue for the Microsoft Edge development team. diff --git a/microsoft-edge/devtools/crash-analyzer/index-images/console-icon.png b/microsoft-edge/devtools/crash-analyzer/index-images/console-icon.png deleted file mode 100644 index e7d6581c89..0000000000 Binary files a/microsoft-edge/devtools/crash-analyzer/index-images/console-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/crash-analyzer/index.md b/microsoft-edge/devtools/crash-analyzer/index.md index 84fb98835f..f920120d59 100644 --- a/microsoft-edge/devtools/crash-analyzer/index.md +++ b/microsoft-edge/devtools/crash-analyzer/index.md @@ -177,7 +177,7 @@ If you want to test the **Crash analyzer** tool but you don't have a stack trace 1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. -1. In DevTools, on the **Activity Bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens. +1. In DevTools, on the **Activity Bar**, click **Console**. The **Console** tool opens. 1. Select the error stack trace that's displayed in the **Console** tool and copy it. diff --git a/microsoft-edge/devtools/issues/index-images/elements-tool-icon.png b/microsoft-edge/devtools/issues/index-images/elements-tool-icon.png deleted file mode 100644 index f7d8dc581d..0000000000 Binary files a/microsoft-edge/devtools/issues/index-images/elements-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/issues/index.md b/microsoft-edge/devtools/issues/index.md index f0120183b4..fd38b00de5 100644 --- a/microsoft-edge/devtools/issues/index.md +++ b/microsoft-edge/devtools/issues/index.md @@ -151,7 +151,7 @@ To display an issue for elements with wavy underlines in the DOM tree: 1. Right-click anywhere in the webpage and then select **Inspect**. Or, press **F12**. DevTools opens next to the webpage. -1. In DevTools, select the **Elements** (![Elements tool icon](./index-images/elements-tool-icon.png)) tab. +1. In DevTools, select the **Elements** tab. 1. In the DOM tree, expand `` > `
` > `
` > `
` > ``. The `` element start-tag has a wavy underline: diff --git a/microsoft-edge/devtools/javascript/overrides-images/elements-tool-icon.png b/microsoft-edge/devtools/javascript/overrides-images/elements-tool-icon.png deleted file mode 100644 index f7d8dc581d..0000000000 Binary files a/microsoft-edge/devtools/javascript/overrides-images/elements-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/javascript/overrides-images/network-tool-icon.png b/microsoft-edge/devtools/javascript/overrides-images/network-tool-icon.png deleted file mode 100644 index 210b031840..0000000000 Binary files a/microsoft-edge/devtools/javascript/overrides-images/network-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/javascript/overrides-images/sources-tool-icon.png b/microsoft-edge/devtools/javascript/overrides-images/sources-tool-icon.png deleted file mode 100644 index 703e52e055..0000000000 Binary files a/microsoft-edge/devtools/javascript/overrides-images/sources-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/javascript/overrides.md b/microsoft-edge/devtools/javascript/overrides.md index 2e741692a3..f343f89379 100644 --- a/microsoft-edge/devtools/javascript/overrides.md +++ b/microsoft-edge/devtools/javascript/overrides.md @@ -30,7 +30,7 @@ When you set up a folder for local overrides the first time, that folder should 1. Right-click a webpage, such as https://microsoftedge.github.io/Demos/demo-to-do/, and then select **Inspect**. DevTools opens. -1. Select the **Sources** (![Sources icon](./overrides-images/sources-tool-icon.png)) tool. +1. Select the **Sources** tool. 1. In the **Navigator** pane (on the left), click the **Overrides** tab (grouped with the **Page** tab); if needed, click the **More tabs** (**v**) button: @@ -92,7 +92,7 @@ Next, add files to your Overrides folder, as follows. This example will add a C Continuing from above, you can now change the styles of the webpage by using your local override CSS file (in this example, `to-do-styles.css`). Add a thick red border around the rendered webpage body, as follows: -1. In DevTools, select the **Elements** (![Elements tool icon](./overrides-images/elements-tool-icon.png)) tool, and then make sure the **Styles** tab is selected. +1. In DevTools, select the **Elements** tool, and then make sure the **Styles** tab is selected. 1. Copy the following CSS style property, and then paste it into the existing `body` element CSS rule that's in your CSS override file, such as `to-do-styles.css`: @@ -112,7 +112,7 @@ Continuing from above, you can now change the styles of the webpage by using you ## Adding files to Overrides from within other tabs or tools -1. Continuing from above, select the **Sources** (![Sources icon.](./overrides-images/sources-tool-icon.png)) tool, and then on the left, select the **Page** tab (grouped with the **Overrides** tab). +1. Continuing from above, select the **Sources** tool, and then on the left, select the **Page** tab (grouped with the **Overrides** tab). 1. In the tree of resource files for the page, expand the **styles** folder. Files that are already placed in your overrides folder (by using the **Overrides** tab), such as `to-do-styles.css`, have a purple dot on the icon. @@ -122,7 +122,7 @@ Continuing from above, you can now change the styles of the webpage by using you In the **Page** tab and **Overrides** tab in the **Sources** tool, the file's icon changes to a page icon with a purple dot (such as for `index.html`), and the file is added to your local drive's Overrides directory. -1. Select the **Network** (![Network tool icon](./overrides-images/network-tool-icon.png)) tool, right-click a resource file for the webpage, such as **to-do.js**, and then select **Override content**: +1. Select the **Network** tool, right-click a resource file for the webpage, such as **to-do.js**, and then select **Override content**: ![Selecting a file from the Network tool for overrides](./overrides-images/javascript-overrides-network.png) diff --git a/microsoft-edge/devtools/memory-problems/allocation-profiler-images/memory-tool-icon.png b/microsoft-edge/devtools/memory-problems/allocation-profiler-images/memory-tool-icon.png deleted file mode 100644 index 5832399c60..0000000000 Binary files a/microsoft-edge/devtools/memory-problems/allocation-profiler-images/memory-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/memory-problems/allocation-profiler.md b/microsoft-edge/devtools/memory-problems/allocation-profiler.md index 1727bbf6ea..d6d2192800 100644 --- a/microsoft-edge/devtools/memory-problems/allocation-profiler.md +++ b/microsoft-edge/devtools/memory-problems/allocation-profiler.md @@ -55,7 +55,7 @@ To begin using **Allocations on timeline**: DevTools opens. -1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./allocation-profiler-images/memory-tool-icon.png)) tool. +1. In DevTools, in the **Activity Bar**, select the **Memory** tool. If that tab isn't visible, click the **More Tools** (![More Tools icon](./allocation-profiler-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: diff --git a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png deleted file mode 100644 index 5832399c60..0000000000 Binary files a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md index a98b01218c..5a9ca254a1 100644 --- a/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md +++ b/microsoft-edge/devtools/memory-problems/dom-leaks-memory-tool-detached-elements.md @@ -26,7 +26,7 @@ To use the **Detached elements** profiling type to analyze a webpage's detached DevTools opens. -1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./dom-leaks-memory-tool-detached-elements-images/memory-tool-icon.png)) tool. +1. In DevTools, in the **Activity Bar**, select the **Memory** tool. If that tab isn't visible, click the **More Tools** (![More Tools icon](./dom-leaks-memory-tool-detached-elements-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: diff --git a/microsoft-edge/devtools/memory-problems/heap-snapshots-images/memory-tool-icon.png b/microsoft-edge/devtools/memory-problems/heap-snapshots-images/memory-tool-icon.png deleted file mode 100644 index 5832399c60..0000000000 Binary files a/microsoft-edge/devtools/memory-problems/heap-snapshots-images/memory-tool-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/memory-problems/heap-snapshots.md b/microsoft-edge/devtools/memory-problems/heap-snapshots.md index e3ae814bcb..a188487fe6 100644 --- a/microsoft-edge/devtools/memory-problems/heap-snapshots.md +++ b/microsoft-edge/devtools/memory-problems/heap-snapshots.md @@ -460,7 +460,7 @@ To use the **Heap snapshot** profiling type to find detached elements: DevTools opens. -1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./heap-snapshots-images/memory-tool-icon.png)) tool. +1. In DevTools, in the **Activity Bar**, select the **Memory** tool. If that tab isn't visible, click the **More Tools** (![More Tools icon](./heap-snapshots-images/more-tools-icon.png)) button, and then select **Memory**. The **Memory** tool opens: diff --git a/microsoft-edge/devtools/network-console/network-console-tool.md b/microsoft-edge/devtools/network-console/network-console-tool.md index 008bd6b4fb..8d532493d1 100644 --- a/microsoft-edge/devtools/network-console/network-console-tool.md +++ b/microsoft-edge/devtools/network-console/network-console-tool.md @@ -57,7 +57,7 @@ To get to the **Network Console** tool by starting from the **Network** tool: 1. To open DevTools, right-click a webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). -1. On the main toolbar, select the **Network** (![Network tool icon](./network-console-tool-images/network-tool-icon.png)) tab. If that tab isn't visible, click the **More tools** (![More tools icon.](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network**. +1. On the main toolbar, select the **Network** tab. If that tab isn't visible, click the **More tools** (![More tools icon.](./network-console-tool-images/more-tools-icon.png)) button, and then select **Network**. 1. Refresh the webpage. The **Network** tool displays the resources that are used to construct the webpage. diff --git a/microsoft-edge/devtools/overview.md b/microsoft-edge/devtools/overview.md index 0399f42c43..2a9e298dea 100644 --- a/microsoft-edge/devtools/overview.md +++ b/microsoft-edge/devtools/overview.md @@ -48,8 +48,9 @@ The Microsoft Edge browser comes with built-in web development tools, called Mic * [Memory tool](#memory-tool) * [Application tool](#application-tool) * [More Tools button](#more-tools-button) + * [Send Feedback button](#send-feedback-button) + * [Settings button](#settings-button) * [Customize and control DevTools menu](#customize-and-control-devtools-menu) - * [Help button](#help-button) * [Close DevTools button](#close-devtools-button) * [Features of the Quick View toolbar](#features-of-the-quick-view-toolbar) * [Overview of all tools](#overview-of-all-tools) @@ -57,7 +58,6 @@ The Microsoft Edge browser comes with built-in web development tools, called Mic * [About Activity Bar and Quick View tools](#about-activity-bar-and-quick-view-tools) * [See also](#see-also) * [Power tip: Use the Command Menu](#power-tip-use-the-command-menu) -* [Customizing DevTools](#customizing-devtools) * [Trying experimental features](#trying-experimental-features) * [See also](#see-also-1) @@ -245,7 +245,7 @@ To zoom the rendered page, click the page, and then use the same keyboard shortc **To zoom DevTools by using the Command Menu:** -1. Click the **Customize and control DevTools** (![Customize icon](./overview-images/customize-devtools-icon-light-theme.png)) menu button, and then select **Run command**. +1. Click the **Customize and control DevTools** menu button, and then select **Run command**. 1. In the **Command Menu**, start typing **zoom**, and then select a zoom command: * **Reset zoom level** * **Zoom in** @@ -257,7 +257,7 @@ To zoom the rendered page, click the page, and then use the same keyboard shortc The DevTools user interface has the following main areas: -* The **Activity Bar** at the top which contains icons used to access tools, settings, documentation, and more. +* The **Activity Bar** at the top which contains tabs used to access tools, settings, documentation, and more. * The current tool area, where the tool that's currently selected in the **Activity Bar** appears. * The **Quick View** toolbar, at the bottom, which contains tabs used to access tools. @@ -267,33 +267,31 @@ The DevTools user interface has the following main areas: By default, the **Activity Bar** contains the following tools: -* **Inspect** tool (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. +* **Inspect** tool toggle button. -* **Device Emulation** tool (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. +* **Device Emulation** tool button. -* **Welcome** tool (![Welcome tool icon](./overview-images/welcome.png)). +* **Welcome** tool. -* **Elements** tool (![Elements tool icon](./overview-images/elements.png)). +* **Elements** tool. -* **Console** tool (![Console tool icon](./overview-images/console.png)). +* **Console** tool. -* **Sources** tool (![Sources tool icon](./overview-images/sources.png)). +* **Sources** tool. -* **Network** tool (![Network tool icon](./overview-images/network.png)). +* **Network** tool. -* **Performance** tool (![Performance tool icon](./overview-images/performance.png)). +* **Performance** tool. -* **Memory** tool (![Memory tool icon](./overview-images/memory.png)). +* **Memory** tool. -* **Application** tool (![Application tool icon](./overview-images/application.png)). +* **Application** tool. By default, the **Quick View** toolbar contains the following tools: -* **Console** tool (![Console tool icon](./overview-images/console.png)). +* **Console** tool. -* **Issues** tool (![Issues tool icon](./overview-images/issues.png)). - -In the **Activity Bar**, tool tabs either contain the tool name and icon, or just the tool icon, depending on the width of the DevTools window. If the window is wide enough, the tool name and icon appear. If the window is too narrow, only the tool icon appears and the tool name appears when you hover over the tool icon. +* **Issues** tool. @@ -303,7 +301,7 @@ By default, the **Quick View** panel is at the bottom of DevTools. You can also To display the **Quick View** panel, press **Esc**. -To change the location of the **Quick View** panel, in the **Quick View** toolbar, click the **Dock Quick View to the right** (![The "Dock Quick View to the right" icon](./overview-images/move-quickview-icon.png)) button or the **Dock Quick View to the bottom** button: +To change the location of the **Quick View** panel, in the **Quick View** toolbar, click the **Dock Quick View to the right** button or the **Dock Quick View to the bottom** button: ![The Dock Quick View icon, displayed in the Quick View toolbar, at the bottom of DevTool](./overview-images/move-quickview.png) @@ -336,8 +334,8 @@ There are two toolbars: the **Activity Bar** at the top of DevTools, and the **Q The **Activity Bar** contains the following features: * Icon tools: - * **Inspect tool** (![Inspect tool icon](./overview-images/inspect-tool-icon-light-theme.png)) toggle button. - * **Device Emulation** (![Device Emulation icon](./overview-images/device-emulation-icon-light-theme.png)) button. + * **Inspect tool** toggle button. + * **Device Emulation** button. @@ -470,32 +469,47 @@ To add a tool to the **Activity Bar**, click the **More tools** (![More tools ic -#### Customize and control DevTools menu - -The **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button opens a dropdown menu to: +#### Send Feedback button -* Dock DevTools. -* Dock the **Activity Bar**. -* Select a theme. -* Show keyboard shortcuts. -* Change DevTools settings. -* Open Device Emulation. -* Toggle the **Quick View** panel. -* Run a command. -* Search for code. -* Open a file. +Opens the **Send feedback** dialog. To connect with the Microsoft Edge DevTools team to report a problem or issue (or to suggest an idea), describe what happened, and include a screenshot. See [Contact the Microsoft Edge DevTools team](contact.md). -#### Help button +#### Settings button + +You can customize DevTools to meet your needs for the way you work. To change settings, click the **Settings** button, or press **F1**. + +In the **Settings** > **Preferences** page, you can change several parts of DevTools. For example, you can use the **Browser UI language** setting to use the same language in DevTools that is used in your browser. For another example, use the **Theme** setting to change the color theme of DevTools. + +![All the settings in DevTools](./overview-images/all-settings.png) + +You can also change the settings of advanced features, such as: + -The **Help** (![Help icon](./overview-images/help-icon.png)) button opens a dropdown menu that has the following items: +* Add local files to a [Workspace](workspaces/index.md). +* Filter library code by using the **Ignore List**. +* Define the **Devices** you want to include in the device simulation and test mode. For more information, see [Emulate mobile devices (Device Emulation)](device-mode/index.md). +* Select a network **Throttling** profile. +* Define simulated **Locations**. +* Customize keyboard **Shortcuts**. For example, to use the same shortcuts in DevTools as in Visual Studio Code, select **Match shortcuts from preset** > **Visual Studio Code**. + +![All the keyboard shortcuts and the menu to match each to the shortcuts in Visual Studio Code](./overview-images/match-keys.png) -* **Documentation** - Opens [Microsoft Edge DevTools documentation](./landing/index.yml). -* **Release notes** - Opens [What's new in Microsoft Edge DevTools](./whats-new/whats-new.md). + +#### Customize and control DevTools menu + +The **Customize and control DevTools** button opens a dropdown menu to: -* **Feedback** (![Send Feedback icon](./overview-images/send-feedback-icon-light-theme.png)) - Opens the **Send feedback** dialog. To connect with the Microsoft Edge DevTools team to report a problem or issue (or to suggest an idea), describe what happened, and include a screenshot. See [Contact the Microsoft Edge DevTools team](contact.md). +* Dock DevTools. +* Device Emulation. +* Show Console drawer. +* Search. +* Run command. +* Open file. +* More tools. +* Show shortcuts. +* Help. @@ -541,8 +555,8 @@ The **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) b | Task | Steps | | --- | --- | -| Open a tool in the **Activity Bar** at the top of DevTools | In the **Activity Bar** at the top of DevTools, click **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) and then select a tool. | -| Open a tool on the **Quick View** toolbar | When DevTools has focus, press **Esc** to show the **Quick View** toolbar if it's not shown yet. In the **Quick View** toolbar, click the **More tools** (![More tools icon](./overview-images/more-tools-icon.png)) button, and then select a tool. | +| Open a tool in the **Activity Bar** at the top of DevTools | In the **Activity Bar** at the top of DevTools, click **More tools** and then select a tool. | +| Open a tool on the **Quick View** toolbar | When DevTools has focus, press **Esc** to show the **Quick View** toolbar if it's not shown yet. In the **Quick View** toolbar, click the **More tools** button, and then select a tool. | | Move a tool from the **Quick View** toolbar to the **Activity Bar** | When DevTools has focus, press **Esc** to show the **Quick View**. In the **Quick View** toolbar, right-click the tool's tab, and then select **Move to top Activity Bar**. | | Move a tool from the **Activity Bar** to the **Quick View** toolbar | In the **Activity Bar**, right-click the tool's tab, and then select **Move to bottom Quick View** or **Move to side Quick View**. | | Open a tool in its default toolbar (**Activity Bar** or **Quick View**) | When DevTools has focus, open the **Command Menu** by pressing **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). Type the name of the tool, and then select a **Show \** command. | @@ -571,7 +585,7 @@ In the **Command Menu**, the tools are called "panels"; for example, the **Eleme 1. To open the **Command Menu**, do either of the following: - * Click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select **Run command**. + * Click the **Customize and control DevTools** button, and then select **Run command**. * Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The **Command Menu** allows you to type commands to display, hide, or run features in DevTools. @@ -589,28 +603,6 @@ In the **Command Menu**, the tools are called "panels"; for example, the **Eleme See also [Run commands with the Microsoft Edge DevTools Command menu](command-menu/index.md). - -## Customizing DevTools - -You can customize DevTools to meet your needs for the way you work. To change settings, click the **Customize and control DevTools** (![Customize and control DevTools](./overview-images/customize-and-control-devtools-icon-light-mode.png)) button, and then select **Settings** (![Settings icon](./overview-images/settings-gear-icon-light-theme.png)), or press **F1**. - -In the **Settings** > **Preferences** page, you can change several parts of DevTools. For example, you can use the **Browser UI language** setting to use the same language in DevTools that is used in your browser. For another example, use the **Theme** setting to change the color theme of DevTools. - -![All the settings in DevTools](./overview-images/all-settings.png) - -You can also change the settings of advanced features, such as: - - -* Add local files to a [Workspace](workspaces/index.md). -* Filter library code by using the **Ignore List**. -* Define the **Devices** you want to include in the device simulation and test mode. For more information, see [Emulate mobile devices (Device Emulation)](device-mode/index.md). -* Select a network **Throttling** profile. -* Define simulated **Locations**. -* Customize keyboard **Shortcuts**. For example, to use the same shortcuts in DevTools as in Visual Studio Code, select **Match shortcuts from preset** > **Visual Studio Code**. - -![All the keyboard shortcuts and the menu to match each to the shortcuts in Visual Studio Code](./overview-images/match-keys.png) - - ## Trying experimental features @@ -620,7 +612,7 @@ To preview the latest features coming to DevTools, download [Microsoft Edge Cana See also: * [Experimental features](experimental-features/index.md) -* [What's new in Microsoft Edge DevTools](./whats-new/whats-new.md) +* [What's new in Microsoft Edge DevTools](./whats-new/index.md) diff --git a/microsoft-edge/devtools/performance/extension.md b/microsoft-edge/devtools/performance/extension.md index 2b8ac7d2f9..45ad679eb4 100644 --- a/microsoft-edge/devtools/performance/extension.md +++ b/microsoft-edge/devtools/performance/extension.md @@ -233,7 +233,7 @@ To record a profile and view the custom performance data of the Photo Gallery de DevTools opens. -1. In DevTools, select the **Performance** (![Performance icon](./extension-images/performance-icon.png)) tool. +1. In DevTools, select the **Performance** tool. 1. In the **Performance** tool, click the **Capture settings** (![Capture settings icon](./extension-images/capture-settings-icon.png)) button, and then make sure that the **Show custom tracks** checkbox is selected: diff --git a/microsoft-edge/devtools/performance/index.md b/microsoft-edge/devtools/performance/index.md index 4b8a5eff55..62d84afc65 100644 --- a/microsoft-edge/devtools/performance/index.md +++ b/microsoft-edge/devtools/performance/index.md @@ -63,7 +63,7 @@ Mobile devices have much less CPU power than desktops and laptops. Whenever you Throttle your desktop machine's CPU to simulate a mobile CPU, as follows: -1. In DevTools, open the **Performance** (![Performance icon](./index-images/performance-tool-icon.png)) tool. +1. In DevTools, open the **Performance** tool. 1. Click the **Capture settings** (![Capture settings](./index-images/capture-settings-icon.png)) button. diff --git a/microsoft-edge/devtools/performance/overview.md b/microsoft-edge/devtools/performance/overview.md index a72ed4d42c..8dbeabde52 100644 --- a/microsoft-edge/devtools/performance/overview.md +++ b/microsoft-edge/devtools/performance/overview.md @@ -72,9 +72,9 @@ To open the **Performance** tool: DevTools opens. -1. In the **Activity Bar** at top, click the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool. +1. In the **Activity Bar** at top, click the **Performance** tool. - If the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. + If the **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. @@ -180,9 +180,9 @@ To produce a **poor** or **needs improvement** metric on the **LCP**, **CLS**, a DevTools opens. -1. In the **Activity Bar** at top, select the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool. +1. In the **Activity Bar** at top, select the **Performance** tool. - If the ![Performance icon](./overview-images/performance-icon.png) **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. + If the **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** (![The More tools icon](./overview-images/more-tools-icon.png)) button and then select the **Performance** tool. 1. Maximize the window, and make the demo page pane wide, such as 60% of the width of the window. diff --git a/microsoft-edge/devtools/performance/reference.md b/microsoft-edge/devtools/performance/reference.md index cc6a30f1f3..b46175aa88 100644 --- a/microsoft-edge/devtools/performance/reference.md +++ b/microsoft-edge/devtools/performance/reference.md @@ -111,7 +111,7 @@ To open the **Performance** tool in DevTools: DevTools opens. -1. In DevTools, on the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tab. +1. In DevTools, on the **Activity Bar**, select the **Performance** tab. If that tab isn't visible, click the **More tools** (![More tools icon](./reference-images/more-tools-icon.png)) button. @@ -133,7 +133,7 @@ To analyze the performance of a webpage while it's running (rather than while it DevTools opens. -1. On the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool. +1. On the **Activity Bar**, select the **Performance** tool. 1. Click the **Record** (![Record icon](./reference-images/record-icon.png)) button. @@ -157,7 +157,7 @@ To analyze the performance of a webpage while it's loading (rather than while it DevTools opens. -1. On the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool. +1. On the **Activity Bar**, select the **Performance** tool. 1. Click the **Refresh page** (![Refresh Page](./reference-images/refresh-page-icon.png)) button: @@ -1114,7 +1114,7 @@ To view WebSocket messages in the **Performance** tool: DevTools opens. -1. In the **Activity Bar**, select the **Performance** (![Performance icon](./reference-images/performance-icon.png)) tool. +1. In the **Activity Bar**, select the **Performance** tool. 1. In the upper left of the **Performance** tool, click the **Record** (![Record icon](./reference-images/record-icon.png)) button. diff --git a/microsoft-edge/devtools/performance/selector-stats.md b/microsoft-edge/devtools/performance/selector-stats.md index 3c754c77d3..47e17b90ff 100644 --- a/microsoft-edge/devtools/performance/selector-stats.md +++ b/microsoft-edge/devtools/performance/selector-stats.md @@ -40,7 +40,7 @@ To record a performance trace with selector statistics: 1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. -1. In DevTools, on the **Activity Bar**, select the **Performance** (![Performance tool icon](./selector-stats-images/performance-tool-icon.png)) tab. If that tab isn't visible, select **More tools** (![More tools icon](./selector-stats-images/more-tools-icon.png)) > **Performance**. +1. In DevTools, on the **Activity Bar**, select the **Performance** tab. If that tab isn't visible, select **More tools** (![More tools icon](./selector-stats-images/more-tools-icon.png)) > **Performance**. 1. In the **Performance** tool, click the **Capture settings** (![Capture settings icon](./selector-stats-images/capture-settings-icon.png)) button. diff --git a/microsoft-edge/devtools/performance/share-performance-traces.md b/microsoft-edge/devtools/performance/share-performance-traces.md index d37b9bd9c0..72e813dcc6 100644 --- a/microsoft-edge/devtools/performance/share-performance-traces.md +++ b/microsoft-edge/devtools/performance/share-performance-traces.md @@ -41,7 +41,7 @@ To record performance for aspects of a webpage, and then export a performance re DevTools opens. -1. In DevTools, open the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. +1. In DevTools, open the **Performance** tool. 1. Click the **Record** (![Record icon](./share-performance-traces-images/record-icon.png)) button. @@ -169,7 +169,7 @@ To open a saved trace file in DevTools: DevTools opens. -1. In DevTools, select the **Performance** (![Performance icon](./share-performance-traces-images/performance-icon.png)) tool. +1. In DevTools, select the **Performance** tool. 1. Click the **Load trace** (![Load trace icon](./share-performance-traces-images/load-trace-icon.png)) button. diff --git a/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png b/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png deleted file mode 100644 index e4b4682410..0000000000 Binary files a/microsoft-edge/devtools/progressive-web-apps/index-images/application-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png b/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png deleted file mode 100644 index 2e780b6451..0000000000 Binary files a/microsoft-edge/devtools/progressive-web-apps/index-images/network-icon.png and /dev/null differ diff --git a/microsoft-edge/devtools/progressive-web-apps/index.md b/microsoft-edge/devtools/progressive-web-apps/index.md index 5821bb943b..9d82fae290 100644 --- a/microsoft-edge/devtools/progressive-web-apps/index.md +++ b/microsoft-edge/devtools/progressive-web-apps/index.md @@ -74,7 +74,7 @@ See also: ## PWA-related pages in the Application tool -The ![Application icon](./index-images/application-icon.png) **Application** tool includes the following pages (accessed via the tree on the left) that cover PWA features: +The **Application** tool includes the following pages (accessed via the tree on the left) that cover PWA features: ![PWA-related pages](./index-images/pwa-related-pages.png) @@ -113,7 +113,7 @@ To inspect a manifest: DevTools opens. -1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool. +1. In DevTools, select the **Application** tool. 1. In the outline on the left, in the **Application** section, select **Manifest**. @@ -240,7 +240,7 @@ To test URL protocol handler registration by using DevTools: DevTools opens in a dedicated window. -1. Select the ![Application tool](./index-images/application-icon.png) **Application** tool. +1. Select the **Application** tool. 1. In the tree on the left, expand **Manifest**, and then select **Protocol Handlers**. @@ -308,7 +308,7 @@ See also: * [The service worker to cache the app's files on the local device (`sw.js`)](../../progressive-web-apps/how-to/index.md#the-service-worker-to-cache-the-apps-files-on-the-local-device-swjs) in _Get started developing a PWA_. * [Re-engage users with push messages](../../progressive-web-apps/how-to/push.md) -The main place in DevTools to inspect and debug service workers is the **Service workers** page in the ![Application icon](./index-images/application-icon.png) **Application** tool. +The main place in DevTools to inspect and debug service workers is the **Service workers** page in the **Application** tool. To view service workers: @@ -318,7 +318,7 @@ To view service workers: DevTools opens. -1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool. +1. In DevTools, select the **Application** tool. 1. In the outline on the left, in the **Application** section, select **Service workers**. @@ -336,7 +336,7 @@ To view service workers: * Checkboxes: * The **Offline** checkbox puts DevTools into offline mode. This is equivalent to: - * The offline mode that's available from the ![Network icon](./index-images/network-icon.png) **Network** tool. + * The offline mode that's available from the **Network** tool. * Selecting `Go offline` in the Command Menu. See [Run commands in the Command Menu](../command-menu/index.md). * The **Update on reload** checkbox forces the service worker to update on every page load. @@ -392,7 +392,7 @@ To display the network requests that are handled by a service worker: DevTools opens. -1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool. +1. In DevTools, select the **Application** tool. 1. In the outline on the left, in the **Application** section, select **Service workers**. @@ -400,7 +400,7 @@ To display the network requests that are handled by a service worker: 1. In the upper right of the **Service workers** page, click the **Network requests** button. - The ![Network icon](./index-images/network-icon.png) **Network** tool opens. + The **Network** tool opens. The **Filter** text box contains `is:service-worker-intercepted`. This filter only displays the requests that were handled by this service worker. @@ -429,7 +429,7 @@ To view cache storage information for a service worker: DevTools opens. -1. In DevTools, select the ![Application icon](./index-images/application-icon.png) **Application** tool. +1. In DevTools, select the **Application** tool. 1. In the outline on the left, select **Cache storage**. @@ -467,7 +467,7 @@ To clear storage: DevTools opens. -1. Select the ![Application icon](./index-images/application-icon.png) **Application** tool. +1. Select the **Application** tool. 1. In the tree on the left, select **Application** > **Storage**. diff --git a/microsoft-edge/devtools/quick-source/quick-source-tool.md b/microsoft-edge/devtools/quick-source/quick-source-tool.md index 0cee503e02..25ac2d1457 100644 --- a/microsoft-edge/devtools/quick-source/quick-source-tool.md +++ b/microsoft-edge/devtools/quick-source/quick-source-tool.md @@ -40,7 +40,7 @@ To edit source files in the **Quick source** tool, you'll do the following: 1. Have access to the webpage source files locally, such as a cloned repo. -1. In the **Workspace** tab in the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, add a local folder of source files. +1. In the **Workspace** tab in the **Sources** tool, add a local folder of source files. 1. In the **Workspace** tab, open a file, such as a `.js` file. @@ -163,7 +163,7 @@ Continue with the next section. DevTools opens. -1. In the **Activity Bar** at the top of DevTools, select the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, select the **Workspace** tab (grouped with the **Page** tab), and then in the **Workspace** tab, click the **Add folder** button. +1. In the **Activity Bar** at the top of DevTools, select the **Sources** tool, select the **Workspace** tab (grouped with the **Page** tab), and then in the **Workspace** tab, click the **Add folder** button. The **Select Folder** dialog opens. @@ -187,7 +187,7 @@ Continue with the next section. Suppose you want to continue viewing the **Elements** tool, but you want to simultaneously view and edit the source files that were opened via the **Sources** tool. -1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements** (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool. +1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** tool, such as the **Elements** tool. 1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**. diff --git a/microsoft-edge/devtools/rendering-tools/js-runtime.md b/microsoft-edge/devtools/rendering-tools/js-runtime.md index cd053f4774..e9320b395d 100644 --- a/microsoft-edge/devtools/rendering-tools/js-runtime.md +++ b/microsoft-edge/devtools/rendering-tools/js-runtime.md @@ -45,7 +45,7 @@ To use the **Allocation sampling** profiling type to view memory allocation by J Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. -1. In DevTools, in the **Activity Bar**, select the **Memory** (![Memory tool icon](./js-runtime-images/memory-tool-icon.png)) tool: +1. In DevTools, in the **Activity Bar**, select the **Memory** tool: ![The "Allocation sampling" option button in the Memory tool](./js-runtime-images/allocation-sampling-option-button.png) diff --git a/microsoft-edge/devtools/storage/cookies.md b/microsoft-edge/devtools/storage/cookies.md index fe34baf4cd..97ed34a270 100644 --- a/microsoft-edge/devtools/storage/cookies.md +++ b/microsoft-edge/devtools/storage/cookies.md @@ -53,7 +53,7 @@ See also: DevTools opens. -1. In the **Activity Bar**, select the **Application** (![Application icon](./cookies-images/application-icon.png)) tool. +1. In the **Activity Bar**, select the **Application** tool. 1. In the outline on the left, in the major **Storage** section, expand **Cookies**, then select an origin, such as **https://www.bing.com**: @@ -160,7 +160,7 @@ To view third-party cookies: DevTools opens. -1. Select the **Application** (![Application icon](./cookies-images/application-icon.png)) tool. +1. Select the **Application** tool. 1. On the left, under the major **Storage** section, expand **Cookies**, and then select a website URL, such as **https://www.bing.com**. @@ -193,7 +193,7 @@ To view third-party cookies in the **Application** tool: DevTools opens. -1. Select the **Application** (![Application icon](./cookies-images/application-icon.png)) tool. +1. Select the **Application** tool. 1. Switch to the webpage window, such as Bing.com. diff --git a/microsoft-edge/devtools/workspaces/workspace-tutorial.md b/microsoft-edge/devtools/workspaces/workspace-tutorial.md index 5ab5e4a2b0..24b8960bf8 100644 --- a/microsoft-edge/devtools/workspaces/workspace-tutorial.md +++ b/microsoft-edge/devtools/workspaces/workspace-tutorial.md @@ -148,7 +148,7 @@ Next, define a Workspace in DevTools: DevTools opens. -1. Click the **Sources** (![Sources tool icon](./workspace-tutorial-images/sources-tool-icon.png)) tab. +1. Click the **Sources** tab. 1. In the **Navigator** pane (on the left), click the **Workspace** tab (which is grouped with the **Page** tab): @@ -185,7 +185,7 @@ To make a change in the CSS file and save it to disk by using the **Elements** t ![View styles.css in a text editor](./workspace-tutorial-images/sources-workspace-css.png) -1. Select the **Elements** (![Elements tool icon](./workspace-tutorial-images/elements-tool-icon.png)) tool; then in the DOM tree, expand the `` element; and then select the `

` element. +1. Select the **Elements** tool; then in the DOM tree, expand the `` element; and then select the `

` element. The **Styles** pane displays the CSS rules that are applied to the `

` element. The **mapped file** (![Mapped file icon](./workspace-tutorial-images/mapped-file-icon.png)) icon next to `styles.css:1` is a page with a green "mapped" dot. The green "mapped" dot means that any changes that you make to this CSS rule are mapped to `styles.css` in your `/Demos/workspace/` directory: @@ -220,7 +220,7 @@ Next, edit HTML and save changes to the source file. To save changes to the web The DevTools **Workspace** tab is similar to using an editor to edit the HTML source file, but enables editing the HTML source file directly within DevTools. -1. Continuing from above, in DevTools, click the **Sources** (![Sources tool icon.](./workspace-tutorial-images/sources-tool-icon.png)) tab. +1. Continuing from above, in DevTools, click the **Sources** tab. 1. In the **Navigator** pane on the left, in the **Workspace** tab (grouped with the **Page** tab), select `index.html`.