是否有可能在 WebBrowser 控件中调试 JavaScript 代码

Question

I'm writing a web page using HTML and Javascript. This page is opened in WPF WebBrowser control. The problem is that JavaScript on this page works fine in Internet Explorer directly but not in WebBrowser control even I've set to use Internet Explorer 11 for WebBrowser control.

So I can't reproduce the issue in a usual browser to debug it. It's reproducible only in WebBrowser control.

Is there a possibility to debug JavaScript code in WebBrowser to be able to find the issue? I don't see any item with "Inspect" word in the context menu of WebBrowser.

Answer 1

Your problems are probably due to the WebBrowser control using an older version of IE than you are running standalone in Windows.

Yes you can debug your web page. JavaScript has an event called window.onerror that acts like a global try/catch. This is great for catching unexpected exceptions.

Add this to your JavaScript to add your own event handler:

window.onerror = function(message, url, lineNumber) 
{ 
  window.external.errorHandler(message, url, lineNumber);
}

The event handler is going to call a method in your WPF application to show you the error details.

Create a class in your WPF application like this that your JavaScript will be able to access.

[System.Runtime.InteropServices.ComVisibleAttribute(true)] 
public class ScriptInterface 
{ 
    void errorHandler(string message, string url, string lineNumber) 
    { 
        MessageBox.Show(string.Format("Message: {0}, URL: {1}, Line: {2}"));
    } 
}

Then set the WebBrowser control's ObjectForScripting property to an instance of your handler class:

webBrowser1.ObjectForScripting = new ScriptInterface();