Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feedback][Experiment] Explain errors, warnings, and source code in the Console and Sources tools #203

Open
captainbrosset opened this issue Dec 7, 2023 · 12 comments
Labels
feedback Feedback about an existing DevTools feature

Comments

@captainbrosset
Copy link
Contributor

captainbrosset commented Dec 7, 2023

tl;dr: A new experimental feature to explain errors/warnings from the Console, and code from the Sources tool in Copilot in Edge is now available with Edge 120. We'd love your feedback about it, feel free to leave a comment here.


Context

Errors in the Console can sometimes be cryptic and hard to act on. Some are very helpful for debugging and fixing problems. But others are harder to understand.
When this happens, searching for the error text online or asking coworkers doesn't always lead to a solution, and causes a lot of context switching.

Feature

Starting with Edge 120, and behind an experimental flag, DevTools now integrates directly with Copilot in Edge. Once enabled, the Console and Sources tool get additional functionality to explain errors/warnings, and source code in Copilot in Edge.

  • Console tool: click the Copilot icon next to an error or warning to start a conversation with Copilot in Edge about the specific error or warning. Copilot gets the right context and provides a customized explanation of the error, and a potential fix for it.

  • Sources tool: select some code, right-click the selected text, and then ask Copilot to explain the code. A conversation starts in Copilot in Edge. Copilot provides an explanation of the code snippet.

To learn about enabling and using the feature, see Explain DevTools Console errors and source code using Copilot in Edge.

Feedback

We're actively experimenting with this new feature.

If you've used it and have any feedback to share with us, please feel free to leave a comment here.

@captainbrosset captainbrosset added the feedback Feedback about an existing DevTools feature label Dec 7, 2023
@leotlee leotlee pinned this issue Dec 13, 2023
@Rnbsov
Copy link

Rnbsov commented Dec 29, 2023

Awesome feature! This is the integration I was waiting for. Using it daily 😃👍

@phyllisstein
Copy link

Any thoughts on why the flag wouldn't show up on macOS? I haven't been able to find it in any of the release channels. It's definitely there (and very cool!) on a Windows 11 VM running Edge mainline.

@captainbrosset
Copy link
Contributor Author

Thanks for the feedback @phyllisstein, let me file a new bug about this.

@ltinerary
Copy link

ltinerary commented Mar 25, 2024

Edge Version
Microsoft Edge
版本 123.0.2420.53 (正式版本) (64 位)

Windows Version:windows 11

I can't use this feature, is it available to all users?

I turned on this feature in the settings and it restarted.
The AI icon does not appear in the upper right corner of the browser
image
image

@captainbrosset
Copy link
Contributor Author

@ltinerary yes, the feature is available to all users. I think the reason why you're not seeing the icon is because you haven't enabled Copilot in Edge first.
Please follow the steps here to do so: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console#enable-copilot-in-edge

@ltinerary
Copy link

@captainbrosset Thank you for reply!

In the sidebar setting page,I can't change the options. and I'm sure I'm logged in.
7e7fe8d2f2413eb920a9c904df3aa9d

I can see this copilot button on the console, but clicking on the button doesn't work.

image

@captainbrosset
Copy link
Contributor Author

Oh, that's interesting. Let me bring this into a separate issue for tracking, and ask our dev team to investigate. Thank you.

@jcnix
Copy link

jcnix commented Apr 2, 2024

I have not used this, but based on the example given from the documentation this feature is currently worse than useless; it's actively detrimental.

The correct explanation of the error is on the left, presumably written by a human on the demo page. Copilot instead recommends you dig into the browser internals in VM291 line 1.

image

@captainbrosset
Copy link
Contributor Author

I have not used this, but based on the example given from the documentation this feature is currently worse than useless; it's actively detrimental.
The correct explanation of the error is on the left, presumably written by a human on the demo page. Copilot instead recommends you dig into the browser internals in VM291 line 1.

The screenshot doesn't show the entire response from Copilot. Only the first bullet point of a mulit-part response, which explains what the VM291:1 symbols mean to the user.
The demo page used in this screenshot generates JavaScript errors by evaluating JS code, which is why the errors appear from the VM script, instead of from a more traditional JS script URL.
Copilot is simply telling the user that VM291:1 means that the browser evaluated the script in the JS VM, and that the numbers correspond to line and column locations.

If you actually use this feature, you will see that the response then contains information about the fact that the error is often due to a 404 HTML response from the server, instead of JSON content.

@jcnix
Copy link

jcnix commented Apr 3, 2024

All I'm saying is I don't want to read a novel to get to the actually relevant part. The explanation from the demo page is succinct, the Copilot response starts by leading you down the wrong path and buries the actual answer under who knows how many paragraphs of nonsense.

@captainbrosset
Copy link
Contributor Author

Not nonsense, introductory content that other people might find helpful. But, thank you for the feedback, making the explanation more succint is great feedback that I'll bring back to our team.

@mvallet91
Copy link

When I click on the icon, it simply collapses or expands the error message (same behaviour as clicking the little arrow on the left of POST or GET. On hover it shows : Ask Copilot: Explain this error but on right click, it shows the same options as the rest of the error
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feedback Feedback about an existing DevTools feature
Projects
None yet
Development

No branches or pull requests

6 participants