WebView コントロールのデバッグ
Windows Runtime アプリで WebView コントロールを検査しデバッグするには、アプリの開始時にスクリプト デバッガーをアタッチするよう Visual Studio を設定できます。 Visual Studio 2013 Update 2 から、デバッガーを使用して WebView コントロールと 2 つの方法で対話できます。
WebView インスタンスで DOM Explorer を開き、DOM 要素を検査し、CSS スタイルの問題を調査し、スタイルに対する動的な変更をテストします。
JavaScript コンソール ウィンドウのターゲットとして、Web ページまたは WebView インスタンスで表示される iFrame を選択した後、コンソール コマンドを使用して Web ページとやり取りします。 コンソールは、現在のスクリプト実行コンテキストへのアクセスを提供します。
デバッガーのアタッチ (C#、Visual Basic、C++)
Visual Studio で、Windows Runtime アプリに WebView コントロールを追加します。
ソリューション エクスプローラーで、プロジェクトのショートカット メニューから [プロパティ] を選択して、プロジェクトのプロパティを開きます。
[デバッグ] をクリックします。 [アプリケーション プロセス] ボックスの一覧の [スクリプト] をクリックします。
(オプション) Visual Studio の非 Express バージョンの場合、[ツール]、[オプション]、[デバッグ]、[Just-In-Time] をクリックして、スクリプトの JIT デバッグを無効にします。
注意
JIT デバッグを無効にすると、一部の Web ページで生じる未処理の例外のダイアログ ボックスを非表示にできます。Visual Studio Express では、JIT デバッグは常に無効となっています。
F5 キーを押してデバッグを開始します。
DOM Explorer を使って WebView コントロールを検査およびデバッグします。
(C#、Visual Basic、C++) スクリプト デバッガーをアプリにアタッチします。 手順については最初のセクションを参照してください。
まだ行っていない場合はアプリに WebView コントロールを追加して、F5 を押すとデバッグが開始します。
Webview コントロールが含まれるページに移動します。
[デバッグ」、[ウィンドウ]、[DOM Explorer] をクリックして WebView コントロールの DOM Explorer ウィンドウを開き、検査する WebView の URL をクリックします。
WebView に関連付けられた DOM Explorer が Visual Studio の新しいタブとして表示されます。
DOM Explorer を使用した CSS スタイルのデバッグ で説明されているように、ライブ DOM 要素と CSS スタイルを表示および変更します。
JavaScript コンソール ウィンドウを使って WebView コントロールを検査およびデバッグします。
(C#、Visual Basic、C++) スクリプト デバッガーをアプリにアタッチします。 手順については最初のセクションを参照してください。
まだ行っていない場合はアプリに WebView コントロールを追加して、F5 を押すとデバッグが開始します。
[デバッグ]、[Windows]、[JavaScript コンソール] をクリックして、WebView コントロールの JavaScript コンソール ウィンドウを開きます。
JavaScript コンソール ウィンドウが開きます。
Webview コントロールが含まれるページに移動します。
コンソール ウィンドウで、Web ページ、または [ターゲット] リストの WebView コントロールに表示される iFrame を選択します。
注意
コンソールを使って、1 度に 1 つの WebView、iFrame、共有コントラクト、または Web ワーカーとやり取りできます。各要素では、Web プラットフォーム ホストの個別のインスタンスが必要となります (WWAHost.exe)。一度に 1 つのホストとやり取りできます。
クイックスタート: コンソールを使用した JavaScript のデバッグとJavaScript コンソール コマンドで説明されているように、アプリの変数を表示および変更するか、コンソール コマンドを使用します。