Clever Geek Handbook

VS2015によるリモートJavaScriptデバッグ。 パート3（F12セレクター）

記事「VS2015 Remote Debugging JavaScript-Part 3」の翻訳を提案します。



F12セレクター-Webブラウザーコントロールを備えたWinFormsアプリケーション用の素晴らしい新しいツール



前に、IEやその他のプロセスからのJSのリモートデバッグについて説明しました。



VS2015は、アプリケーション（またはプロセス）のリモートデバッグに最適なツールです。 十分な機会を提供します。 QA、テスト、統合、およびVisual Studioをインストールする方法がない他の環境でホストされているアプリケーションをデバッグできます。 しかし、これらのリモートマシンの1つでメモリリークをデバッグするタスクが発生した場合はどうでしょうか。 F12（ブラウザーの開発者ツール）が役立ちますが、漏れやすいアプリケーションがWebブラウザーコントロールを備えたWinFormsの場合はどうでしょうか。 まあ、多くのオプションはありません。 DebugDiagはリークを特定するのに役立ちますが、プライベートシンボルにアクセスできなければ、幸運ではないかもしれません。 JSでメモリリークを探すのは困難です。 同様の状況にあった場合は、Windows 10に同梱されている新しいF12Chooserツールをぜひお試しください。



F12開発者のツールの詳細については、次のリソースを参照できます。



ソースコードとデモアプリケーションへのリンク



この簡単なデモでは、MDI WinFormsアプリケーションを使用しています。 2つのフォームを開き、それらをデバッグします。 アプリケーション自体とソースコードをダウンロードできます。 テストアプリケーションとコード自体をダウンロードできます。 このアプリケーションは、以前のデモをわずかに修正したバージョンであり、基本的にはMDIアプリケーションへの変換です。

  1. TestApp2.exe
  2. TestApp2.zip
  3. TestLeak.html
  4. TestLeak2.html
  5. TestApp.zip （以前のデモ）


Webブラウザコントロール用のWinFormsホスティングアプリケーションのデバッグ



  1. TestApp2.exeを実行する
  2. [ ファイル] -> [ 新しい フォーム]をクリックして、新しいフォームを開きます。
  3. TestLeakファイルを開きます。 その中のhtml 。 ファイルをブラウザコントロールにドラッグアンドドロップするだけで、コンポーネントはこのファイルに移動します
  4. [ ファイル] -> [ 新しい フォーム]をクリックして、別の新しいフォームを開きます。
  5. ファイルTestLeak 2を開き、その中のhtmlを開きます。 ファイルをブラウザコントロールにドラッグアンドドロップするだけで、コンポーネントはこのファイルに移動します
  6. [ ウィンドウ] -> [ 水平に並べて表示]をクリックして、両方のウィンドウを同時に表示します



  7. （ドラムロール！）アプリケーションC：\ Windows \ SysWOW64 \ F12 \ F12Chooser.exeまたはC：\ Windows \ System32 \ F12 \ F12Chooser.exeを開きます。 選択は、アプリケーションが32ビットプロセスとして実行されているか、64ビットプロセスとして実行されているかによって異なります。



  8. 「 TestLeak 」という碑文のタイルをクリックします。 html "。 おなじみのF12ウィンドウが表示されます。これで、作業方法が完全にわかります。



  9. TestLeakのonclickメソッドにブレークポイントを設定します。 html アプリケーションで、「 Throw an error 」ボタンをクリックして、F12Chooser（F12）デバッガーでブレークポイントがトリガーされるのを確認します



  10. F12のコンソールタブに移動すると、エラーが表示されます



  11. 素晴らしいニュースは、各フォームを個別にデバッグできることです。 つまり、1つのプロセスに複数のF12Chooserデバッガーをアタッチできます。
  12. F12では、ドキュメントモード（ドキュメントモード）やユーザーエージェント文字列の変更など、おなじみのすべてのことができます。



Webブラウザコントロール用のWinFormsホストアプリケーションでのメモリリークのデバッグ



項目1〜7は上記と同じであり、次のとおりです。

  1. 今回はLeakTest 2.htmlを開きます。 F12の[メモリ]タブに移動します。 アプリケーションのメモリリークを分析できないことに驚かれることでしょう。



  2. 重要な注意 ：IE11がインストールされていても、ページはIE7モードでレンダリングされます。 これは、Web Browser Controlコンポーネントのデフォルトの動作です。 基本的に、これは多くの企業イントラネットサイトの下位互換性のために行われます。エッジモードで表示されると破損する可能性があります
  3. ドキュメントモードをEdgeに変更して、メモリタブに戻りましょう。

  4. 「 プロファイリングの開始 」ボタンを押します
  5. 思い出を撮る

  6. アプリケーションで[メモリリークの開始]ボタンをクリックし、4〜5秒後に-[メモリリークの停止]をクリックします。

  7. 別のメモリスナップショットを取得します。

  8. スクリーンショットに示すように、1つを右クリックして2つ目の画像を選択して、2つの画像を比較します

  9. 流れる行の1つを選択すると、グローバル配列がそれらのルートであることがわかります。
  10. div要素についても同様

  11. この記事では、メモリリークのデバッグの詳細を掘り下げるつもりはありません;それらはここで見つけることができます： Webページでのメモリの問題の診断
  12. また、便宜上、F12Chooserは必要な接続を見つけるのに便利なようにプロセスIDを表示できます。


まとめ





More articles:


All Articles