--- title: "Firefox Developer Edition がなんか凄い" date: 2014-11-14 categories: - "WEBサービス紹介" - "サイト制作覚書" url: "https://hidetaka.dev/ja/blog/firefox-developer-edition" --- Firefoxから開発者向けのブラウザがリリースされました。 [Firefox Developer Edition — Mozilla](https://www.mozilla.org/ja/firefox/developer/). 紹介動画もYouTubeにあったので、こちらもどうぞ。 \[youtube=https://www.youtube.com/watch?v=Fg3gyzAkTd0\] ## インストールしてみました [![起動画面](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/91635463bcb9f1fbf82cc511de52bc73.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/91635463bcb9f1fbf82cc511de52bc73.jpg) かなり黒系のデザインになっていて、ここからすでに開発向けっぽい雰囲気です。 初回起動時にはブラウザの機能について紹介するツアーが実施されますので、どうやって使うのかが把握しやすいかなと思います。 ## 開発系ツールがめっちゃ多い [![コンソールめっちゃ多い](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/ab63a8182b4c7164d6904ba692cf7573.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/ab63a8182b4c7164d6904ba692cf7573.jpg) とりあえずツールを色々と試してみようかと思ったのですが、デフォルトで入っているツールがかなり豊富です。 「その他のツールを入手」から更に追加することもできそうな気配。 [![コンソール画面](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/eb56c1d219934344900c964ad04b1790.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/eb56c1d219934344900c964ad04b1790.jpg) コンソール部分は基本的にfirefoxのものと変わりなさそうです。 [![レスポンシブモード](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/be2acd48f7433e262cb2959616cb7eef.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/be2acd48f7433e262cb2959616cb7eef.jpg) レスポンシブモードも健在。 ### WebIDEまで使える [![WebIDE付き](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/3fb73adddba686207be567df91db0795.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/3fb73adddba686207be567df91db0795.jpg) firefoxOSを意識しているのでしょうか。WebIDEも使えました。 [![シュミレーター](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/5db4de5e935406957512c287020a80c4.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/5db4de5e935406957512c287020a80c4.jpg) USB接続でシュミレーターを起動させることやシュミレータをインストールして利用することもできそうです。 [![追加コンポーネント](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/8b9b37e42a3f165173b0c462cfb3091f.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/8b9b37e42a3f165173b0c462cfb3091f.jpg) コンポーネントのインストールも可能でした。 [![FFOS2](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/599241c6c8802a5945fb85ee5723c948.jpg?&d=1140)](https://wp-kyoto.cdn.rabify.me/wp-content/uploads/2014/11/599241c6c8802a5945fb85ee5723c948.jpg) firefoxOSでシュミレートさせてみました。 ## USB接続でデバッグ 端末をUSBに接続してデバッグできるようなので、設定方法をちょっと調べてみました。 ### Android版Chromeのデバッグ Chrome37.0以上のバージョンで使えます。 端末でUSBデバッグと開発者モードを有効にする必要があるとのことです。 詳細は→[Android Developersのドキュメントをご覧ください（英語）](https://developer.android.com/tools/device.html) ### iOS Safariのデバッグ iOS7が現状対応、iOS8は現在テスト中とのことです。 MacとLinuxで使っている時のみ利用可能で、Macなら端末を接続するだけでWEBIDEから使える・・・らしい（要検証） [Firefox ツールアダプタ – 開発ツール | MDN : https://developer.mozilla.org/ja/docs/Tools/Firefox\_Tools\_Adapter](https://developer.mozilla.org/ja/docs/Tools/Firefox_Tools_Adapter) 色々と試してみて、また気になる点などがあれば紹介したいと思います。