64

When using Chrome to debug, I find it incredibly difficult to be efficient due to the fact that I don't see how I can force the "Network" tab of the developer tools to show the full request URI.

It will show the full URI if you hover the link and wait a second, but this is incredibly counterproductive.

All of my AJAX requests are sent to ajax.php, and handled by using query string arguments, like:

ajax.php?do=profile-set
ajax.php?do=game-save

... etc.

Since I use AJAX extensively, my network tab is filled with "ajax.php", but I have to manually hover each and every entry to find the request I am looking for.

Surely there has got to be another way!?

I am constantly fed up by something new in Firefox and immediately force myself back into Chrome, but it is always the developer tools in Chrome that keep me from using it for an extended period of time.

Hopefully I can find out how to do this so I can continue using Chrome as my numero uno.

I've provided a screen shot to show you where I mean:

Screenshot

5
  • Possibly better on Stackoverflow?
    – stolsvik
    Feb 23, 2012 at 9:30
  • I thought of that at first since it does seem kind of web-dev related, but the problem I am having actually isn't with development, but using Chrome itself.
    – SikoSoft
    Feb 23, 2012 at 12:14
  • Tools of the trade is also eligible on SO.
    – stolsvik
    Feb 23, 2012 at 22:21
  • 2
    File a bug on new.crbug.com. Or you could file it upstream over at wkbug.com/new. Explain your use case the way you did here, and I’m sure it’ll be fixed eventually. Feb 24, 2012 at 7:26
  • 1
    DevTools tech writer here. FYI I do recommend posting questions like this to Stack Overflow, using the [google-chrome-developer-tools] tag. We monitor that channel, but not this one. Oct 25, 2017 at 19:54

7 Answers 7

57

Some columns contain a primary field and a secondary field (Time and Latency, for example). When viewing the Network table with large resource rows both fields are shown; when using small resource rows only the primary field is shown.

https://developer.chrome.com/devtools/docs/network#network-panel-overview

Chrome dev tools screenshot With the newer versions of Chrome it is now hidden here: Chrome dev tools screenshot new step 1 Chrome dev tools screenshot new step 2

https://developer.chrome.com/devtools/docs/network#changing-resource-row-sizes

4
  • 2
    Essence of answer still true but for later visitors, GUI has changed. (In Chrome 78 at least, I can't say when introduced), option is now found in the network settings (gear tab in top right of the network tab), the 1st checkbox, titled "[ ] Use large request row"
    – Daryn
    Nov 12, 2019 at 12:06
  • This no longer appears to exist in Chrome 83.
    – SikoSoft
    Jun 10, 2020 at 6:39
  • Nor do I think it's a valid answer at least based on the provided screen shots. My concern was not with the leading path, but with the additional query parameters in the URL, which I don't see highlighted in any of the requests.
    – SikoSoft
    Jun 10, 2020 at 6:41
  • @Lev But I see searchParams in Network tab even without "Use large request rows"
    – rofrol
    Jun 10, 2020 at 9:43
16

You can right click the columns in the network tab and select either "Url" or "Path", that will show the complete url of the requests.

You can then right click again and unselect "Name" to remove redundant columns.

Just tested in Chrome 81.

Update (Apr 7, 2022): Just tested it and are still the same steps in Chrome 100.

Update (Sep 28, 2022): Steps still working on the latest Chrome 105.

1
  • 1
    This works, this should be voted up to move up. Sep 26, 2022 at 11:14
4

This is not currently possible. However, there is active work being done on Chrome Dev tools (e.g., https://developers.google.com/chrome-developer-tools/) and you can make a suggestion for an option of this feature.

3

In both Chrome and Firefox you can right-click and save the network information as a HAR (HTTP Archive). That HAR file can be processed manually, with a script or with one of several HAR viewers and contains the full URL.

Google has a great online HAR reader that will show the full URL of each request: https://toolbox.googleapps.com/apps/har_analyzer/

So to see the full URL:

  • Save/export HAR file via Inspect > Network > Right-Click > Save As HAR.
  • Load HAR into HAR Analyzer.
  • Sort/filter as needed or highlight table cells/rows and copy/paste.
3

Source:
https://www.canidev.tools/show-url-path/chrome

Notes:
In the Network tab, open "Network settings" (top-right). Check the option "Use large request rows" to show the URL path under the resource name[1]

References:
[1] "Network features reference" - Chrome Developers

enter image description here

0

This is not something that can be done in Chrome, sorry. In addition, there has been no word about any changes that will be made to the developer panel, so I would not expect this to be added soon.

-1

I glad to report that this feature is now available in Firefox.

I know it is not Chrome, but for me it is event better.

Firefox Nightly 69 can do that. Just right click on columns and choose URL.

FF 69

https://bugzilla.mozilla.org/show_bug.cgi?id=1341155

2
  • 1
    This is potentially useful information, but not posted in the best place. The question is specific to Chrome, so posting here, it might be more appropriate as a comment. The question is also ancient. Readers for whom your answer could be useful aren't likely to stumble across it here. It would be more helpful to find a more relevant question to post it on, or create your own self-answered question.
    – fixer1234
    May 24, 2019 at 20:20
  • You are right absolutely. But some years ago I got the same issue and it was "pain" for developers (Chrome and Firefox as well). So for now I have found top most googled link to report the news. If you can - just move it to correct question ))
    – Maxim
    May 25, 2019 at 13:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .