diff --git a/microsoft-edge/devtools/about-tools.md b/microsoft-edge/devtools/about-tools.md index 6c262aa9bc..9434013b83 100644 --- a/microsoft-edge/devtools/about-tools.md +++ b/microsoft-edge/devtools/about-tools.md @@ -40,7 +40,7 @@ By default, the following tools are listed in the **Activity Bar** at the top of | ![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) | +| ![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/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) | diff --git a/microsoft-edge/devtools/console/console-dom-interaction.md b/microsoft-edge/devtools/console/console-dom-interaction.md index 2f2e128ec3..3ad36c8fb2 100644 --- a/microsoft-edge/devtools/console/console-dom-interaction.md +++ b/microsoft-edge/devtools/console/console-dom-interaction.md @@ -14,7 +14,7 @@ The **Console** tool is a great way to interact with the webpage in the browser. The **Console** tool can also be used to interact with the DOM by using JavaScript code. For example, you can find elements in the DOM tree and manipulate them by using DOM APIs. -To learn more about the **Inspect** tool, see [Analyze pages using the Inspect tool](../css/inspect.md). To learn more about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements-tool/elements-tool.md). +To learn more about the **Inspect** tool, see [Analyze pages using the Inspect tool](../css/inspect.md). To learn more about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements/elements-tool.md). diff --git a/microsoft-edge/devtools/css/flexbox-images/discover-flexbox.png b/microsoft-edge/devtools/css/flexbox-images/discover-flexbox.png new file mode 100644 index 0000000000..22e76c7f67 Binary files /dev/null and b/microsoft-edge/devtools/css/flexbox-images/discover-flexbox.png differ diff --git a/microsoft-edge/devtools/css/flexbox.md b/microsoft-edge/devtools/css/flexbox.md new file mode 100644 index 0000000000..221cb0e8d7 --- /dev/null +++ b/microsoft-edge/devtools/css/flexbox.md @@ -0,0 +1,128 @@ +--- +title: Inspect and debug CSS flexbox layouts +description: Inspect and debug CSS flexbox layouts. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 07/27/2026 +--- +# Inspect and debug CSS flexbox layouts + + + +This guide shows you how to discover flexbox elements on a page, as well as inspect and modify the flexbox layouts in the **Elements** tool. + +The screenshots appearing in this article are from this webpage: [Centering a text element with Flexbox](http://jec.fish/demo/css-flexbox). todo Demos repo demo(s) + +todo: +* \Demos\css-gap-decorations\README.md + * CSS Gap Decorations demos -- Draws line decorations within gaps in CSS Grid, **Flexbox**, and Multi-column layouts. + * [/css-gap-decorations/]( https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations ) + * [CSS Gap Decorations demos]( https://microsoftedge.github.io/Demos/css-gap-decorations/ ) + +todo: +1. dup the article using upstream demos, links, pngs +1. convert demos to local +1. convert pngs to local +1. convert links to local + + + +## The flex badge in the DOM tree + + +When an HTML element on a page has `display: flex` or `display: inline-flex` applied to it, a **flex** badge is displayed next to the element in the DOM tree in the **Elements** tool: + +![Discover flexbox](./flexbox-images/discover-flexbox.png) + +See also: (todo: local links) +* [Elements] +* [DOM] + + + +## Modify layouts with the flexbox editor + + +You can modify flexbox layouts visually with the **flexbox editor**. For example, here is how you can center the text `

