Remote debugging javascript with VS2015. Part 3 (F12 Chooser)

I propose a translation of the article "VS2015 Remote Debugging JavaScript - Part 3" .

F12 Chooser is a terrific new tool for WinForms applications with Web Browser Control

We previously discussed remote debugging of JS from IE and other processes.

VS2015 is a great tool for remote debugging of applications (or processes). It provides ample opportunity. You can debug applications hosted in QA, testing, integration and other environments where there is no possibility to install Visual Studio. But what if there was a task to debug a memory leak on one of these remote machines? F12 (developer tools in the browser) would help, but what if the leak application is WinForms with a Web Browser Control? Well, not a lot of options. DebugDiag could help identify the leak, but without access to private characters, we may not be lucky. It will be difficult to look for a memory leak in JS. If you were in a similar situation, then you’ll definitely appreciate the new F12Chooser tool that comes with Windows 10.
')
For more detailed information on the F12 developer tools, you can refer to the following resources:

• Inspect running JavaScript with the Debugger
• Diagnosing memory problems in your webpages

Links to source code and demo application

In this simple demo, I use the MDI WinForms application. We will open two forms and debug them. You can download the application itself and the source code. You can download the test application and the code itself. This application is a slightly modified version of the previous demo, mainly a conversion to an MDI application.

1. TestApp2.exe
2. TestApp2.zip
3. TestLeak.html
4. TestLeak2.html
5. TestApp.zip (previous demo)

Debugging WinForms Hosting Application for Web Browser Control

1. Run TestApp2.exe
2. Press File -> New Form to open a new form.
3. Open the TestLeak file . html inside it. You can simply drag the file to the browser control and the component will go to this file.
4. Click File -> New Form to open another new form.
5. Open the TestLeak 2. html file inside it. You can simply drag the file to the browser control and the component will go to this file.
6. Press Window -> Tile Horizontally to display both windows simultaneously
   
   
7. (Drum roll!) Now open the application C: \ Windows \ SysWOW64 \ F12 \ F12Chooser.exe or C: \ Windows \ System32 \ F12 \ F12Chooser.exe . The choice depends on whether the application is running as a 32-bit or 64-bit process.
   
   
8. Click on the tile that says “ TestLeak . html . You will see the familiar F12 window, and with it we already know very well how to work.
   
   
9. Put a breakpoint in the onclick method on TestLeak . html. In the application, click on the “ Throw an error ” button and see the breakpoint triggering in the F12Chooser debugger (F12)
   
   
10. Going to the console tab in F12, we can see our error
    
    
11. The great news is the ability to independently debug each form. In other words, you can attach more than one F12Chooser debugger to a single process.
12. You can do all things familiar to you in F12, for example, change the document mode (document mode) or the user agent string
    

Debug memory leaks in a WinForms host application for Web Browser Control

Points 1 to 7 are the same as above, and then:

1. This time we open LeakTest 2. html . Go to the memory tab in F12. You will be surprised to see that you cannot analyze memory leaks for an application.
   
   
2. Important note : even though you have IE11 installed, the page is still rendered in IE7 mode. This is the default behavior for the Web Browser Control component. Basically, this is done for backward compatibility for many corporate intranet sites, which can break if rendered in Edge Mode.
3. So let's change the document mode to Edge and go back to the memory tab.
   
4. Press the " Start Profiling " button
5. Take a snapshot of memory
   
6. In the application, press the "Start Memory Leak" button, then after 4-5 seconds - "Stop Memory Leak"
   
7. Take another snapshot
   
8. We compare two pictures by right-clicking on one of them and selecting the second one, as shown in the screenshot.
   
9. If you select one of the strings that flow, you will see that the global array is the root
10. Similarly for div elements
    
11. I'm not going to go into the details of debugging memory leaks in this article, you can find them here: Diagnosing memory problems in your webpages
12. Also, for convenience, F12Chooser can show the process identifier for the convenience of finding what you need when connecting

Results

• F12Chooser comes with Windows 10 and lets you use the power of F12 for any process.
• You can debug IE, Edge, applications with Web Browser Control, etc.
  
• It seems that Edge handles memory well by using a new parsing engine for DOM