Webtech Walker

Safari3.1の開発ツールがなかなかすごい

Macをほとんど使わないので、Safariは動作確認程度でしか使ったことなかったんですが、Windows版の正式バージョンがリリースされたんでいろいろと使ってみました。デフォルトで入っている開発用ツールがなかなかいい感じでした。

メニューバーに開発メニューを表示する

デフォルトでは開発メニューが表示されていないので、「編集」→「設定」→「詳細タブ」の「メニューバーに[開発]メニュー]を表示」にチェックをつけます。

safari設定画面の詳細タブ

そうするとメニューバーに開発メニューが追加されます。これで準備OK。

safariのメニューバー

使ってみる

いろいろと機能はあるみたいですけど、とりあえず便利そうなのをいくつか使ってみました。

ユーザーエージェント

ユーザーエージェントを変更できます。「その他」から任意のユーザーエージェントも設定できます。FirefoxのUser Agent Switcherのようなものですね。

編集→ユーザーエージェント→ユーザーエージェント一覧

Webインスペクタ

HTMLのDOMツリーを見ることができます。選択したDOM要素に適用されているスタイルや詳細が右側に表示されます。Firebugみたいにソースの変更はできないみたいです。

DOMツリー

エラーコンソールを表示

javascriptのエラーを表示します。javascriptを実行することもできます。console.logも使えるようです。

javascriptのエラー

ネットワークタイムライン

ファイルの読み込み時間などを見ることができます。見た目もきれいですね。

ネットワークタイムライン

その他もろもろ

  • キャッシュを無効にする
  • イメージを無効にする
  • スタイルを無効にする
  • JavaScript を無効にする
  • Runaway JavaScript タイマーを無効にする
  • サイト固有のハックを無効にする

デフォルトでこれだけの機能があるとは、やるなぁSafari。

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