Windows 10: Open Microsoft Edge Developer Tools in Windows 10

How to: Open Microsoft Edge Developer Tools in Windows 10

How to Open Microsoft Edge Developer Tools in Windows 10

Browser tooling has come a long way since the days of Internet Explorer! The Microsoft Edge Developer Tools are built with TypeScript, powered by open source, and optimized for modern front-end workflows.

The Microsoft Edge DevTools include:

• An Elements panel to edit HTML and CSS, inspect accessibility properties, view event listeners, and set DOM mutation breakpoints
• A Console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript in the context of the selected window or frame
• A Debugger to step through code, set watches and breakpoints, live edit your code, and inspect your web storage and cookie caches
• A Network panel to monitor and inspect requests and responses from the network and browser cache
• A Performance panel to profile the time and system resources required by your site
• A Memory panel to measure your use of memory resources and compare heap snapshots at different states of code execution
• An Emulation panel to test your site with different browser profiles, screen resolutions, and GPS location coordinates

These shortcuts control the main DevTools window and/or work across all tools.

[table][tr]Action Shortcut [/tr] [tr][td]Show/Hide DevTools (opens to last viewed panel)[/td] [td]F12, Ctrl+Shift+I[/td] [/tr] [tr][td]Show non-editable HTML source code in Debugger[/td] [td]Ctrl+U[/td] [/tr] [tr][td]Show/hide Console at the bottom of any other tool[/td] [td]Ctrl+`[/td] [/tr] [tr][td]Switch to Elements (DOM Explorer)[/td] [td]Ctrl+1[/td] [/tr] [tr][td]Switch to Console[/td] [td]Ctrl+2[/td] [/tr] [tr][td]Switch to Debugger[/td] [td]Ctrl+3[/td] [/tr] [tr][td]Switch to Network[/td] [td]Ctrl+4[/td] [/tr] [tr][td]Switch to Performance[/td] [td]Ctrl+5[/td] [/tr] [tr][td]Switch to Memory[/td] [td]Ctrl+6[/td] [/tr] [tr][td]Switch to Emulation[/td] [td]Ctrl+7[/td] [/tr] [tr][td]Help Document[/td] [td]F1[/td] [/tr] [tr][td]Next tool[/td] [td]Ctrl+F6[/td] [/tr] [tr][td]Previous tool[/td] [td]Ctrl+Shift+F6[/td] [/tr] [tr][td]Previous tool (from history)[/td] [td]Ctrl+Shift+[[/td] [/tr] [tr][td]Next tool (from history)[/td] [td]Ctrl+Shift+][/td] [/tr] [tr][td]Next Subframe[/td] [td]F6[/td] [/tr] [tr][td]Previous Subframe[/td] [td]Shift+F6[/td] [/tr] [tr][td]Next match in Search box[/td] [td]F3[/td] [/tr] [tr][td]Previous match in Search box[/td] [td]Shift+F3[/td] [/tr] [tr][td]Find in search box[/td] [td]Ctrl+F[/td] [/tr] [tr][td]Give focus to console at the bottom[/td] [td]Alt+Shift+I[/td] [/tr] [tr][td]Dock/undock tools (toggle docking)[/td] [td]Ctrl+P[/td] [/tr] [tr][td]Launch DevTools to Console[/td] [td]Ctrl+Shift+J[/td] [/tr] [tr][td]Refresh the page. Note: if you're debugging and paused at a breakpoint, this resumes execution first.[/td] [td]Ctrl+Shift+F5 or Ctrl+R[/td] [/tr] [/table]

This tutorial will give you details about and how to open Microsoft Edge Developer Tools in Windows 10.


CONTENTS:

• Option One: Open and Close Microsoft Edge Developer Tools using Keyboard Shortcut
• Option Two: Open and Close Microsoft Edge Developer Tools from "Settings and More" menu
• Option Three: Directly Close Microsoft Edge Developer Tools

EXAMPLE: Microsoft Edge Developer Tools









OPTION ONE [/i] Open and Close Microsoft Edge Developer Tools using Keyboard Shortcut
1. While using Microsoft Edge, press the F12 key to toggle open and close of Developer Tools.





OPTION TWO [/i] Open and Close Microsoft Edge Developer Tools from "Settings and More" menu
1. While using Microsoft Edge, click/tap on the Settings and more (Alt+X) (3 dots) button, click/tap on Moore tools, and click/tap on Developer Tools to toggle open and close of Developer Tools. (see screenshot below)

*note If Developer Tools is undocked from Microsoft Edge, it will not close using this option.









OPTION THREE [/i] Directly Close Microsoft Edge Developer Tools
1. Click/tap on the Close (X) button in Developer Tools. (see screenshot below)





That's it,
Shawn


Related Tutorials

• How to Enable or Disable Microsoft Edge Developer Tools in Windows 10

:)

 

Microsoft is developing a built-in ad blocker for its Edge browser

"One of the first browser add-ons many people install to improve their online experience is Adblock Plus or something similar. Until recently, Microsoft Edge's lack of support for add-ons put off a lot of would-be users, but reports from Build 2016 suggest that native ad blocking is on its way to the Internet Explorer successor.

Adblock Plus is coming to Edge, but built-in ad blocking would negate the need for such an add-on. A slide shown off and snapped at a Build presentation shows that the next version of Edge, in response to user feedback, will feature ad blocking capabilities. There's no word on delivery timescale, but the upcoming Windows 10 Anniversary Update would seem a likely candidate.

ZDNet's Ed Bott photographed the slide which shows Microsoft's development roadmap built around feedback from testers. Right at the top of the list is reference to plans to create a plugin and extension store for Edge, but it's entry number four that's more intriguing.

"Build ad blocking features into the browser" is listed as a Feature Request from users. But the good news is that it is not only listed as being "Deliverable 4682811", but as "Targeted for the next version".

This will no doubt come as good news for those who have fallen in love with Edge, but it's not something that will be welcomed by the likes of Adblock Plus. It does seem that, particularly in the mobile arena, there is a move to baking ad blocking into the browser so it makes sense that Microsoft is following the trend. But it is the fact that Edge straddles Windows 10 on the desktop and Windows 10 Mobile that makes this a particularly interesting move.

Keep an eye out for Insider builds in the coming weeks as the feature may be just around the corner."

Forget extensions, built-in ad blocking is coming to Microsoft Edge - [UPDATE... no it's not!]

 

Microsoft Selects Dolby Audio for Windows 10

it would've been great if microsoft added HEVC decoders, LAV filters along with other codecs with Windows 10, and developing WMP to be better than VLC, KMPlayer and such sorts of media players.

Nevertheless, this is good step for microsoft, by far.

 

Microsoft Edge doesn't open in Windows 10

Microsoft Edge doesn't open in Windows 10.

Somehow my system got infected with some malware. Due to which Edge was opening random ads in new tabs with any click on any site. After some efforts I cleaned the malware, but the malware seem to have broken edge; some edge files also got cleaned out.

Now while opening opening blue screen comes fine, just a quick flash of Edge window comes but without showing anything or allowing to do anything closes itself.

I couldn't uninstall and re-install as Edge doesn't show in programs list.

I also tried following steps as suggested by the Microsoft Virtual support agent, No issues came up with that and nothing got resolved.

• Press Windows key + X.
• Click command prompt (Run as administrator).
• In the Administrator Command Prompt window, type the following commands. Press Enter key after each command:
  • DISM.exe /Online /Cleanup-image /Scanhealth
  • DISM.exe /Online /Cleanup-image /Restorehealth

 

Windows 10 Tweaks

Pressing “Windows+Pause Break” (it’s up there next to scroll lock) opens the “System” Window.

Windows 10: In the new version of Windows, Explorer has a section called Quick Access. This includes your frequent folders and recent files. Explorer defaults to opening this page when you open a new window. If you’d rather open the usual This PC, with links to your drives and library folders, follow these steps:

• Open a new Explorer window.
• Click View in the ribbon.
• Click Options.
• Under General, next to “Open File Explorer to:” choose “This PC.”
• Click OK

credit to Lifehacker.

 

microsoft edge will not open on windows 10

Hi Richard,



Thank you for posting your query in Microsoft Community.



For better understanding of the issue, please reply to the following questions.

• 
  Does the same issue occur when you connect to the internet through Internet Explorer?
  
• 
  Did you make any changes to the system prior to this issue?
  

I suggest you to follow the below steps and check if it resolves the issue.

Method 1: Delete the Browser history

Follow the steps in below article to clear browser history in Microsoft Edge:

View and delete browser history in Microsoft Edge



Method 2: Reset Microsoft Edge

Follow the below steps to reset Microsoft Edge and check if the issue persist.

• 
  Navigate to the below location and delete everything in this folder.
  

C:\Users\%username%\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe

• 
  Type Windows Powershell in search box.
  
• 
  Right click on Windows Powershell and select Run as administrator.
  
• 
  Copy and paste the following command.
  

Get-AppXPackage -AllUsers -Name Microsoft.MicrosoftEdge | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml" –Verbose}

• 
  Check if the issue is resolved, if not restart the system.
  

Hope it helps. Let us know how it goes, we’ll be glad to assist you further.

Regards.