Chrome Devtools のエイプリルフールイースターエッグ【ネタバレ注意】
◆ Chrome 123 でイースターエッグが DevTools に隠しで追加されたみたい
◆ 探してみた
◆ ネタバレ注意
◆ 探してみた
◆ ネタバレ注意
Chrome 123 にアップデートして devtools を見ていたとき What's new に気になるものがありました
https://developer.chrome.com/blog/new-in-devtools-123?hl=ja#css-length
エイプリルフールのお祝いで DevTools の中にイースターエッグを隠したようです
カラフルな 💫 を探せば良いそうです
日付が UTC の 4/1 ~ 4/2 の期間に Performance タブで計測した結果のグラフがあれば💫が表示されます
ツールバー(記録したりクリアしたりのボタンがあるメニュー)の右端に目立つ形で表示されるのでわかりやすいです
ブロックになるのが処理時間を表すグラフのブロックなので それが無い場合には表示されません
大きさは表示する期間で調整できるので難易度も変えられます
全面にしたりもできます
クリアすると alert が出るだけ
fixme とタイプすると開始できることを教えてくれました
タイムラインにフォーカスをあてて fixme と打てば始まります
入力するテキストボックスみたいなのはないです
あんまり時間をかける気もなかったので ソースコードを見ることにしました
DevTools の DevTools を開いて Ctrl-Shift-F で DevTools のソースコードを検索します
すると 💫 は簡単に見つかったのでどこかを推測します
ファイル名から timeline のパネルであることはわかりました
ただ パネル名に timeline というのがないのですよね
minify されているコードなので分かりづらいですが 周辺の文字列を見てるとプロファイル系のようで Performance タブが怪しいです
ですが Performance タブを見るだけだと何も出てないのでもう少しコードを追うと Date を使って現時刻が 4/1 と 4/2 である場合に表示するようになってました
そこは Windows 側の日時設定を変更して 4/1 に調整しました
UTC で見てたので日本時間だと 4/1 の 9 時以降である必要があります
あとは Performance タブなので計測してみると💫が出てきました
出るときと出ないときがあって 色々いじってた感じではブロックになるものが表示されてないとボタンが出ないようです
計測開始後すぐに停止して何も処理が入ってないとかだと出せません
ただ Sandbox の中って設定を変えられるものの 変えても一瞬で元の時間に補正されるのですよね
自動的に調整するの設定は OFF にしてるのですけど
ぐぐると Sandbox だと Hyper-V の時刻同期のサービスが起動してるのでこれを止めないとダメのようでした
タスクマネージャーのサービスタブで vmictimesync というのを見つけて停止します
止めたら補正されなくなるのであとは普通に時刻調整するだけです
https://developer.chrome.com/blog/new-in-devtools-123?hl=ja#css-length
Find the Easter egg
To celebrate this year's April Fools' Day, the DevTools team has hidden an Easter egg somewhere in DevTools.
To find it, look for a colorful 💫 emoji.
エイプリルフールのお祝いで DevTools の中にイースターエッグを隠したようです
カラフルな 💫 を探せば良いそうです
ネタバレ注意
ここからネタバレ注意ですイースターエッグ
イースターエッグの中身ですが ブロック崩しでした日付が UTC の 4/1 ~ 4/2 の期間に Performance タブで計測した結果のグラフがあれば💫が表示されます
ツールバー(記録したりクリアしたりのボタンがあるメニュー)の右端に目立つ形で表示されるのでわかりやすいです
ブロックになるのが処理時間を表すグラフのブロックなので それが無い場合には表示されません
大きさは表示する期間で調整できるので難易度も変えられます
全面にしたりもできます
クリアすると alert が出るだけ
fixme とタイプすると開始できることを教えてくれました
タイムラインにフォーカスをあてて fixme と打てば始まります
入力するテキストボックスみたいなのはないです
見つけ方
最初は自力で色々と画面を見てたのですがみつからなかったですあんまり時間をかける気もなかったので ソースコードを見ることにしました
DevTools の DevTools を開いて Ctrl-Shift-F で DevTools のソースコードを検索します
すると 💫 は簡単に見つかったのでどこかを推測します
ファイル名から timeline のパネルであることはわかりました
ただ パネル名に timeline というのがないのですよね
minify されているコードなので分かりづらいですが 周辺の文字列を見てるとプロファイル系のようで Performance タブが怪しいです
ですが Performance タブを見るだけだと何も出てないのでもう少しコードを追うと Date を使って現時刻が 4/1 と 4/2 である場合に表示するようになってました
そこは Windows 側の日時設定を変更して 4/1 に調整しました
UTC で見てたので日本時間だと 4/1 の 9 時以降である必要があります
あとは Performance タブなので計測してみると💫が出てきました
出るときと出ないときがあって 色々いじってた感じではブロックになるものが表示されてないとボタンが出ないようです
計測開始後すぐに停止して何も処理が入ってないとかだと出せません
時間調整
日時を無理やり変えるとおかしくなるところが多そうなので Windows Sandbox で試しましたただ Sandbox の中って設定を変えられるものの 変えても一瞬で元の時間に補正されるのですよね
自動的に調整するの設定は OFF にしてるのですけど
ぐぐると Sandbox だと Hyper-V の時刻同期のサービスが起動してるのでこれを止めないとダメのようでした
タスクマネージャーのサービスタブで vmictimesync というのを見つけて停止します
止めたら補正されなくなるのであとは普通に時刻調整するだけです