Bug 107276 - Web Inspector: Show requests in `curl` syntax in DevTools → Network → Headers
Summary: Web Inspector: Show requests in `curl` syntax in DevTools → Network → Headers
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Sergey Ryazanov
URL: http://crbug.com/166617
Keywords:
Depends on:
Blocks:
 
Reported: 2013-01-18 06:08 PST by Sergey Ryazanov
Modified: 2013-03-28 01:14 PDT (History)
13 users (show)

See Also:


Attachments
Patch (4.61 KB, patch)
2013-01-18 07:20 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff
Screenshot of the new button. (100.79 KB, image/png)
2013-01-18 07:22 PST, Sergey Ryazanov
no flags Details
Patch (5.32 KB, patch)
2013-01-21 02:00 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff
Patch (5.31 KB, patch)
2013-01-21 04:56 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff
Patch (7.97 KB, patch)
2013-01-21 12:35 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff
Patch (98.12 KB, patch)
2013-02-25 22:19 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff
I occasionally uploaded patch from another bug. Returning the right patch. (7.97 KB, patch)
2013-02-26 02:14 PST, Sergey Ryazanov
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Sergey Ryazanov 2013-01-18 06:08:42 PST
Reported by mathias@qiwi.be, 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.
Comment 1 Sergey Ryazanov 2013-01-18 07:20:32 PST
Created attachment 183447 [details]
Patch
Comment 2 Sergey Ryazanov 2013-01-18 07:22:08 PST
Created attachment 183448 [details]
Screenshot of the new button.
Comment 3 Pavel Feldman 2013-01-20 23:30:15 PST
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.
Comment 4 Sergey Ryazanov 2013-01-21 02:00:12 PST
Created attachment 183736 [details]
Patch
Comment 5 Andrey Adaikin 2013-01-21 02:17:20 PST
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?
Comment 6 Sergey Ryazanov 2013-01-21 04:56:10 PST
Created attachment 183760 [details]
Patch
Comment 7 Pavel Feldman 2013-01-21 05:02:51 PST
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.
Comment 8 Sergey Ryazanov 2013-01-21 12:35:04 PST
Created attachment 183821 [details]
Patch
Comment 9 Build Bot 2013-01-21 15:08:15 PST
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
Comment 10 WebKit Review Bot 2013-01-22 00:14:37 PST
Comment on attachment 183821 [details]
Patch

Clearing flags on attachment: 183821

Committed r140391: <http://trac.webkit.org/changeset/140391>
Comment 11 WebKit Review Bot 2013-01-22 00:14:41 PST
All reviewed patches have been landed.  Closing bug.
Comment 12 Sergey Ryazanov 2013-02-25 22:19:53 PST
Reopening to attach new patch.
Comment 13 Sergey Ryazanov 2013-02-25 22:19:57 PST
Created attachment 190206 [details]
Patch
Comment 14 Pavel Feldman 2013-02-26 00:37:04 PST
Please follow the bug-per-patch policy.
Comment 15 Sergey Ryazanov 2013-02-26 02:14:08 PST
Created attachment 190246 [details]
I occasionally uploaded patch from another bug. Returning the right patch.
Comment 16 Paul Irish 2013-03-28 01:14:55 PDT
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