Skip to content

Commit b30343d

Browse files
authored
Added videos to "Customize DevTools" (#2161)
* Add videos to Customize * Add welcome text * Move section down, copy markup/pngs from videos page * Re-add Welcome text incl 'customize'
1 parent ce53549 commit b30343d

File tree

3 files changed

+36
-1
lines changed

3 files changed

+36
-1
lines changed
31.2 KB
Loading
28.3 KB
Loading

microsoft-edge/devtools-guide-chromium/customize/index.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ author: MSEdgeTeam
55
ms.author: msedgedevrel
66
ms.topic: conceptual
77
ms.prod: microsoft-edge
8-
ms.date: 05/04/2021
8+
ms.date: 09/08/2022
99
---
1010
<!-- Copyright Kayce Basques
1111
@@ -113,6 +113,41 @@ To restore the default theme, placement, tools order, and any other customized s
113113
See [Customize keyboard shortcuts](../customize/shortcuts.md).
114114

115115

116+
<!-- ====================================================================== -->
117+
## Videos about Customizing the DevTools UI
118+
119+
120+
#### Customizing Microsoft Edge Developer Tools and quick feature access
121+
122+
_Published on 5 May 2022._
123+
124+
[![Thumbnail image for the DevTools customization video](./index-images/customize-devtools.png)](https://www.youtube.com/watch?v=ypRzEBYNptQ)
125+
126+
Learn how to customize DevTools to fit your needs.
127+
128+
This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools.
129+
130+
131+
#### Understand the DevTools user interface
132+
133+
_Published on 1 September 2022._
134+
135+
[![Thumbnail image for the Understand the DevTools UI video](./index-images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c)
136+
137+
Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable.
138+
139+
In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.
140+
141+
<!-- additional text, from Welcome panel, which includes 'customize': -->
142+
143+
Check out this video to learn about the main parts of the DevTools UI, how to customize it to meet your needs, learn about the different tools that are available, and where to go for help.
144+
145+
146+
#### See also
147+
148+
* [Videos about web development with Microsoft Edge](../../dev-videos/index.md)
149+
150+
116151
<!-- ====================================================================== -->
117152
> [!NOTE]
118153
> 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).

0 commit comments

Comments
 (0)