開発(デベロッパー)ツールにちょっとメモ。

今日はサイト制作に必須ツール、
開発(デベロッパー)ツール)について書いておこうと思います。

僕は普段、WEB制作関連の仕事をしています。
(…といってもガチでサイト制作をしているわけではないです)

制作している人なら開発ツールはよく使う、
といいますか…ないと仕事ができないぐらいヘビーユーズしていますよね?

ちなみに僕の場合、サイト制作教えてもらった、
「Firebug」という「Firefox」のアドオンを利用してきました。

firebug

このゴキブリのようなアイコン、
愛着すら感じつつあるアドオンです(笑)

当然、使い慣れているので今でも使っていますが、
昨今であれば「スマホ対応サイト」を作ることが多くなってきました。

そうなると…この「Fire Bug」だと、
スマホ用のエミュレーター機能がない(たぶん)ため、
別途エミュレーターを使う必要がありました、、

例えばよく使っていたのがブックマークレットタイプの「Resizer」などですね。

しかし!

これがブラウザに実装されている開発ツールを使えば、
スマホ用のエミュレーターがあることを知りました^^;

…で、この開発ツール、
「Windows」の場合ですが、
「Ctrl+Shift+i」で立ち上げることができます。

それとエミュレーターですが、
「レスポンシブデザインモード」をクリックで起動します。

↓画像の赤丸部分ですね^^
dv_tool_firefox

こんな表示で表示されます。
でも難点が一つ…

「解像度」を変更してエミュレートできますが、
「デバイス」を指定することができないんです。

この点、「Resizer」のほうが、
「iPhone」などの表示を指定できますので、
機能性は上だと思います。

ちなみにブラウザ実装の開発ツールなら、
「クローム」のほうがはるかに使えると思います…

解像度ベースだけでなく、
デバイスごとの表示が選択できます。

dv_tool_chrome

はい、見ての通り、
実際のスマホでの表示に近いな、と実感しました。

「クローム」の場合、他にも便利なプラグインもあったりするので、
これはいよいよ…ブラウザを乗り換えなければならないかも…
と実感している今日この頃です^^;

結論…あまり使えない、、
ブラウザ実装の開発ツール、
「うわ!めちゃくちゃ使えるんじゃない?!」
なんて思っていたのでちょっと残念でした、、

ただ「Firebug」よりも起動は早いですし、
インターフェイス的にも見やすい、挙動も安定しているので、
ケースバイケースで使ってみようと思っています^^

それか…「Chrome」に乗り換えるか、、ですね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です