microsoftedge / devtools Goto Github PK

Starting with Microsoft Edge 99, DevTools is able to securely retrieve source maps published to Azure Artifacts symbol server. This means source maps can easily be published as part of a build system, and then securely be retrieved at runtime, by DevTools, from the symbol server, removing the need to host them on your web server.

See the announcement blog post, and user documentation for more information.

As mentioned in the blog post, DevTools' ability to download from Azure is only a first step and we are interested in hearing from you about what services, other than Azure, you would like DevTools to be able to connect to.

This issue is a central location where we will collect your feedback about the above.

Microsoft editor integration in dev tools messes up with anything I type in it. Right arrow should not auto complete whatever it suggests and should only work like how auto complete works in VS Code or Visual Studio.

Our perf team was wondering if we could adjust colors for stack frames ourselves, rather than auto-assign as it is now. This is something WPA supports quite nicely

An example motivation (we are trying to find Layouts):

Additionally, with the ~100+ unique .js files we use, it seems like a lot of the colors collide in the table. Obviously there's a limit on how many unique colors are distinguishable, but perhaps there's room to improve the current palette to reduce collisions?

Value: Developers can understand the relations between nodes and edges.

Precedent:

• Firefox currently has a view for this inside Memory panel.
• There are open source projects from web devs that parse heap snapshots from DevTools and show force directed graphs.

Potential problems: Visualizations like this may be hard to navigate as the number of nodes increase.

Prototype / Mocks

A modified version of one of the open source projects, showing a simple heap snapshot.

From Step 2: Compute the SHA-256 hash of your script and append it to your source maps, Azure Artifacts Symbol Server needs a hash to index source maps. Instead of defining the webpack 5 plug-in themselves, which is the current process we provide, developers should be able to use a webpack plug-in just like any of ones documented here in their webpack.config.js file.

AB#38455082

Developer Tools > Device Emulation

The device name, scaling, and throttling fields are illegible. Contrast levels do not meet WCAG guidelines.

AB#38864698

A unit dropdown and unit horizontal dragging on lengths in the Styles tab under Elements would be cool. This is a Chrome feature that would be nice to have in Edge.
Dropdown in Chrome:

Hovering over a length value for padding give a horizontal cursor that allows dragging left and right to increase/decrease the value.

AB#38958004

1. Middle click a tab to close it
2. The tab content doesn't change

It's not limited to Welcome tab, all closeable tabs have this issue.

Edge version: 102.0.1227.0 (Official build) dev (64-bit)
DevTools URL: devtools://devtools/bundled/devtools_app.html?remoteBase=https://devtools.azureedge.net/serve_file/@88e5eafe6e76ed12da336200c288360b6dc20981/&can_dock=true&isFeedbackEnabled=true&enabledExperiments=keyboardShortcutEditor;msEdgeVSCodeThemes;msEdgeDynamicWelcome;msEdgeShell;msSourcesPrettyPrintByDefault

AB#39299402

The Sourcemap unminifier in the Edge 99 DevTools profiler is an excellent step in the right direction. However, the majority of our Office JS remains minified due in part to the hardcoded assumption about sourcemap files living next to the JS files. I understand there are difficulties in requesting and parsing huge amounts of HTML and JS to get the inline sourcemap files, but long-term it would be excellent if we could fully unminify all of our source.

