【SUUMO】サイトで「デベロッパーツール」を使うと【スーモ】に出会えちゃう？！

みなさんこんにちは！おさかなです！

今回は「【SUUMO】サイトで「デベロッパーツール」を使うと【スーモ】に出会えちゃう？！」について、書いていこうと思います！

それでは、レッツゴー！！！！！

デベロッパーツールに隠されたスーモ？！

https://osakanav.com/background-live

デベロッパーツールとは？

「デベロッパーツール」とは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。

WiLL Cloudより引用

↓デベロッパーツールの使い方を学びたい方はこちら

https://dotinstall.com/lessons/basic_chrome_dev_v2

今回はこれを使って、ちょっと面白い仕掛けのあるサイトを見ていきたいと思います！(おー！)

https://suumo.jp/sp/

https://osakanav.com/coding-cat

実際につかってみよう！

それでは早速SUUMOのサイトにアクセスします！

「PC版を表示する」という風に出てきますが、ボタンは押さずに「スマホ版」のままでOKです！

ここでキーボードの「F12」キーを入力しましょう！(えいやあっ！)

すると…？
このように「デベロッパーツール」が起動します。

次にデベロッパーツールのタブを「Console」に切り替えましょう！(ポチッと！)

すると…？
何やらドット絵のスーモくんが現れました！(わああ！)

(何これかわいい！！！)

コードはこんな感じになっているみたいです！
(時々こういう仕掛けのあるサイトありますよね〜！開発者の遊び心を感じます✨)

他のキャラクターも隠れていたら、もっと面白そうですね！(うんうん！)
↓スーモのキャラクター一覧

https://suumo.jp/edit/suumo-heya/character/

最後にコードコピーして、スーモくん増やしました！(何してんねん…笑)

これで全ての操作は完了です。(やった～！)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました！

https://osakanav.com/beginners-sqli-stage1