在 Chrome 开发者工具的“网络”标签中显示完整的 URI/URL

在 Chrome 开发者工具的“网络”标签中显示完整的 URI/URL

当使用 Chrome 进行调试时,我发现效率极低,因为我不知道如何强制开发人员工具的“网络”选项卡显示完整的请求 URI。

它将显示完整的 URI如果您将鼠标悬停在链接上并等待一秒钟,但这是非常适得其反的。

我的所有 AJAX 请求都发送到 ajax.php,并使用查询字符串参数处理,例如:

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

... ETC。

由于我广泛使用 AJAX,我的网络选项卡上充满了“ajax.php”,但我必须手动将鼠标悬停在每个条目上才能找到我正在寻找的请求。

肯定还有其他办法吗?

我经常会对 Firefox 中的新功能感到厌烦并立即强迫自己回到 Chrome,但 Chrome 中的开发人员工具总是阻止我长时间使用它。

希望我能找到方法做到这一点,以便我可以继续使用 Chrome 作为我的首选。

我提供了一个屏幕截图来向你展示我的意思:

截屏

答案1

某些列包含一个主字段和一个次字段(例如时间和延迟)。查看具有大资源行的网络表时,两个字段均会显示;使用小资源行时,仅显示主字段。

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

Chrome 开发工具截图 在 Chrome 的新版本中,它现在隐藏在这里: Chrome 开发工具截图新步骤 1 Chrome 开发工具截图新步骤 2

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

答案2

您可以右键单击网络选项卡中的列并选择“Url”或“Path”,这将显示请求的完整 url。

然后您可以再次右键单击并取消选择“名称”以删除多余的列。

刚刚在 Chrome 81 中测试过。

更新(2022 年 4 月 7 日):刚刚测试过,Chrome 100 中的步骤仍然相同。

更新(2022 年 9 月 28 日):这些步骤仍在最新的 Chrome 105 上运行。

答案3

目前还无法实现。不过,Chrome Dev 工具正在积极开展相关工作(例如,https://developers.google.com/chrome-developer-tools/),您可以对该功能的选项提出建议。

答案4

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

笔记
在“网络”选项卡中,打开“网络设置”(右上角)。勾选“使用大请求行”选项,即可显示资源名称下的 URL 路径[1]

参考
[1]“网络功能参考” -Chrome 开发者

在此处输入图片描述

相关内容