本記事は JavaScript Advent Calendar 2023 の4日目の記事だ。

3日目は @feo52 氏の 最初のレンダリング直前に起動するpagerevealイベント #JavaScript だった。
Window インターフェース に最初のレンダリング直前に呼ばれる pagereveal イベントを追加する提案の実装を Chrome で試してみる内容だ。これは確かに便利そうなイベントに感じる。
令和の IE こと Safari の存在のせいでなかなか Web 標準に組み込まれる敷居が高いものの、是非ワーキンググループでの議論が進んでいただきたいモノだ。
ところで、こういうのって CSS のワーキンググループでドラフトに載ったりするのね。詳しい流れはよく知らんけども。

いにしえの自分の回答がわかりにくい

さて、ブラウザが裏で呼んでいる API の内容をファイルに書き出したかったのだけれども、ファイルサイズが大きいからか開発者ツール経由ではうまく保存できなかった。
そこで、ブラウザ操作中の通信の内容をローカルファイルに自動で保存する方法がなにか無いかな～と探していたら、偶然にも以前に自分自身がスタック・オーバーフローで回答した puppeteer を使った方法についての内容がヒットしてしまった。

スタック・オーバーフロー

ブラウザで開いてるページの ajax 通信の内容を自動でローカルファイルに残したい

https://ja.stackoverflow.com/a/78275

ウェブアプリの ajax 通信の内容を自動でローカルファイル等にダンプしたいですtcpdump で特定のドメインIPがソースのパケットをファイルにダンプすればできなくはなさそうですがHTTP ヘッダとかを分離しないといけないので大変ですchrome の開発ツールでネットワーク > XHR > Name が特定のエ&...

すっかり忘れていたのだが、今見返すとちょっとこのままだと使いづらそうなので、もうちょい使いやすくまとめてみる。

基本的には以前に書いた以下の記事と同じ考え方で、 Chrome DevTools Protocol の Fetch Domain を直叩きして、特定の通信の内容を横取りしてローカルに保存している。

Aqua Ware つぶやきブログ

2021.06.25

puppeteer でファイルをダウンロードするときに、任意のパスと名前を指定して保存する

https://aquasoftware.net/blog/?p=1583

Puppeteer を使ってファイルをダウンロードする際に、任意のパスと名前で保存したい。残念ながら、 現時点ではシンプルな方法は提供されていないようだ。以下の Issue で何年にもわたって議論されているものの、 「コレ!」 という解決方法は無さそう。Question: How do I get puppeteer to download a file? · Issue #299 · puppeteer/puppeteerしかし、 この Issue の #issuecomment-668087154 のコメントで、 なかなか泥臭い方法で実現するヒントが書かれていた。これを参考にして、任意のパスと名前でダウンロードファイルを保存し...

実際のコード

続きを読む →