I think our North Star here is that DevTools profiles of the Outlook web inbox (https://outlook.office.com/mail/)) are fully unminifiable in the profiler.

What do we need to do, on both the DevTools and the Outlook side, to make this happen? Is the most sustainable approach to publish our sourcemaps to the symbols server and enable the Profiler to access them that way?

This would massively benefit our performance efforts. Even the current level of unminification has allowed us new visibility into interesting bugs and behaviors.

From Step 3: Publish source maps to the Azure Artifacts symbol server, developers currently have 2 ways to publish source maps to Azure Artifacts symbol server:

1. Using Azure DevOps Pipelines
2. Using symbol.exe

We should add a third way that makes use of GitHub actions. There is an Azure NPM Publish action for precedent as well that publishes NPM packages into Azure Artifacts. We would be doing something similar with sourcemaps that we'd then publish to Azure Artifacts symbol server.

AB#38455080

Forcing a garbage collection, such as with the button in dev tools, doesn't collect all the memory it can. It seems like there are still some heuristics that apply. This behavior is not clear to newcomers. Ultimately this behavior makes it harder to find memory leaks.

It'd be really nice if there is an option for sorting alphabetically the CSS rules in the Elements tab.

AB#38517024

Hi,

I found WebView2 APIs for Python and GO,
but it would be a great step if there was a WebView2 JAVA API.
The JDK 18 with the Panama project has a header file scanner for FFI API building and
might be possible to build the Java API wrapper for WebView2.
Are there any plans to provide a Java API wrapper for WebView2?

Thanks, Fried

In Microsoft Edge 99, DevTools added a new feature to connect to Azure Artifacts symbol server which can now host sourcemaps. This feature could be more generalized and allow DevTools to connect to any server that hosts sourcemaps. This provides an alternative to hosting sourcemaps from the same server that hosts production code.

This was originally reported by @ericlaw1979 on twitter: https://twitter.com/ericlaw/status/1498817513362276356

The idea is: the DevTools Network tool already allows importing HAR files (which you can capture in a number of ways: from DevTools, or puppeteer, or others), and it would be good if it also allowed importing NetLog JSON files.

You can read more from Eric himself about NetLog here: https://textslashplain.com/2020/04/08/analyzing-network-traffic-logs-netlog-json/

You can capture NetLog files from a chromium-based browser by going to about:net-export.

We think that different visualizations may improve the experience of exploring a *.heapsnapshot file and reduce the time it takes to isolate a single retainer chain for an object in the heap.

Currently, the Memory tool allows a user to take a heap snapshot and explore its contents, but we have heard feedback that parsing the retainers tree view in the bottom can be difficult.

We created a simple playground to test this idea, it allows you to upload a heap snapshot file and explore the connections from the GC roots or to focus on a single object and visualize its retainer chain all the way up to a root.

When debugging an issue that only reproduces in low memory environments, DevTools should have the ability to simulate low memory or throttle memory. DevTools can already throttle CPU to mimic slow performance and it'd be useful for memory debugging to be able to do the same.

From List of V8 flags, V8 has a flag called --max-old-space-size that appears to constrain the memory usage of a tab in the browser when specified via --js-flags but we should continue to investigate if this actually simulates low memory or if the tab has the same virtualized memory it would normally have.

Really useful tools like https://www.websitecarbon.com & https://www.thegreenwebfoundation.org

Have lots of useful information to help developers assess the CO2 footprint of their work. This should be something that was just built into our developer tools.

We should see the relative CO2 emissions of a page.

AB#39825299

In apps where (string) objects take up a large portion of the heap, provide an option that allows developers to run additional queries over that data (such as regex) to find patterns for what kinds of strings contribute the most to memory footprint. Optionally, indicate how many strings are duplicates of each other.

Potential problems: Indexing the list of strings could require more memory from the tool.

INSHA ALLAH MicrosoftEdge/DevTools for my personal use please MicrosoftEdge/DevTools/nawabdera
[email protected]
Nawabdera
Nawab IkramUllah Khan
[email protected]
Regards again

Hello!

I have been looking into a performance issue where an iframe hidden by "display: none" would be throttled.

I found that the flag "enable-throttle-display-none-and-visibility-hidden-cross-origin-iframes" could be responsible for this throttling, however I don't see it at all in edge://flags (while I can find it in chrome). Has it been fully enabled/disabled?
Is there anything else than this flag that could explain the throttling I am seeing? Testing in chrome with or without the flag doesn't make any difference (but removing "display: none" makes a huge difference).

Thanks!

If I make edits in the Elements and Styles pane and refresh the page, I lose all my edits. A prompt somewhere to remind me that I've made edits would be beneficial.

Based on this tweet: https://twitter.com/ckirknielsen/status/1502410499299938313?s=20&t=RjOeCI-W07MtnAEfZ-QNrw

AB#38516969

Although "Include third-party issues" is not ticked, I get the issue

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

with each of the following extensions:

• Bitwarden
• axe DevTools
• Redux DevTools

That seems counterproductive for everything but extension debugging.

Version 100.0.1185.27 (Official build) beta (64-bit) on Ubuntu 20.04.4 LTS.

I'm pretty sure I had the same issue on macOS, but that was in 2021, so mild anecdata disclaimer there.

When connecting to Azure Artifacts symbol server from DevTools, from Step 1: Generate a Personal Access Token for Azure DevOps, DevTools requires developers to generate a PAT to connect to symbol server.

The Edge browser already makes use of AAD and signed-in users for several enterprise features from Configure Microsoft Edge enterprise sync. We should investigate if we can bypass the PAT generation via AAD and authenticate to Azure Artifacts automatically. This would simplify the process for connecting to symbol server from DevTools.

AB#38455078

When uploading a file via a POST request created by a form with content type "multipart/form-data", all form data disappears from the request in the network tab.

There was a similar report for Chrome as well here: https://stackoverflow.com/a/59871612

Expected:
Show the form data in the network tab for these types of POST requests. Ideally, if all the data including the file data could be shown, it would be great. Although, just having the non-file data would be nice too.

To reproduce:

1. Go to a browser page with a form file upload like: https://www.filestack.com/fileschool/html/html-file-upload-tutorial-example/
2. Open the network tab and ensure recording is on
3. Upload a file via the form and submit
4. Inspect the POST request in the network tab and see there is no form data visible

AB#38549603

In Microsoft Edge Version 99.0.1150.36 on Windows 10, when I try to save an image using "Save image as..." in the context menu of Preview option after selecting it in the Network tab list of resources downloaded for a web page in Dev Tools, there is no explicit indication that the image is actually saved.

In Chrome (checked in Version 99.0.4844.51, on Windows 10), the downloaded image is explicitly shown in the bar below the web page (see screenshots). So while downloading several images from the Network tab file list, it is easier to check which one I last downloaded.

With Edge, I can check it under Downloads option but it is not so obvious. I wish there was some explicit visual cue that shows the file name that was downloaded last.

Also, can you please provide a keyboard shortcut for "Save image as..." so that downloading images can be faster from the Preview pane instead of opening context menu & clicking on "Save image as...". Having a way to download multiple images at once would also be helpful.

AB#38516900

Value: Developers can easily parse the retainers of an object.

Precedent: Chrome used to have this view before, DevTools currently has code that finds dominators to calculate retained size but we don’t expose the view to developers. Firefox currently has dominator view.

• Firefox docs Dominators view
• Crbug 574153: In the Profiles tab, the Dominators view is missing even though I've enabled the advanced heap setting
  
• StackOverflow: How to show dominators view in chrome developer tools?

Prototype / Mocks

The Console in Firefox does autocompletion for brackets of all kind which makes it much faster to type JavaScript expressions without any errors. The Console in Edge does not. However, the Snippets editor in Sources does. This seems inconsistent and it would be great if Console also closed brackets automatically.

AB#38474358

Chrome devtools has supported the Recorder panel from Chrome 97: Recorder: Record, replay and measure user flows - Chrome Developer, which can record & replay a user flow, also can export the user flow as Puppeteer script to customize the script further.

I wonder whether there's any plan for Edge devtools to include this Recorder panel. And is it possible to export the user flow as Playwright script?

AB#39424931

Steps to reproduce:

1. Install React Dev Tools extension from https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil
2. Open a page that uses React in development mode
3. Open dev tools with F12

Expected:
⚛️ Components and ⚛️ Profiler tabs show in the dev tools

Actual:
Tabs are not visible and there seems to be no way to add them

Screenshot from Chrome:

Screenshot from Edge:

It would be helpful to execute some frequently used JS statements using custom snippets (similar to VS code user snippets) like autocompletion.

Currently today, all of Objects, Arrays, etc. are all combined within the same constructor within a heap snapshot view. This makes it difficult to get a summary of what types of objects are causing the most memory problem. If instead, we could provide a friendly name to objects, so the aggregation of those events could be based off of friendly name, this would help us in allowing to target the correct objects that will get us the most bang for our buck.

AB#39492569

I have been trying the Enabled setting for Dark Mode with my website Public Talk Software.

I am colour blind and don't really understand all the other drop-down choices. Besides, I have no control over what browser other users might use, and / or if they try this experimental feature.

What I have noticed is that my Info Boxes are very hard to read:

It seems to have made a bad decision to make the text white without a suitable adjustment to the background to compensate.

This is the same Info Box with the experimental feature switched off:

Quite a vast difference. Can you please improve that logic and it is degrading my website viewing experience.

We currently have a preview extension out that integrates Edge Developer tools into Visual Studio. You can read about it in this blog post and try it out.

This is a pinned issue to collect all the feedback for the extension and we'd love to hear what we can do better.

Currently, the WASM memory is just a huge array buffer.
We need a way (extensibility point? + contribution of .NET Runtime team?) to inspect the .NET WASM memory.
Currently the most common scenario is Blazor WebAssembly application running in browser.
It is currently impossible to diagnose memory leaks or proceed with any other in-depth analysis of the memory.

AB#46073118

We don't have a lot of intuitive insight into ServiceWorkers and whether Network activity is ultimately serviced from Disk or Network.

It would be great if we could instrument the cache-fail points in network requests (e.g., you can imagine that the browser internally checks Cache header, ETag header, Expires header, etc. etc.. We can't get into Service Worker logic of course (since that's script-managed) but we could create a new panel (even a column) that indicates that we were appropriately serviced by the cache.

It would also be excellent to know why it's not coming from DiskCache when a ServiceWorker is present!

This feature request is part of the larger theme of context menus not being tailor for developer needs in DevTools #50.

By the nature of my current project, I have to manipulate DOM objects, is a sense that execution of the code highly depends on involved DOM object.

So the problem is that If you happen to have a local variable assigned to DOMElement to see where it is located within the document you need to do the following:

1. Copy variable name
2. paste it to Console
3. Hit enter
4. Open context menu on the result
5. Pick Reveal in Elements panel
6. Open Context menu again
7. Pick 'Scroll into view' half a screen away from the current mouse position from the list of unrelated and visually similar options.

At this point, repeating the command and typing .scrollIntoView() feels line a shortcut. CUI wins over GUI.

Thank you for considering this request.

AB#39424857

MicrosoftEdge/DevTools/[email protected]
Best wishes
Regards
Nawab IkramUllah Khan

One of the biggest frustrations for me is figuring out what keeps stealing focus all the time! :)

