Web Inspector: Show requests in `curl` syntax in DevTools → Network → Headers

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Sergey Ryazanov]

Reported by [e-mail], Dec 18, 2012
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1361.0 Safari/537.22

Steps to reproduce the problem:
Currently the Network pane looks like this when a request has been selected: http://i.imgur.com/L6AR9.png

What is the expected behavior?

What went wrong?
It would be immensely useful if there was something like a “copy `curl` command” link next to the view source link near the Request Headers heading — or possibly a link that would show the same request in `curl` syntax so it can be copied to the clipboard manually.

Did this work before? No 

Chrome version: 25.0.1361.0  Channel: canary
OS Version: OS X 10.8.2

https://code.google.com/p/chromium/issues/detail?id=106443 is relevant here, but it’s not the same thing. I think both features (the ability to forge HTTP requests in the browser + having a copy-paste-ready `curl` snippet for further testing on the command-line) can be beneficial to web developers. They’re not mutually exclusive.

[Sergey Ryazanov]

Created attachment 183447 [details]
Patch

[Sergey Ryazanov]

Created attachment 183448 [details]
Screenshot of the new button.

[Pavel Feldman]

Comment on attachment 183447 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=183447&action=review

Mostly looks good. Few nits inline.

> Source/WebCore/English.lproj/localizedStrings.js:89
> +localizedStrings["Copy `curl` command"] = "Copy `curl` command";

Consider renaming to "Copy as curl"?

> Source/WebCore/inspector/front-end/RequestHeadersView.js:341
> +        var copyCurlButton = this._createToggleButton(WebInspector.UIString("Copy `curl` command"));

I think this should be exposed as a context menu item on the network panel items.

> Source/WebCore/inspector/front-end/RequestHeadersView.js:408
> +        function escape(str) {

keep { on the next line.

> Source/WebCore/inspector/front-end/RequestHeadersView.js:417
> +        var supposedMethod = "GET";

inferredMethod?

> Source/WebCore/inspector/front-end/RequestHeadersView.js:419
> +        if (this._request.requestContentType() == "application/x-www-form-urlencoded" && this._request.requestFormData) {

===

> Source/WebCore/inspector/front-end/RequestHeadersView.js:423
> +        } if (this._request.requestFormData) {

else if ?

> Source/WebCore/inspector/front-end/RequestHeadersView.js:429
> +        if (this._request.requestMethod != supposedMethod)

!==

> Source/WebCore/inspector/front-end/RequestHeadersView.js:438
> +        command += data;

A good pattern is to make command an array, push tokens into it and then return command.join(""); You don't need "data" as well.

[Sergey Ryazanov]

Created attachment 183736 [details]
Patch

[Andrey Adaikin]

Comment on attachment 183736 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=183736&action=review

> Source/WebCore/inspector/front-end/NetworkPanel.js:1380
> +        return command.join("");

maybe use join(" ") and get rid of the spaces in "curl ", " --data ", and other strings?

[Sergey Ryazanov]

Created attachment 183760 [details]
Patch

[Pavel Feldman]

Comment on attachment 183760 [details]
Patch

The change looks good. It is missing a test. You can call into new private method from within the test and dump the resulting curl. Note that you might need a mock request for that since otherwise it is going to be platform specific. Clearing r? while waiting for the test.

[Sergey Ryazanov]

Created attachment 183821 [details]
Patch

[Build Bot]

Comment on attachment 183821 [details]
Patch

Attachment 183821 [details] did not pass mac-ews (mac):
Output: http://queues.webkit.org/results/16038217

New failing tests:
svg/as-image/img-relative-height.html

[WebKit Review Bot]

Comment on attachment 183821 [details]
Patch

Clearing flags on attachment: 183821

Committed r140391: <http://trac.webkit.org/changeset/140391>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.

[Sergey Ryazanov]

Reopening to attach new patch.

[Sergey Ryazanov]

Created attachment 190206 [details]
Patch

[Pavel Feldman]

Please follow the bug-per-patch policy.

[Sergey Ryazanov]

Created attachment 190246 [details]
I occasionally uploaded patch from another bug. Returning the right patch.

[Paul Irish]

Sergey, if you can do a driveby it'd be nice to rename the command to match the correct capitalization:  http://en.wikipedia.org/wiki/cURL