◆ window.open とか target="_blank" とか別タブで開いてると見えない
◆ 別タブは devtools のウィンドウも別だから当たり前なんだけどダウンロードだと同じタブも別タブ も動作に大差ないから気づきにくい

devtools の Network タブでそのページ自身やそのページで読み込むリソースごとに通信関係の情報を見れます
HTTP のリクエスト/レスポンスのヘッダーやクッキー またタイムラインで TTFB (最初のバイトを受け取るまでの時間) やダウンロードにかかった時間などが見れます

zip ファイルのページを開いたときなどでファイルがダウンロードされるときのレスポンスヘッダーやタイムラインを見たかったのですが devtools を起動して置いて URL を入力したり 現ページにリンクを作ってクリックしてもダウンロードされる場合は Network タブのアイテムに表示されません

幾つかのページを見ていると表示されることもありました
原因が気になるので調べてみると target="_blank" など別タブで開こうとしていたことが原因でした
即ダウンロードされるので同じタブでも別タブでも見た目の動きは一緒なので気づかなかったのですが 意外と単純なものでした

ブログ書いてると答えがみつかる

よく思うのですがブログにまとめてると正しい答えがみつかります

ブログに書き始める前は フォームで POST してるときはうまく動いていたので フォームで POST すると例外で Network リストに載るんだ と思ってました
POST すると http のリクエストヘッダーがあるので POST したらリストに載せるのもなんとなく納得できてましたし

なので ↓みたいなコードまで準備してました

<form action="http://var.blog.jp/r/blank.zip" method="POST"><button>download</button></form>
document.body.innerHTML = `<form action="http://var.blog.jp/r/blank.zip" method="POST"><button>download</button></form>`


そして書ききって fetch でもいけるんじゃないの? って思って追記を終えて 最終確認のブログのプレビュー機能で確認してると

「target="_blank" をいつもどおりつけたけどこれはずしたら動いたりしない?」 と閃いてやってみると無事リストに表示されました


とりあえず a タグなら target 属性を devtools を外してクリック
button で JavaScript の処理を色々した上で window.open みたいな複雑なことになってるようなら ↓ みたいに単純に目的の URL へリンクする a タグを作ってクリック するのがよさそう
document.body.innerHTML = `<a href="http://var.blog.jp/r/blank.zip">download</a>`