It would be great if there is a devtools feature that can enable capturing a history of focus transition in the DOM. Knowing the sequences of transition would make it so much easier to pin-point the source code / event handler / relevant components to investigate. Usually, figuring out which event handler to set the breakpoint in is the most time-consuming activity and a feature like this may make things a lot quicker.

AB#39079675

Color picker is fairly common use case in my web development, and I often have to open online image color picker to retrieve a color from web page or canvas element. In DevTools, Color picker functionality is available in color, background-color swatches in Elements > styles pane.

I believe adding a color picker that is easily accessible in top level UI in DevTools will be useful to developer's workflow. I added a command in a prototype, gif below. It can be added as a button in other places as well.

Edge Dev, and Edge no longer working correctly when trying to do an Alteryx Replace Workflow.
It used to work several versions of edge back. I've had to revert to using Chrome to do this 30 second process.
What I don't know if it's a setting issue or something internal in the Edge/EdgeDev code.
Can you assign someone to work with me on this issue? Thanks Neill

Is there currently a good way to inspect and get stats from the layout tree, say its size and/or other properties? I tried to use Edge tracing and enabled the blink.debug.layout.trees category, but that seemed to only print out a bunch of layout objects seemingly without a way to inspect them.

Context on the request: investigating an issue where hit-testing is taking a long time (~10ms), the suspicion is that the layout tree grows too big. So I want a way to inspect the layout tree size in order to assess mitigation strategies like CSS containment and DOM virtualization.

