| | 1 | [[PageOutline]] |
| | 2 | |
| | 3 | = Web Inspector リニューアル = |
| | 4 | |
| | 5 | * 原文 [http://webkit.org/blog/197 Web Inspector Updates] by Timothy Hatcher |
| | 6 | |
| | 7 | 最後にWeb Inspectorについて書いてから9ヶ月が経過してお知らせすることがたくさんあります。Nightly buildでWeb Inspectorを使っている方は、既に使っている機能もあるかと思いますが、まだ気づいてない些細な変更点もあるかと思います。 |
| | 8 | |
| | 9 | いくつかの Web Inspectorの改良はWebKitコミュニティーの手によるものです。コミュニティー皆さんに参加していただいて最強のWeb開発ツールを目指していきたいと思います。Web Inspectorの大半は[http://trac.webkit.org/browser/trunk/WebCore/inspector/front-end/ HTML, JavaScript, CSS]によって出来ているので、誰でも変更できます。 |
| | 10 | |
| | 11 | == 刷新されたインタフェース == |
| | 12 | |
| | 13 | 開いていただいてまず目にするのが新インタフェースです。情報はタスクごとにグループ分けされていて、上部ツールバーのアイコンで切り替えます。ツールバー項目の名前（Elements, Resources, Scripts, Profiles, Databases）はそのパネルの中で主に扱うものを示しています。 |
| | 14 | |
| | 15 | [[Image(http://webkit.org/blog-files/inspector-toolbar.png)]] |
| | 16 | |
| | 17 | == コンソール == |
| | 18 | |
| | 19 | コンソールはどのパネルからでもアクセスできます。コンソールはDOMの中身を見たり、JavaScriptのデバッグだったり、HTMLパースエラーの解析だったりと様々な作業に使います。コンソール オン／オフボタンは下部ステータスバーにあります。Escキーでも同じ操作が出来ます。 |
| | 20 | |
| | 21 | エラー／警告の数はステータスバー右端に表示されます。これらをクリックすることでもコンソールを開くことが出来ます。 |
| | 22 | |
| | 23 | [[Image(http://webkit.org/blog-files/inspector-status-bar-with-errors.png)]] |
| | 24 | |
| | 25 | 見た目の変更に加え、自動補完／タブ補完機能が追加されました。コンソールに打ち込み始めると変数名、プロパティ名が自動的に補完されます。候補が複数ある場合はTabキーで次の候補を表示します。右矢印キーで候補を決定します。候補が一つの場合はTabキーで決定になります。 |
| | 26 | |
| | 27 | [[Image(http://webkit.org/blog-files/inspector-console-autocomplete.png)]] |
| | 28 | |
| | 29 | FirebugコマンドラインAPIおよびwindow.console API周りの互換性も大幅に改善されました。この辺りは東京大学学生の服部慶士が夏休みのプロジェクトとして取り組みました。 |
| | 30 | |
| | 31 | == Elementsパネル == |
| | 32 | |
| | 33 | 見た目は前バージョンのDOMビューと変わりないように見えますが、裏では大きく書き直され、すべてを一つのDOMツリーに統合しました。 |
| | 34 | |
| | 35 | [[Image(http://webkit.org/blog-files/inspector-elements-panel.png)]] |
| | 36 | |
| | 37 | * サブdocumentへの対応 - frame/iframeやobjectエレメントを開いて中のdocumentも閲覧可能になりました。 |
| | 38 | * 自動更新 - ページのノードを追加したり削除したりするとDOMツリーにも自動的に反映されます。 |
| | 39 | * クリックによるエレメントのインスペクト - 新しいインスペクトモードを使うとページ内をクリックするだけでDOMツリーで該当箇所が選択されます。この部分はMatt Lilekによって実装されました。 |
| | 40 | * スタイルの一時的無効化 - 編集可能スタイルの上にマウスをおくと各プロパティを一時的に無効化するためのチェックボックスが表示されます。 |
| | 41 | [[Image(http://webkit.org/blog-files/inspector-disabling-properties.png)]] |
| | 42 | * スタイルの編集 - ダブルクリックでスタイルプロパティを編集できます。中身を全部消すことでプロパティを消すことが出来ます。複数プロパティの記述をするとプロパティの追加が出来ます。 |
| | 43 | * 数値のステッピング - スタイルプロパティの数値を編集する場合は上下矢印キーで値を変えることが出来ます。Altを押しながらだと0.1ずつ、Shiftキーを押しながらだと10ずつ変わります。 |
| | 44 | [[Image(http://webkit.org/blog-files/inspector-numeric-style-stepping.gif)]] |
| | 45 | * DOMアトリビュートの編集 - DOMエレメントのattributeをダブルクリックすると編集できます。中身を全部消すとattributeが消えます。 |
| | 46 | * DOMプロパティの編集 - プロパティペーンでDOMプロパティの編集が出来ます。中身を全部消すとプロパティが消えます。 |
| | 47 | * 寸法編集 - メトリックペーンからCSS box model metricの編集が出来ます。 |
| | 48 | * 位置メトリック - メトリックペーンにposition情報が表示されるようになりました。 |
| | 49 | |
| | 50 | == Resourcesパネル == |
| | 51 | |
| | 52 | 前バージョンのネットワークパネルをベースに大きく改良を加えたのがResourcesパネルです。おなじみの美しいタイムラインですが、もっと便利にするためにいろいろと変更しました。 |
| | 53 | |
| | 54 | * サイズグラフ - サイドバーのSizeをクリックするとファイルの大きさ順にグラフが表示されるので重たいファイルが一目で分かります。 |
| | 55 | * 並び順 - Timeグラフでは遅延時間順や経過時間順等の並び順が選択できるようになりました。 |
| | 56 | * 遅延バーTimeグラフの薄い色の部分はリクエストを出してからサーバが初めてリスポンスが到着するまでの期間を表します。 |
| | 57 | * 統合されたリソースビュー - サイドバーのリソースをクリックすると受信したデータ（ページ表示に使われているもの）、リクエストヘッダ、リスポンスヘッダが表示されます。 |
| | 58 | * XHR ーグラフにXMLHttpRequestもいっしょに表示されるようになりました。XHRリソースを選択するとデータやヘッダが確認できます。 |
| | 59 | |
| | 60 | == Scriptsパネル == |
| | 61 | |
| | 62 | 前のスタンドアローン型のJavaScriptデバッガDroseraはWeb Inspector内蔵のデバッガで置き換えられました。この新しいデバッガはDroseraより圧倒的に速く、便利です。 |
| | 63 | |
| | 64 | [[Image(http://webkit.org/blog-files/inspector-scripts-panel.png)]] |
| | 65 | |
| | 66 | TODO: Write Rest |
| | 67 | |
| | 68 | |
