ブログトップ 記事一覧 ログイン 無料ブログ開設

大人になったら肺呼吸 RSSフィード Twitter

2010-06-12

SafariのWebインスペクタでJavaScriptをデバッグする方法

f:id:replication:20100615194707p:image

はじめに

Apple社のWebブラウザSafariにはWebインスペクタという開発者向けツールが標準で搭載されており、このツールを使うとJavaScriptをデバッグすることができるようになります。今日はこのWebインスペクタの使い方を少しご紹介したいと思います。

スクリーンショットはMacのものですが、Windows版Safariでもほとんど同じような手順でデバッグすることができると思います。

開発メニューを有効化する

Webインスペクタを利用するには、はじめに開発メニューを有効化する必要があります。

  1. 環境設定から詳細タブを選択し、「メニューバーに開発メニューを表示」にチェックを入れます。

f:id:replication:20100615194706p:image

WebインスペクタでJavaScriptをデバッグする

開発メニューが有効になったら、続いてWebインスペクタでJavaScriptをデバッグする方法を説明します。

1.デバッグしたいページをSafariで表示します。

2.開発メニューからWebインスペクタを選択します。

3.Webインスペクタの起動時には、以下のような画面が表示されるので、「このセッションでのみ有効」か「常に有効」のどちらかを選択し、「デバッグを有効にする」ボタンをクリックします。

f:id:replication:20100615194707p:image

4.スクリプトタブを選択します。

5.スクリプトの実行をストップさせたい箇所の行番号をクリックして、ブレークポイントを設定します。

f:id:replication:20100615200042p:image

6.この状態でページをリロードすると、デバッグが開始されます。

外部スクリプトのデバッグ

Webインスペクタは、外部jsファイルのデバッグもできます。現在表示中のページが読み込んでいるjsファイルの一覧は、スクリプトタブの真下にある選択ボックスで見ることができます。この選択ボックスからデバッグしたいファイルを選択すると、画面にそのjsファイルのソースコードが表示されます。

f:id:replication:20100615200043p:image

変数のウォッチ

実行中のローカル変数の値を確認するには、画面右側の領域で確認することができます。

f:id:replication:20100615201212p:image


Apple Magic Mouse MB829J/A
Apple Magic Mouse MB829J/A
posted with amazlet at 11.06.14
アップル (2009-10-31)
売り上げランキング: 407


以下のエントリもあわせてどうぞ

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

Connection: close