その他

Windowsにおいて、DevTools(検証ツール)でNetworkタブのPreviewタブを見ると正常に表示されない件

この記事は約3分で読めます。

はじめに

最近私は業務ではWindowsを使用して開発しています。

そこで、ajaxリクエストのレスポンスを確認しようとChromeの検証ツールを使用していると

「おや?なんかおかしい…?」

と思ったので共有です。

上記の挙動をググったのですが該当する記事が出てこなかったため、2024/03/22時点での挙動を記録として残しておき、同様の挙動をする方の助けになれば幸いです。

概要

まず、事象が発生した業務端末のスクショです。

次に、Chromeのバージョンです。

(補足)
OSはWindows 10 Pro、Chromeバージョンは最新。

上記のように、Previewで確認すると本来はタグなどを読み取ってプレビューとして表示してくれるはずが文字情報のみで表示されています。
このとき、var_dumpなどで仕込んだワーニングやエラーメッセージなどもプレビューとして整形されず、すべて文字として表示されてしまうため非常に見にくくなってしまう現象にも見舞われました。

別の端末でも再現するかどうか確認。

開発端末に入れているchromeの拡張は問題ないかどうか確認したがそれも大丈夫そう(ほぼ何もいれていないので)でした。
PCの再起動なども試しましたが改善せず。

では、自宅にある別のWindows PCでも同様の事象が発生するかどうか確認してみました。

(補足)
OSはWindows 11 Pro、Chromeバージョンは最新。

…。

同様の事象となってしまいました。。

こうなってしまうとやっぱりChromeのバグの可能性があるかと。

ちなみに、数日前にChromeはアップデートが配布されていました。
https://chromereleases.googleblog.com/2024/03/stable-channel-update-for-desktop_19.html

数日前までは正常に動作していたので、このあたりの更新が原因…?

(参考)
Macでは正常に動作するため、そのスクショも添付しておきます。

期待した動作は上記のような表示

結論

Chromeのアップデートを待つしかないと、私は結論付けています。

ただ、記事にされている方が少ないので次回のアップデートで改善するかどうかはあまり見込めないかも…とも感じています。

同様の症状にお困りの方がいらっしゃいましたら参考になれば幸いです。

(補足)
画像は添付していないですが、他にもElementsタブを開くといままでの見た目もフォントにもなっていない(デフォルトのフォントでしょうか)ような現象もありました。
こちらもつい先日までは問題なかったので、今回のアップデートが原因の可能性もあるかもしれないですね。

2024/03/27追記

本日(2024/03/27)朝Chromeを確認すると更新パッチが配布されていました。

更新すると表示は元に戻りました。