` of this [demo page](http://jec.fish/demo/css-flexbox) within its container `
`. + +1. Inspect the container element. + +1. In the **Styles** tab of the **Elements** tool, you can see the flexbox editor button next to the display: flex declaration: + + ![flexbox editor button] todo png + +1. Click the **flexbox editor** button to open the flexbox editor. + + The editor displays a list of flexbox properties. Each property's value options are displayed as icon buttons. + + ![flexbox editor] todo png + +1. To center the text on the screen, you can click the `justify-content: center` and `align-items: center` buttons. + + ![Center the text in its container] todo png + + The text are centered now. The `justify-content: center` and `align-items: center` declarations are added in the **Styles** tab. + + + +## Examine the flexbox layout + + +You can hover over the flexbox element in the **Elements** tool to visualize the layout. The overlay appears over the element, laid out with dotted lines to show the position of its content and items. + +hover over a flexbox element + +Alternatively, you can click the **flex** badge to toggle the display of the flexbox overlay: + +![change justify-content to flex-end] todo png + +Try changing the value to `justify-content: flex-end`. The overlay is changed accordingly: + +![justify-content: flex-end] todo png + +The icons in the **flex editor** are context-aware. It will change according to the layout direction. For example, when you change the `flex-direction` to `column`, the icons in the **flex editor** are rotated accordingly. The overlay is updated immediately too: + +![video] todo png for video + + + +## Adjust the flexbox overlay color + + +Click the **Layout** tab in the **Elements** tool, and then scroll down to the **Flexbox** section. You can view all the flexbox elements of the page here: + +![Layout pane] todo png + +You can toggle the overlay of each flexbox element with the checkbox next to it. It is the same as you click on the badge in the **DOM tree**. + +Apart from that, you can change the color of the overlay by clicking on the color icon next to it. For example, the color of the `container` overlay is changed to black. + +![change overlay color] todo png + +To navigate to a flexbox element in the DOM tree, you can click on the selector icon next to it: + +![video] todo png for video + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/css/flexbox) and is authored by Jecelyn Yeen. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools/elements-tool/elements-tool-images/elements-tool.png b/microsoft-edge/devtools/elements/elements-tool-images/elements-tool.png similarity index 100% rename from microsoft-edge/devtools/elements-tool/elements-tool-images/elements-tool.png rename to microsoft-edge/devtools/elements/elements-tool-images/elements-tool.png diff --git a/microsoft-edge/devtools/elements-tool/elements-tool.md b/microsoft-edge/devtools/elements/elements-tool.md similarity index 94% rename from microsoft-edge/devtools/elements-tool/elements-tool.md rename to microsoft-edge/devtools/elements/elements-tool.md index fffdd7110b..d4f1e6ea1c 100644 --- a/microsoft-edge/devtools/elements-tool/elements-tool.md +++ b/microsoft-edge/devtools/elements/elements-tool.md @@ -36,6 +36,7 @@ The **Elements** tool contains the following tabs: * [CSS features reference](../css/reference.md) * [Get started viewing and changing CSS](../css/index.md) * [Inspect CSS Grid layouts](../css/grid.md) +* [Edit CSS font styles and settings in the Styles tab](../inspect-styles/edit-fonts.md) * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md) * [Get started viewing and changing the DOM](../dom/index.md) * [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a webpage. diff --git a/microsoft-edge/devtools/whats-new/2020/03/devtools.md b/microsoft-edge/devtools/whats-new/2020/03/devtools.md index 61ccb65727..b89027bca1 100644 --- a/microsoft-edge/devtools/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/03/devtools.md @@ -82,7 +82,7 @@ The Color Picker is a GUI in the **Elements** panel for changing `color` and `ba Chromium issue [#963183](https://crbug.com/963183) See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) @@ -99,7 +99,7 @@ In Microsoft Edge 83, you can now display the properties of the currently select Chromium issue [#1050999](https://crbug.com/1050999) See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md index 4b3965e9dc..bb2a4c85b5 100644 --- a/microsoft-edge/devtools/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools/whats-new/2020/08/devtools.md @@ -397,7 +397,7 @@ See also: #### Updates to Elements tool and Network tool See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) * [Network features reference](../../../network/reference.md) @@ -427,7 +427,7 @@ In the **Elements** tool, the **Properties** pane is back. The **Properties** p Chromium issue: [#1116085](https://crbug.com/1116085) See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2021/02/devtools.md b/microsoft-edge/devtools/whats-new/2021/02/devtools.md index e6aa866119..676d4566dd 100644 --- a/microsoft-edge/devtools/whats-new/2021/02/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/02/devtools.md @@ -348,7 +348,7 @@ For the history of this feature in the Chromium open-source project, see Issue [ See also: * [Test accessibility using the Accessibility tab](../../../accessibility/accessibility-tab.md) -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md index a3d1662643..2f4e9ca955 100644 --- a/microsoft-edge/devtools/whats-new/2021/04/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/04/devtools.md @@ -260,7 +260,7 @@ For the history of this feature in the Chromium open-source project, see Issue [ --> See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) @@ -284,7 +284,7 @@ This information helps you better understand your images and apply optimization. For the history of this feature in the Chromium open-source project, see Issues [1149832](https://crbug.com/1149832) and [1170656](https://crbug.com/1170656). See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) * [Inspect network activity](../../../network/index.md) diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md index af44df550d..ba4f8591a4 100644 --- a/microsoft-edge/devtools/whats-new/2021/05/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/05/devtools.md @@ -216,7 +216,7 @@ This displays the details about the `iframe` in the **Application** tool. In th See also: * [Application tool, to manage storage](../../../storage/application-tool.md) -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) For the history of this feature in the Chromium open-source project, see Issue [1192084](https://crbug.com/1192084). diff --git a/microsoft-edge/devtools/whats-new/2021/10/devtools.md b/microsoft-edge/devtools/whats-new/2021/10/devtools.md index 312b8157af..0eefb7df16 100644 --- a/microsoft-edge/devtools/whats-new/2021/10/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/10/devtools.md @@ -130,7 +130,7 @@ In the **Properties** pane of the **Elements** tool, the list of properties is n ![Flattened list of properties](./devtools-images/flattened-list-of-properties.png) See also: -* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md) +* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md) For the history of this feature, see Chromium issues [1076820](https://crbug.com/1076820) and [1119900](https://crbug.com/1119900). diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index e391b10cc7..57843c5106 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -525,7 +525,7 @@ - name: Elements tool, for CSS, HTML, and the DOM items: - name: Inspect, edit, and debug HTML and CSS with the Elements tool - href: ./devtools/elements-tool/elements-tool.md + href: ./devtools/elements/elements-tool.md displayName: Elements tool - name: DOM @@ -544,6 +544,14 @@ href: ./devtools/css/grid.md displayName: Elements tool + - name: Inspect and debug CSS flexbox layouts + href: ./devtools/css/flexbox.md + displayName: Elements tool + + - name: Edit CSS font styles and settings in the Styles tab + href: ./devtools/inspect-styles/edit-fonts.md + displayName: Elements tool + - name: Style editing for CSS-in-JS frameworks href: ./devtools/css/css-in-js.md displayName: Elements tool diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index f418219de3..9b11c3dfac 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -43,7 +43,7 @@ The DevTools extension for Visual Studio Code is one of several different ways t | Approach | Pros and Cons | Article | |---|---|---| -| Browser > DevTools > **Elements** tool | You have to manually copy changes from DevTools into your source files. | [Inspect, edit, and debug HTML and CSS with the Elements tool](../devtools/elements-tool/elements-tool.md)| +| Browser > DevTools > **Elements** tool | You have to manually copy changes from DevTools into your source files. | [Inspect, edit, and debug HTML and CSS with the Elements tool](../devtools/elements/elements-tool.md)| | Browser > DevTools > **Sources** tool > **Workspace** tab to define a **Workspace** | Always saves the changes, which could discourage experimenting | [Select a local Workspace, to use DevTools to edit files and save changes to disk](../devtools/sources/index.md) in _Sources tool overview_ | | Browser > DevTools > **Settings** > **Experiments** > **Open source files in Visual Studio Code** | Always saves the changes, which could discourage experimenting | Experiments > [Opening source files in Visual Studio Code](../devtools/sources/opening-sources-in-vscode.md). | | Microsoft Edge DevTools extension for Visual Studio Code | Automatically opens and edits the CSS source file but doesn't automatically save the file, so you get to choose whether to save the edits. | The present article. | @@ -96,7 +96,7 @@ The following tools are included in the DevTools extension for Visual Studio Cod | Tool | Purpose | Article | | --- | --- | --- | -| **Elements** tool | 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](../devtools/elements-tool/elements-tool.md) | +| **Elements** tool | 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](../devtools/elements/elements-tool.md) | | **Console** tool | 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](../devtools/console/index.md) | | **Network** tool | 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](../devtools/network/index.md) | | **Application** tool | 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](../devtools/storage/application-tool.md) | diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md index 0c34e77394..9dfb6d451c 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/opening-source-files-from-elements-tool.md @@ -19,7 +19,7 @@ The source file name and line number are shown as a clickable link. Clicking a ![Opening source files from Elements tool](./opening-source-files-from-elements-tool-images/elements-files.png) -For more information about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../../devtools/elements-tool/elements-tool.md). +For more information about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../../devtools/elements/elements-tool.md).