「Chromeのデバックツールが素敵すぎる!」

| 0 comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

「Chromeのデバックツールが素敵すぎる!」

WEBのデバックツールの変化にびっくり
Firefox卒業かもしれません
takumaです。
 

【Google Chrome Canary Build】
Chrome Canary Buildとは、Googleが提供しているWebブラウザ「Google Chrome」における、いわゆるナイトリービルドのバージョンである。(by Google Chrome Canary Buildとは 「Google Chrome Canary」 グーグルクロームカナリビルド: – IT用語辞典バイナリ)
 

サイト開発でフロントのコード解析やデバックといえば、
ちょいと数年前は、Firefoxに
「FireMobileSimulator」と「Firebug」をインストールしていましたが…

次世代ツールが登場しましたよ。
正直、感動しました。という事で、google先生の最新ツールのご紹介。

–ツールのダウンロード先—————-
Chrome ブラウザ
—————————————–

そう。みなさんお馴染みのchromeさんのデバックツールです。
しかし、通常版の最新(記事投稿時点でver.36)では、この機能は実装されていません。

上記でご紹介したChrome Canary (ver.38)のインストールが必要です。

●充実したデバイスモード
本記事のメインイメージがそのモードのキャプチャです。
「FireMobileSimulator」の場合、有志の方が作成した端末シミュレーションのデータを
ダウンロードする必要がありますが、本機能はデフォルトで設定がされています。

しかも、google先生が作ったデータなので変なシミュレートデータはないはず。

加えて、衝撃的だったのがドラッグでサイトの表示幅を変更できるところ。
つまるところ、レスポンシブ対応がどうできてるのかが直感的に確認できるわけです。

●ネットワーク環境のシミュレーション
そんでもって、もう一つ衝撃だった機能がこれ。

昨今、画面解像度が上がったり、jsの多様で3G回線環境での表示が
気になる昨今ですが、実機でなくてもこの機能があれば大丈夫!

・offline
・3G(750kbps 100msRTT)
・wifi(30Mbps2ms RTT)
等々、オフラインからwifiまで、これ以外にもシミュレートデータが揃っています。

これ以外のも、様々な(そりゃAndroidデバイス優遇ですが)ツールが盛り込まれています。
サイトの表現もそうですが、デバックツールも日進月歩ですね。

機会があれば、是非触ってみることをオススメします。

コメントを残す

Required fields are marked *.


▲このページトップへ

takumaの「デザインはあれでアートはそれで」