自作システムの個人ブログ

様々な情報について適当に記述しています。
(モバイル向け)サイドバーまで飛ばす

「3DS」の検索結果

投稿: 2017年02月20日 / 更新: 2017年02月20日 / 筆者: イスターリャ / Comment: 0 / タグ: 3DS ブラウザ デバッグ デベロッパーツール

Twitterのフォロワーさんがおもしろいことを呟いていたので、その方法をメモ。
3DSでデベロッパーツールを使えるらしいです。

必要なもの

  • 3DS(Newで確認、2DSは未確認だがFWが一緒なので多分できる)
  • 3DSと同じWi-Fiに繋がったPC
ここまで聞いて無線ルーターが必要なのはすぐに分かるはず。

方法

【1】3DSを起動、ブラウザを起動し、青いバーが出ている間にABXYを押した状態にする。
【2】デベロッパーツールを有効にするか聞いてくるので2回ほどはいかAを押す。
【3】画面の指示に従って、PCからhttp://(3DSのローカルIPアドレス):9222/DeveloperTools.zipをダウンロードする。
※3DSのIPアドレスは画面の指示に表示されます。調べておく必要はありません。
【4】ダウンロードしたzipを解凍し、出てきたindex.htmlをブラウザで開く。
【5】ダイアログが出るので、http://(3DSのローカルIPアドレス):9222と入力する。
【6】デバッグが始まる。

使用後の感想

PCブラウザ側にページのHTMLソースが表示される。これはChromeのデベロッパーツールに近いが、操作がかなり異なるため、同様とは言い難い。
PCブラウザ側でマウスオーバーすると、そのHTML要素の部分が3DSブラウザ側にリアルタイムにオーバーレイ表示される。
コンソールタブがあったのでJavaScriptもデバッグ可能だと思われる。
見た目には面白いし、実機デバッグできるのはもちろんのこと魅力だが、ちょっと操作性が悪すぎる。
例えば、入れ子になっている要素を展開するのにワンクリックではダメ、ダブルクリックが必要、など。
慣れれば素晴らしい3DS向けサイトを実機デバッグしながら作れるようになるだろう(希望)。