YouTubeにバグがあった – ChatGPTを使って調査した

バグ: ここ数日、無視できないバグに気づきました。時々、YouTubeはソフトリロード中にランダムに時間を巻き戻し、視聴途中の動画をリロードすると、停止した時点よりもかなり前にロードされることがありました。これは私を非常にイライラさせたので、できる限り深くこの問題を探求し、Googleにチケットを送り、「あなた方にはこの問題があり、問題はここにあり、修正はこれです。修正して、くだらないものを押し付けるのをやめてください」と伝えることを目標にしました。その結果の調査は、それほど劇的ではないものの、非常に洞察に富むものとなりました。そこで、共有することにしました。 私は少し野心的すぎました。Instagramでも最近似たようなバグを見つけ、ChatGPTにInstagramとYouTubeのスタックに共通点があるか尋ねました。それは無理な試みで、あまり意味がありませんでしたが、私の処分下にある何千人もの博士号を持つ人々の力をもってすれば、トークンをいくつか生成してどうなるか見てみる価値はあると思いました。それはしばらく考え、興味深い推測をいくつか生み出しました...私はそれらをすべて無視することを選び、YouTubeのバグだけに焦点を絞りました。 私はタブを切り替えたり、一時停止したり、解除したり、さまざまなことを試して、時間を巻き戻す動作を再現しようとしました。うまくいきませんでした。これは主にソフトリロード、つまりYouTubeを視聴して一時停止し、しばらくしてからそのタブに戻ったときに発生すると結論付けました。主な問題はソフトリロード自体にあるのではなく、チェックポイントタイムスタンプの復元にあると仮定することにしました。そこで、動画を一時停止し、タブを閉じ、再度開いてみました。すると、まさにその通りでした！動画は一時停止した位置よりかなり前、具体的には20秒前に復元されました。 さらにいじってみました。タブをもう一度閉じ、再度開きました。さらに20秒のずれがありました。 さらに、ブラウザ全体を閉じ、再度開きました。さらに20秒の巻き戻しがありました。 実際、新しいYouTubeのショートカットキーを発見しました。Ctrl+Wでタブを閉じ、Ctrl+Shift+Tで再度開くと20秒巻き戻ります。これを何度か繰り返せば、何かを見逃した場合でも、動画の任意のポイントまで簡単に巻き戻すことができます。 彼らはすべてのショートカットキーを文書化するべきです: 左矢印キーで5秒巻き戻し Hキーで10秒巻き戻し そして今、Ctrl+W、次にCtrl+Shift+Tでなんと20秒巻き戻し！唯一の欠点は、毎回ページをリロードする必要があることです。 また、同じチェックポイントでも、ウェブブラウザでロードするとバグが発生しますが、YouTubeのAndroidアプリを使用すると、毎回正しい時間でロードされることもわかりました。 ブラウザでタブを閉じても、携帯電話でYouTubeの履歴を開けば、中断したまさにその時点から始まりますが、ブラウザで再度開くと、デジャヴュの強い感覚を経験させられます。 （しばらく寝た後、ウェブアプリとAndroidアプリの挙動の違いの原因がわかりましたが、それは最後まで読まないとわかりません。） リバースエンジニアリング: ウェブ開発の世界では、開発者が書いたコードがブラウザで直接実行されるという特権があり、ブラウザという獣は、開発者ツールというセットを提供してくれます。これらのツールを使えば、ウェブを閲覧しているときに見かけるどんなひどいコードでもデバッグできます。通常、私がデバッグすることを選ぶ臭いコードは私自身が書いたものですが、今日は、Googleという小さなインディーズ企業で働く誰かが書いたコードでした。 ⓘ DevToolsについて（ウェブ開発者以外の方へ） Chromeを実行している場合、ウェブページを開いた状態でF12キーを押してください。そのページを動かしているものを深く掘り下げることができます。HTMLのソースやさまざまな要素、それらがページ上のどこにあるか、どのようなCSSスタイルが適用されているかなどを調べることができます。それらの要素を追加したり削除したりすることもできます。私たちのトピックにとって最も重要なのは、実行されているJavaScriptコードを見ることができることです。デバッグしたり、ブレークポイントを設定したり、コールスタックを見たりすることができます。また、これらの開発者ツールでページ上のすべてを直接変更することもできます。これにはJavaScriptをハッキングすることも含まれます。 これは非常に役立ちます。なぜなら、YouTubeはブラウザで実行され、バグがある場合、それらを生成するコードを見ることができるからです（残念ながら、サーバーで実行されるコードはアクセスできません）。主な注意点は、JSコードが難読化されているため、デバッグが面倒だということです。 私は単純な一つの答えが欲しかったのです。チェックポイントのタイムスタンプはどのように推測または計算されるのか？サーバーからそのまま提供されるのか？それともクライアント側で何らかの変更を受けるのか？ 知る必要がありました。なぜなら？Googleの開発者は、最新バージョンのYouTubeにバグを「バイブコード」で入れてくれたので、彼らがそれを解決してくれると信じることができませんでした。（バイブコーディングが適用されたという証明なしに、私は alleged にバイブコーディングされたと言わなければなりません。彼らは非常に奇妙なバグをマニュアルで作成した可能性も十分にあります。）私は、解決策を彼らに説明することで、彼らでさえ、このような複雑な問題を解決するためにLLMをガイドできるはずだと推測しました。 ChatGPTにこの問題の対処法を尋ねました。ページがロードされるときに発生するものをどのように調査しますか？それは、動画のシークが発生するたびにハンドラーをアタッチするTampermonkeyスクリプトを提供してくれました。つまり、動画が別のタイムスタンプにジャンプするたびに、コンソールに便利な「Seek [from -> to]」メッセージを出力します。スクリプトがページリロードでも機能し、YouTubeのチェックポイントジャンプによってトリガーされるのを確認した後、次のステップの準備ができました。動画のシークがトリガーされるたびにスクリプト内にデバッガー行を書き込み、この問題を調査するために必要なすべてであるコールスタックを備えた便利なブレークポイントを得ることができます。 ⓘ Tampermonkeyについて TampermonkeyはChromeの拡張機能です。これにより、ページにJavaScriptを注入して、その動作をハッキングできます。 Tampermonkeyは、ページがどのように実行され、どのコードが実行されているかを理解したい場合にも役立ちます。たとえば、ページ上のどこかで動画のシークがトリガーされた場合、シーク関数をフックして、呼び出されたときのタイムスタンプを出力できます。また、スクリプト内にブレークポイントを設定することもできるため、シーク内でブレークし、コールスタックを検査して、実行パスを確認し、シークタイムスタンプの変数がどのように選択されたかを確認できます。 難読化されたコードスタックを行ったり来たりするのに10分かかり、次に何をすべきかを正確に理解しました。それは、ChatGPTにデバッグを任せることでした。 シンギュラリティに近づいているのは良いことです。なぜなら、私の慈悲深いLLMは、Chromeがデバッグポートを開く機能を提供していることを教えてくれたからです。さらに、OpenCode（ヒップスター向けのClaude Code）にアタッチできる便利なMCPサーバーがあり、私の個人的な博士号にChromeに接続し、あらゆる種類の方法でDevToolsを使用する能力を与え、私のブラウザを侵害する完全なアクセス権を付与します。 つまり、Chromeでボタンを押し、LLMに指示を与えると、ブラウザにコマンドを送信して、デバッグYouTubeを含むあらゆることを実行させることができます。（セキュリティや侵害の懸念について心配する前に、OpenCodeがChromeに接続したいときはいつでも、Chromeが私に許可を求めるポップアップを開くことを知っておくべきです。すべてが合意の上で安全です。） ⓘ MCPとChromeデバッグについて Chrome DevTools Protocol (CDP) は、デバッグモードでブラウザと通信して何が起こっているかを確認するために使用できるAPIです。これにより、ネットワーク上で受信したものを検査したり、ロードされたJSファイルを読み取ったり、ページを表示したり、コードを変更したりするために、Chromeと直接通信するソフトウェアを記述できます。 Chromeで「chrome://inspect/#remote-debugging」を開くと、リモートデバッグを有効にするチェックボックスがあるページが表示されます。それを有効にすると、外部ソフトウェアがChromeに接続して制御できるようになります。これには、AIエージェントが使用するソフトウェアも含まれます。 MCP (Model Context Protocol) は、AIエージェントが外部ツールを使用できるようにする標準プロトコルです。Chrome DevTools MCPは、CDPによってバックアップされた一連のブラウザデバッグツールを提供するローカルサーバーです。OpenCodeをそれを使用するように設定すると、OpenCodeはそのサーバーを開始または接続します。エージェン