69

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

Arulkumar
  • 624
  • 1
  • 8
  • 25
SikoSoft
  • 791

7 Answers7

62

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

Sameer Alibhai
  • 259
  • 1
  • 3
  • 8
rofrol
  • 2,001
  • 19
  • 17
20

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 (Jun, 2024): Steps still working on the latest Chrome 126

Alvaro Castro
  • 301
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.

eb80
  • 263
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.
Michael Thompson
  • 429
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

Pankaj Parashar
  • 139
  • 4
1

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.

soandos
  • 24,600
  • 29
  • 105
  • 136
0

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

I know it is not Chrome, but for me it is even 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

Maxim
  • 301