1540054 - Add a "Use in console" & "Copy as Fetch" context menu entries

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Feedback from https://twitter.com/fux0r/status/1111323909532643329

Some people would like to have the ability to transform a network entry into a fetch expression in the console to be able to iterate on a given network call.

So imagine you have a call to https://example.com?hello=world, the context menu entry would fill the console with:

await fetch("https://example.com?hello=world", {
  method: "GET",
})

or even better (so you can play with params more easily):

await fetch(`https://example.com?${new URLSearchParams({
  hello: "world",
})}`", {
  method: "GET",
})

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

We could also have a different context menu entry to only assign the response result to a temp variable in the console, like we do for dom nodes in the inspector.
It creates a temp* variable, and pre-fill the console input with the variable name. I can see that being handy when working with JSON responses (I used to copy the response body and paste it in the console, but that takes many steps).

And then we could have the same thing for network messages in the console so it would be even faster for people.

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I really like the ideas, thanks for the report Nicolas!

I created a follow up for the second idea (comment #1): bug 1540077

Honza

Comment 3

[Mrigank Krishan]

Attachment: Bug 1540054 - Create fetch request from selection. r=Honza

add "Copy as fetch" context menu item

Comment 4

[Mrigank Krishan]

Hey! Please take a look at my attempt on this.
Currently, I have added a context menu item "Copy as fetch" to copy the selected request as fetch.

I'm looking into ways to pre-fill the console. Any pointers?

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for working on this. Please see my comments in Phabricator.

Honza

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

clearing ni

Comment 7

[Mrigank Krishan]

Do we really need a "Use in console" option? I think having just "Copy as Fetch" is enough, it covers a broader use case.
Users can paste into the console if they want or they can use it wherever they want.

What do you think?

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

So, we were discussing this and there are good reasons to have both these actions.

• "Copy as Fetch" in the existing "Copy" context sub-menu
• "Use in Console" in top level Context menu. Please create separator at the bottom and put this one as the last one. This one should open the Split Console and put the generated source into the input field.

This will help us:

• Extend existing set of Copy actions and improve parity with Chrome
• Extend existing set (there is similar action in the Inspector panel) of "Use in" actions - support for close integration with other panels. No need for a sub-menu at this point.

Please, update the patch and I'll review it.

Thanks!

Honza

Comment 10

[Mrigank Krishan]

Updated on phabricator

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/29e9e55681ab
Create fetch request from selection. r=Honza

Comment 12

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/29e9e55681ab