Understand the DevTools user interface

preview_player
Показать описание
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.

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.

Video Chapters
00:00 Introduction
00:19 The main UI structure
00:41 The Inspect tool and Device Emulation mode
00:58 Tools in the main toolbar
01:11 The ""More tabs"" button
01:32 The ""More tools"" button to see all 30+ tools
01:54 Closing tools
02:16 Reordering the main toolbar
02:31 The Drawer
03:01 The Drawer toolbar
03:15 Moving tools between the main and drawer areas
03:35 Restoring default settings
03:45 The list of tools
05:19 Links and conclusion
  1. Microsoft Edge
  2. Microsoft Edge
  3. Developer Tools
  4. DevTools
  5. Developer
Рекомендации по теме
Understand the DevTools 0:05:40

Understand the DevTools user interface

21+ Browser Dev 0:09:26

21+ Browser Dev Tools & Tips You Need To Know

Debugging JavaScript - 0:04:44

Debugging JavaScript - Are you doing it wrong?

Chrome Dev Tools 0:28:07

Chrome Dev Tools Overview for Web Testing

Quick overview of 0:00:33

Quick overview of CSS

Performance insights panel 0:07:43

Performance insights panel #DevToolsTips

God Tier HTML 0:00:50

God Tier HTML Programming

Different ways to 0:04:43

Different ways to open Chrome DevTools #DevToolsTips

Microsoft Hates Chrome 0:00:36

Microsoft Hates Chrome 😂

The 2 Easiest 0:00:43

The 2 Easiest Ways To Improve Your Site's Accessibility

Is your memory 0:00:40

Is your memory leaking?

The ultimate guide 0:06:43

The ultimate guide to web performance

1 click from 0:00:28

1 click from browser to VS Code

The BEST Open-Source 0:10:14

The BEST Open-Source Dev Tools for Developers in 2024!

How much a 0:00:47

How much a UX Designer makes

Developer Last Expression 0:00:28

Developer Last Expression 😂 #shorts #developer #ytshorts #uiux #python #flutterdevelopment

Trying to code 0:01:00

Trying to code on an old laptop

DevTools: State of 0:25:26

DevTools: State of the Union 2022

VS Code has 0:00:26

VS Code has Browser Dev Tools and Built-in JavaScript Debugging!!

A Beginner's Guide 0:25:33

A Beginner's Guide to Chrome Developer Tools | Elements | Console | Network | Performance

The 4 Most 0:06:17

The 4 Most Important Laws of UX Design

100+ Web Development 0:13:18

100+ Web Development Things you Should Know

Chrome 101 - 0:06:03

Chrome 101 - What’s New in DevTools

Dart DevTools 0:25:19

Dart DevTools

Комментарии
Автор

EDGE FOR THE WIN my fav browser cant believe nobody has seen or even considered using the first app on their pc

xus_
Автор

On my edge browser I was on a safe site and it said turn off devtools popup and it was turn on in settings is it save my browser or do I have to wipe my browser even if I turned it off?

Doctortech
Автор

Does any one know how to enable autocomplete popup menu in console tool?
My Edge only support up/down arrow to switch autocomplete manually, cannot use popup menu to switch by mouse wheel since there is no popup menu. But Chrome work normal.
I've tried reset Edge setting, include in Edge and Windows, but they didn't work.
There is no uninstall option so cannot try it.

mingray
Автор

I switched to Edge recently and I do not think I'll ever go back to chrome. It's basically Chrome on steroids with built-in AI, a sidebar like Opera GX etc. And I didn't like the default homepage so all I did was use an extension that lists my daily to-do list instead!

danieru_risu
Автор

??? was hoping to find out how to 'open' access tools ???

will keep looking :(

Mel-muox
Автор

i cannot hear this ? or any other video

tn