Changes between Initial Version and Version 1 of Web Inspector Update.ja


Ignore:
Timestamp:
Nov 3, 2009 6:18:26 PM (14 years ago)
Author:
casey.hattori@gmail.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Web Inspector Update.ja

    v1 v1  
     1= Web Inspector アップデート =
     2
     3 * 原文 [http://webkit.org/blog/829 Web Inspector Updates] by Joseph Pecoraro
     4
     5[[PageOutline]]
     6
     7[wiki:"Web Inspector Redesign.ja" 前回]、Web Inspectorについて話してから、また山のように新機能が追加されました。今日はその一部を紹介していきます。
     8
     9これから紹介する機能を使うには最新のWebKit Nightlyを使用している必要があります。[http://nightly.webkit.org/ ダウンロード]したら「環境設定」の「詳細」タブにある「メニューに"開発"メニューを表示」にチェックマークを入れて準備完了です。
     10
     11[[Image(http://webkit.org/blog-files/inspector/enable.png)]]
     12
     13== エレメントのattributeやスタイルプロパティの編集 ==
     14
     15エレメントのattributeやスタイルプロパティの編集がこれまで以上に快適に行えるようになりました。編集中にTabキーを使って前後の項目に移動したり、新しい項目を追加したりできます。
     16
     17また、エレメントツリーのノード上でマウスを一瞬止めると新規attributeを追加するためのテンプレートが表示されます。
     18
     19[[Image(http://webkit.org/blog-files/inspector/edit_attributes.png)]]
     20
     21関連バグレポート: Add Element Attributes, Tabbing, and Improved UI.
     22
     23== CSSルール／セレクタの編集／作成 ==
     24
     25Web Inspectorの目玉新機能の一つがCSSルールやセレクタの編集／作成です。簡単に新しいアイデアを試してみたり、既存のデザインを変更したり出来るので、Web開発者にもWebデザイナーにもつかっていただけるかと思います。
     26
     27セレクタの編集を始めるには、まずスタイルサイドバーの新しい歯車メニューから「New Style Rule」を選択します。新しく作成されるルールは、エレメントツリーの選択しているノードから自動的にセレクタを自動予測してあります。ダブルクリックすることでセレクタを編集できます。繰り返しになりますが、Tabキーでセレクタやプロパティーの間を行き来することが出来ます。
     28
     29編集後のセレクタが選択ノードを含まない場合は色が変わるので、ミスに気づくことが出来ます。
     30
     31[[Image(http://webkit.org/blog-files/inspector/css_selectors.png)]]
     32
     33さらに、選択ノードのstyle attributeのセクションが必ず表示されるようになりました。選択ノードだけを変更したい場合は、ここを編集するだけでいいのですぐ出来ます。CSSの優先順位で並ぶのでこのセクションはいつも一番上に表示されます（わずかな例外をのぞいて）。
     34
     35関連バグレポート: Selectors Support and Move to Gear Menu.
     36
     37== CSSカラー表記 ==
     38
     39最も要望の多かった機能の一つが種々のカラー表記への対応です。今回はhex、rgb、hsl、ニックネーム、rgba、hsla、すべての表記に対応しました！例えば白なら：#FFF, #FFFFFF, rgb(255, 255, 255), hsl(0, 100%, 100%), white
     40
     41前出のスタイルペーン歯車メニューよりお好みの表記を選ぶことが出来ます。様々な表記で見てみたいような場合は、カラースウォッチの部分（色が表示されている正方形）をクリックすると表記が次々に変わります。
     42
     43[[Image(http://webkit.org/blog-files/inspector/colors.png)]]
     44
     45関連バグレポート: Color Representations, Preference and Gear Menu, and UI Improvement.
     46
     47== DOM Storage ==
     48
     49新しいストレージパネル（旧データベースパネル）ではHTML5で追加されたDOM Storage、localStorageとsessionStorageに対応しました。DOM Storageは自動的に更新されるので手でボタンを押す必要はありません。
     50
     51この画面の操作方法も他と同様です。ダブルクリックで編集。余白をダブルクリックで項目の追加。Tabキーももちろん使えます。
     52
     53[[Image(http://webkit.org/blog-files/inspector/dom_storage.png)]]
     54
     55関連バグレポート: DOM Storage Support, Live Updates, Create New Items, and Tabbing.
     56
     57== ショートカットキー ==
     58
     59ショートカットキーはデベロッパの生命線です。ショートカットキーの一覧を[http://trac.webkit.org/wiki/Web%20Inspector#ShortcutKeys こちら]に用意しました。新しいショートカットをいくつか紹介します。
     60
     61 * パネルをスイッチ - Macのは⌘[と⌘]、その他は⌃[と⌃]
     62 * 選択したノードを削除 - ⌦または⌫
     63 * ノードのクイック編集 - ⏎キーで選択ノードを編集できます。テキストノードの場合は内容の編集、エレメントノードの場合はattributeの編集が始まります。
     64
     65スクリプトデバッガにもおなじみのショートカットキーが追加されました。
     66
     67 * Continue – F8 or Command-/ on Mac or Control-/ on other platforms.
     68 * Step Over – F10 or Command-’ on Mac or Control-’ on other platforms.
     69 * Step Into – F11 or Command-; on Mac or Control-; on other platforms.
     70 * Step Out – Shift-F11 or Shift-Command-; on Mac or Shift-Control-; on other platforms.
     71 * Next Call Frame – Control-. on all platforms.
     72 * Previous Call Frame – Control-, on all platforms.
     73 * Evaluate Selection When on a Breakpoint – Shift-Command-E on Mac or Shift-Control-E on other platforms
     74
     75関連バグレポート: Switch Panels, Delete Node, Quick Edit, General Debugger Shortcuts and Evaluate Selection.
     76
     77== クッキー ==
     78
     79Storageパネルからクッキーが見れるようになりました。対応プラットホームでは検証中のページがアクセスするすべてのドメインのクッキーを見ることが出来ます。name, value, path, expiration date, http only flag, secure (https) flagすべて見ることが出来ます。クッキーの削除も出来ます。
     80
     81非対応プラットホームではJavaScriptでアクセス可能な範囲で表示されます。
     82
     83[[Image(http://webkit.org/blog-files/inspector/cookies.png)]]
     84
     85関連バグレポート: Initial Support, Hidden Data 1 and 2, Cookies for Sub-Resources, and UI Improvements
     86
     87== イベントリスナー ==
     88
     89サイドバーに新しいイベントリスナーペーンが追加されました。選択ノードに追加されているイベントリスナーを確認することが出来ます。イベントリスナーはキャプチャー／バブリングフェーズにたどる順で表示されています。
     90
     91type別に表示されるので、もし同じノードに"onclick"と"onmouseover"両方のリスナーがある場合は別々のセクションに表示されます。イベントフロー丸ごと表示するか、選択されたノードのみ表示するか、歯車メニューからフィルタの設定が変えられます。
     92
     93[[Image(http://webkit.org/blog-files/inspector/event_listeners.png)]]
     94
     95この部分のUIにはまだまだ改善の余地があるので、アイデアやコメントをこのバグレポートにつけていただけるとありがたいです。
     96
     97関連バグレポート: Event Listeners.
     98
     99== 構文カラーリング ==
     100
     101構文カラーリングをすると可読性があがるのでデバッギングが楽になります。Web Inspectorでは新しくJSONとCSSの構文カラーリングを追加しました。
     102
     103[[Image(http://webkit.org/blog-files/inspector/css_syntax_highlight.png)]]
     104
     105CSSの構文カラーリングは複雑な@ルール（@import, @media, @font-face, @variable）にまで対応しています。リソースパネル以外にもエレメントツリーのインラインstyle、scriptタグも構文カラーリングが施されるようになりました。
     106
     107[[Image(http://webkit.org/blog-files/inspector/inline_highlight.png)]]
     108
     109関連バグレポート: JSON Highlighting, CSS Highlighting, and Inline Highlighting.
     110
     111== ブレークポイントとWatch Expression ==
     112
     113スクリプトデバッガの進化は止まりません。新ブレークポイントペーンには全スクリプト中のブレークポイントが一覧表示されるので、探すことなく目的の場所に飛ぶことが出来ます。チェックボックスを使って有効／無効の切り替えも簡単です。最後にブレークポイントの削除が可能になりました。ブレークポイントを示す青い矢印をクリックすると有効、無効、削除の順でサイクルするようになっています。
     114
     115スクリプトデバッガの目玉機能が条件付きブレークポイントです。ブレクポイントをセットしたら青い矢印の部分を右クリックしてください。吹き出しが表示されるので条件のJavaScriptを入力します。入力した内容がtrueの時のみブレークします。
     116
     117[[Image(http://webkit.org/blog-files/inspector/breakpoints.png)]]
     118
     119もう一つの新機能はWatch Expressionです。新しいサイドバーペーンからJavaScript表現を追加すると結果が表示されます。デバッガが停止するたびに結果が更新されます。このリストは保存されるので安心してページの再読み込みをしてください。
     120
     121[[Image(http://webkit.org/blog-files/inspector/watched_expression.png)]]
     122
     123== AJAXのデバッグ ==
     124
     125AJAXを扱うデベロッパに重要なのがXMLHttpRequestのパラメータやペイロードを見る機能です。
     126
     127個々のリソースビューにForm DataとQuery Stringパラメーターのセクションが追加されました。
     128
     129またHTTP Informationセクションではリクエストメソッド（GET, POST, etc.）とステータスコード（200, 400, etc.）が表示されます。URL横のマークは一目でステータスがわかるようになっています。（緑：成功、橙：リダイレクト、赤：エラー）
     130
     131[[Image(http://webkit.org/blog-files/inspector/form_data.png)]]
     132
     133関連バグレポート: HTTP Status Code and Data, Parameters, and Payload
     134
     135== リソースとコンソールのスコープバー ==
     136
     137リソースやコンソールにおなじみのスコープバーが追加されました。リソースパネルのリソースを種類別に見ることが出来るのでとても便利です。
     138
     139[[Image(http://webkit.org/blog-files/inspector/scope_bar.png)]]
     140
     141関連バグレポート: Resources Scope Bar and Console Scope Bars.
     142
     143== リソースタイムライン ==
     144
     145DOMContentおよびLoadイベントが発生するタイミングが表示されるようになりました。ロード時間を短縮の為におおいに参考になるかと思います。
     146
     147
     148
     149[[Image(http://webkit.org/blog-files/inspector/load_lines.png)]]
     150
     151関連バグレポート: Show Load Lines
     152
     153== リソースにアクセス ==
     154
     155リソースにアクセスするのを簡単にするための機能がいくつか追加されました。これまでだとURLをコピペする必要がありましたが、サイドバーのリソースをダブルクリックするだけでそれを新しいウィンドウに開くようになりました。ドラッグ&ドロップも出来るようになりました。これはHTML5のドラッグ&ドロップイベントを使って実装されています。
     156
     157関連バグレポート: Open Resource Directly and Drag and Drop.
     158
     159== コンソールの改善 ==
     160
     161オブジェクトのプロパティの並び順が改善されました。alphanumericソーティングを使うようにしたので10個以上の要素がある配列がずっと見やすくなりました。
     162
     163[[Image(http://webkit.org/blog-files/inspector/inorder.png)]]
     164
     165ノードリストも見やすいように配列同様の表示になりました。
     166
     167[[Image(http://webkit.org/blog-files/inspector/nodelist.png)]]
     168
     169関連バグレポート: Sorting and NodeLists.
     170
     171== FirebugコマンドラインAPI ==
     172
     173FirebugコマンドラインAPIがいくつか追加されました。inspect()関数はオブジェクトを渡すとエレメント、データベース、DOM Storage等最適なパネルで表示します。また非常に便利なのが$0-$4の変数。エレメントツリーで選択したノード、過去５個分が入っています。あとmonitorEvents/unmonitorEventsなんかも使えるようになりました。
     174
     175FirebugコマンドラインAPIはWeb Inspectorのコンソールで使用可能です。これらがコンソールの自動補完の候補に表示されるのも新機能です。
     176
     177関連バグレポート: $# Variables, inspect() Function, and Autocompletion.
     178
     179== テストフレームワーク ==
     180
     181Web Inspectorの開発者にとって非常に大きかったのがテストフレームワークです。回帰バグの発生を大幅に減らせるので、ユーザは安定したアップデートという形で恩恵を受けることが出来ます。
     182
     183== 開発への参加 ==
     184
     185これらの機能の大半はオープンンソースコミュニティーによって実装されました。もちろんあなたの参加もお待ちしています。Web InspectorはほとんどがHTML, JavaScript, CSSで出来ているので、自動的に必要スキルは既に持っていることになります。参加に興味があって質問がある場合はircチャットの[irc://irc.freenode.net/#webkit-inspector #webkit-inspector]にお立ち寄りください。
     186
     187[[Image(http://webkit.org/blog-files/inspector/inspect_inspector_small.png)]]
     188
     189開発への参加に興味を持っていただくために各セクションの最後に対応するバグレポートへのリンクをつけておきました。
     190
     191最後に、新機能／改善のアイデアがある、バグを見つけてしまったような場合はぜひバグレポートを作成してください。[http://webkit.org/new-inspector-bug このリンク]を使えばWeb Inspector用にフォームが記入してあるのでSummaryとDescriptionの部分を記入するだけで大丈夫です。書く前に[http://bit.ly/RDwz2 既にあるバグレポート]とかぶっていないかの確認は必ずしてください。