web-dev-qa-db-ja.com

Googleの[ネットワーク]タブでダウンロードをキャプチャするChrome Developer Tools

Google Chromeデベロッパーツールウィンドウの[ネットワーク]タブには、行われたほとんどすべてのhttpリクエストが表示されますが、httpリクエストによってファイルがダウンロードされる場合、何もキャプチャされないようです。

Google Chromeでダウンロードリクエストをキャプチャするにはどうすればよいですか?

23
Acidic9

Google Chromeが更新され、[ネットワーク]タブでのダウンロードがサポートされるようになりました


この質問は2018年2月に行われたもので、Google Chrome=は[ネットワーク]タブでのダウンロードをサポートしていませんでした。

これを確認するには、Google Chromeの64.0.3282.140ビルドをダウンロードします。

Google Chrome Version

次に、例としてSpotifyをダウンロードしようとしたところ、ネットワークタブにイベントが表示されませんでした。

Spotify Download

すべてのGoogle Chrome 2019以降にリリースされたバージョンでは、すべてのダウンロードリクエストが[ネットワーク]タブにキャプチャされます。

2
Acidic9

新しいウィンドウを開いて、ファイルのダウンロードが行われていることを確認します。開発者ツールのネットワークタブは、現在のタブのリクエストのみをキャプチャします。

たとえば、次のリンクはファイルをダウンロードしますが、ネットワークタブには表示されません。

<a href="/yourfile.doc" target="_blank">Click Here to Download file</a>

(window.open、ダイナミックハイパーリンク/ iframe)を使用するJavaScriptを使用して同様のタイプのことを行うことができますが、ネットワークタブには表示されません。

チェックできるさまざまなJavascriptアプローチ ここ

私は過去に同様の行動を観察しました。

古いバージョンのchromeでchrome://net-internalsを確認し、新しいバージョンのchromeでchrome://net-export/を確認して、あらゆるタイプのリクエストを監視できます。クロムのインスタンス/タブによって作成されています。

注:クロムのURLボックスにchrome://net-export/と入力すると、chromeの内部イベントを確認できます。

4
PSK

私は同様の問題に直面しました、そしてここに私がそれを解決した方法があります。

問題:

ファイルをクリックしてダウンロードするアン​​カーリンクをデバッグします。

デバッグプロセス:

手順

  1. chrome://settings/content/automaticDownloads?search=downloadに移動してauto downloadを無効にします

enter image description here

  1. 開くchrome開発ツール、設定->開発ツール-> Auto-open DevTools for popup

  2. 開くchrome開発ツール、設定->コンソール-> Preserve log upon navigation

enter image description here

お役に立てば幸いです。

1
Alan Dong

私の場合は、Googleドライブからドキュメントをダウンロードして、ダウンロード速度を3Gに制限することで表示できます。

enter image description here

enter image description here

0
Anass Kartit

キャプチャとはどういう意味ですか?プレビュータブや応答タブに何も表示されないことを意味しているのは、応答が実際にダウンロードされるファイルだからです。最近、ネットワークタブでdev-toolsを開いた状態でOracle JDK 11をダウンロードしてみましたが、これは私が得たものです download screenshot

このバージョンの特定の設定はありませんChrome(Versione 71.0.3578.98(Build ufficiale)(a 64 bit)))

@jlvaqueroが言ったように、可能な限り多くの詳細を取得しようとしている場合は、自分のローカルPCでWireSharkを試してください。

0
Kerlos Bekhit

Fiddlerを使用して、ネットワークトラフィックをより詳細に調べることができます。

https://www.telerik.com/fiddler

*私はフィドラーのために働いていません

0
Code Whisperer