Thanks!

AB#39172861

This is a test bug to verify the connection to ADO.

AB#40754557

Toggling the device emulation mode is great for proof-testing and debugging your mobile website designs, but it's currently missing an essential piece that still makes testing on a real device a critical part of the dev workflow: there's no browser UI included in the screen simulation, especially the toolbar part containing the current URL that appears at the top (or bottom) of the window.

As this toolbar usually alter the window dimensions in the final device, it makes it easy to overlook issues that may only appear on real devices.

This is particularly the case with dual screen emulation for the Surface Duo, as on the real device both screen windows may not have the same size depending of the orientation because of the browser UI, whereas on the simulator both windows will always have the same size:

For example, when loading the same website on a real Surface Duo, the top window will have its vertical size reduced because of the URL toolbar.

What happened?
When using autoit WebDriver UDFs with MSEdge driver and IE mode the MSEdge browser starts and visits the correct page but doesn't enable IE mode and displays "Turn off remote debugging to open this site in IE mode otherwise it might not work as expected."

How can we reproduce the issue?

#include "include\JSON.au3"
#include "include\WinHttp.au3"
#include "include\wd_core.au3"
#include "include\wd_helper.au3"

WD_Option('Driver', @ScriptDir & '\include\' & ([@Compiled](https://www.autoitscript.com/autoit3/docs/macros.htm#%40Compiled) ? '' : 'Exe_externe\') & 'msedgedriver.exe')
_WD_Option('DriverParams', '--log trace ')
_WD_Option('Port', 9515)
$sDesiredCapabilities = '{"capabilities": {"alwaysMatch": {"ms:edgeOptions": {"args": ["--ie-mode-force"]}}}}'
_WD_Startup()
$sWDSession = _WD_CreateSession($sDesiredCapabilities)
_WD_Navigate($sWDSession, "https://docs.microsoft.com/en-us/deployedge/edge-ie-mode-faq#does-ie-mode-on-microsoft-edge-support-the--nomerge--option-that-was-supported-in-internet-explorer-11-")

Operating System
Windows 10

Autoit version
3.3.16.0

What are the browser driver(s) and version(s) where you see this issue?
Microsoft Edge WebDriver 100.0.1185.50

In my opinion, context menus are underdeveloped and not used for dev needs.
The biggest offender, in my opinion, is the context menu is in Source bar. Most of the option are not relevant for development or debugging. Most of the actions can be removed (Emoji, Save As..., search, define). I doubt that all text manipulations are needed, since all devs know shortcut for those operations. Others are relevant at the file level and make more sense in File tab in side navigator.

It would be much better to have basic operations similar to ones in VS Code, go to definition, find all references, and things of that nature.

It would also be super handy to have context dependent options for DOM object. Especially "Scroll into view".

In general, it would be good to have context menu unified as much as possible. For example, make "Store as global" and "Scroll into view" available from Source tab context menu, not only from Elements. I've create another issue on the scroll into view subject here.

It feels like context menus are neglected at this point, and they can have great value for productivity during debugging.

Will be happy to hear what you think, and would love to get involved in discussion and brainstorming of this subject.

Cheers

AB#39424738

Allow pinning individual Dev Tools like Network, Performance etc., as it is leading to accidental closure sometimes while switching.

I find myself always toggling between enable/disable the breakpoint instead of intended navigation to the break point. The reason is likely that there is not visual separation between hit areas for leading to toggle (name of the file and line number) and area leaning triggering the navigation (line of code).

I would suggest reserving the area with the text for navigation and checkbox only for toggling, there is not need in big hit area for that.

AB#39373222

In Microsoft Edge 99, the Unminify button was added to the Performance tool which uses sourcemaps hosted side-by-side with production code to create an unminified version of a recorded performance profile. If developers have already set up Azure Artifacts Symbol Server to host their sourcemaps, the Performance tool should be able to use them to unminify a performance profile. Doing so would remove the requirement that you have to host your sourcemaps side-by-side with your production code like this:

Currently DevTools allows users to view different panels via console drawer, this is quite useful if users want to quickly check console messages when viewing Elements or any other panel.

This is sufficient for panels that are not heavy, but while viewing more information-dense panels such as Elements, Sources, 3D view etc. simultaneously in horizontal drawer, it is not optimal experience.
I believe adding a toggle button to set drawer to vertical orientation will alleviate this issue, and it is easy to revert back to default orientation.

Demo video

AB#38958191