アップルは、Mac OS XとiOSで得た開発ツールに関するノウハウと技術を、Web開発でも展開します。Safari は、Webサイトの修正、デバッグ、ピーク時のパフォーマンスと互換性の最適化などが簡単に行える、一連の強力なツールを備えています。こうしたツールを利用するには、Safariの環境設定の「詳細」で「開発メニューを表示」を有効に設定してください。

Developメニュー

Safariの強力な開発ツールは、「Develop」メニューから簡単に呼び出せます。Developメニューには、Webページ操作とデバッグに使用できる多様なツール類がまとめられています。

Web Inspector

Web Inspectorはあなたの司令部です。この機能を使って、これまでのWebブラウザ内蔵ツールをしのぐ、豊富にそろった開発ツールに手早く簡単にアクセスできます。Web Inspectorは、整然と統一されたインターフェイスデザインのSafari開発ツールを用意しており、ページ構造の表示、JavaScriptのデバッグ、パフォーマンス最適化など、Webアプリケーション開発をより効率的に行えます。

• 

  Elements Pane

  ElementsペインでWebページの構造をより詳細に表示できます。また、Elementsペインを使うと、ページに適するドキュメントオブジェクトモデル（DOM）とカスケーディングスタイルシート（CSS）のルールを調べて編集することが簡単にできます。また、任意のエレメントにどのイベントリスナーが結び付いているのか確認でき、可能なすべてのファーマットでCSSカラー数値（color values）を動的に表示できます。

• 

  Resources Pane

  Resourcesペインは、Webページのすべてのリソースを正確に表示し、ネットワーク上でロードされる順序とスピードをグラフ表示します。サイズごと、あるいは、待ち時間、応答時間、接続時間といったロードパラメータごとにデータをソートできます。小さなサイズのグラフィックの読み込みが遅い場合、ネットワーク帯域幅の問題かもしれません。待ち時間が長い場合、サーバーの応答に問題があるかもしれません。また、別のリソースがロードされるまで、グラフィックがリクエストされない場合、これらのリソースを並列にロードするようコードを修正すべきかもしれません。Resourcesペインを使って長いロード時間の問題を解決し、サイトのロード速度を細かく調整しましょう。

• 

  JavaScript Debugger

  Safariの強力なJavaScript Debuggerは、あなたのスクリプトの正常な動作を妨げている問題（例えば、構文エラー、欠落しているセパレータなど）についてJavaScriptコードを調べます。コードの特定の部分を取り出してデバッグできるよう、ブレイクポイントをスクリプトに追加したり、またはSafariの「pause on exceptions（例外で一時停止）」を有効に設定することによってランタイムでコードをデバッグできます。さらに、スクリプトが実行される時にJavaScript変数やオブジェクトを調査できるため、より容易に問題を突きとめることができます。

• 

  Timeline Pane

  Web InspectorのTimelineペインは、WebサイトまたはWebアプリケーションの動作を時系列で確認できるように表示します。ローディング、スクリプティング、レンダリングのタイムラインには、リモートリソースへの要求、JavaScriptの実行、スタイルの計算、Webアプリケーションによる他の操作の処理などをコードがいつ、どのように実行するのか表示されるので、バグを見つけ出したり、改善につながる領域を特定することが容易にできます。

• 

  JavaScript Profiler

  Safariの最新技術を使ったJavaScript ProfilerでJavaScriptコードを最適化しましょう。Profilerは各スクリプトの関数のパフォーマンス特性をリスト表示します。問題部分を特定しやすくなり、Webアプリケーションから最高のパフォーマンスを引き出すことができます。

• 

  Storage Pane

  Safariには、次世代Webアプリケーションの不可欠な要素になるHTML5オフラインデータを調べるツールが含まれています。SafariのStorageペインで、localStorageやsessionsStorageデータを表示したり、SQLデータベース情報を調べたり、コマンドラインインターフェイスでSQLクエリを実行することができます。さらに、表示しているページ上でアクセスされたすべてのドメインに関するCookie情報を見ることができます。

• 

  Console Pane

  新しいConsoleペインによって、より簡単にデバッグできます。フルウィンドウ表示で Web Inspector consoleを見ることができ、あなたのサイト内のJavaScriptのエラーや警告により簡単にアクセスできるようになります。Error ConsoleにJavaScriptのexpressions（エクスプレッション）をタイプ入力でき、Safariはそれらがまるでソースページに表示されているようにそれらの計算式を評価します。Scopeボタンによってエラー、警告、ログによる情報をフィルターできます。

Snippet Editor

Snippet Editorを使って、実験用のHTMLマークアップを簡単にテストできます。エディタにコードを入力すると、Safariが結果をすぐに表示します。