強火で進め

このブログではプログラム関連の記事を中心に書いてます。

デベロッパーツールのティップス・アンド・トリックス

GDD2011

Google Developer Day 2011に参加しました。

参加したセッションのメモを書いときます。

デベロッパーツールのティップス・アンド・トリックス(Eiji Kitamura) @agektmr

東京 - Google Developer Day 2011
http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1005.html

難読化されたJavaScriptファイルを読み易い形に整形する

【使い方】
JavaScriptファイルを開いた状態で「{}」のアイコンをクリックする。

するとこの様に整形される。

流石に短縮化された変数名の復元はされないがブレークポイントが置ける様になるのが大きい。

Chrome Developer ToolsはHTMLで作られている
  • その為、「Dev Toolsを外部ウィンドウ化→Dev Toolsをもう一つ立ち上げる」とするDev ToolsでDev Toolsをいじれる
Dev ToolsのConsoleの話
  • FirebugのCoomand Line APIがほぼ全て使える

Command Line API - FirebugWiki
http://getfirebug.com/wiki/index.php/Command_Line_API

※【筆者注】日本語の解説記事の場合はこちらなどが簡潔に書かれて分り易いです。

FireBugのCommand Line API
http://7go.biz/moba3/archives/2007/0322184937.html

  • 基本的なものはdir() clear() inspect() $0 copy()

【dir()】
Console で document.body と入力した時にはDOMツリーとして結果が出力されますが dir(document.body) とdir()を使うとJavaObjectとして値が返される

【clear()】
Console画面のクリア。

【inspect()】
引数に指定したものをElementタブにて選択。 inspect(document.body) を実行するとbodyタグが選択された状態でElementタブに切り替わる。

【$0】
Elementタブにて選択したものがこの変数に入っている。 inspect() と逆の動作。

【copy()】
引数の値をクリップボードに保存。

イベントをトリガーにブレークさせる
  • Developer Advocates(http://code.google.com/intl/ja/team/)
  • このサイトではselect a productのドロップダウンを変更すると表示される人物が切り替わる
  • この様な場合、この動作はどこで行なっているかをブレークポイントを置いて確認する手順を解説
  • Elementタブにて人物の情報を記述する部分はtrタグのブロックだと確認
  • trタグを選択した状態で右クリック。その中から「Break on Subtree Modifications」を選択
  • するとドロップダウンを変更するとブレークポイントにて止まる
  • ステップ実行にて書き換えを行なっている部分を特定
リモートデバッグが可能

引数に以下を指定して実行。以下の例の場合はport番号の指定は1337

--remote-debugging-port=1337

例) Chromeをデバッグ引数を付けて起動し、Safariで確認する
1. Chromeに --remote-debugging-port=1337 を付けて起動
2. Chromeで http://www.google.co.jp を開く
3. Safariを起動し、 http://localhost:1337 を開く
4. 以下の様に表示されるのでクリックする

5. すると Safariに Dev Toolsが表示される

ショートカット一覧の表示
  • Elementsタブを選択している状態で ? を入力するとショートカット一覧が表示される


Settingsが意外と便利
  • 画面の右下に有るギアのアイコン「Settings」(設定)に意外と便利な機能が有る

  • Networkの「Disable cache」をチェックしておくとデータがキャッシュされなくなるので開発中に使うと便利


Devチャンネル版で可能

※これはまだDeveloperチャンネル版のChromeでしか使えない機能です

  • Dev ToolsでJavaScriptを編集可能
  • 鉛筆のアイコンをクリックするかソースコードをダブルクリックで編集開始

  • 編集したものは履歴が残る(編集後、もう一度鉛筆のアイコンをクリックすると履歴が保存される)
  • 履歴はResourceタブで確認可能


  • ここでJavaScriptを選択して右クリックメニューから「Revert to this revision」を実行すると過去のバージョンに戻せる
  • 同じく、「Save As」で保存するとDev Tools上で編集した内容が実際のファイルに保存される

関連情報

「Google Chrome Deveoper Tools」はこう使う！　基本機能チュートリアル & GDD 2011 セッション概要（1/3）：CodeZine
http://codezine.jp/article/detail/6261