How to debug JavaScript code of a page from WPF WebBrowser Control

Question

I have a WPF WebBrowser control which I used in my wpf client application to navigate to different pages. It has basic functionalities like back , forward , go events which calls this.webbrowser.goback(), this.webbrowser.goforward(), this.webbrowser.go().

Though the web application works fine with IE which means all the forward and back navigations for more than one level .More than one level navigation doesn't work fine in my WPF application for one page(Billings which has contacts link and in contacts page we have address link.) when clicking back button on my address page it goes to contacts page but clicking back button on contacts page doesn't go to billing page.

Since it's working fine in IE without any issues I suspect there is something wrong with my WPF applications . I have few questions here .

1. Is the webbrowser.goback() same as click back button of IE ? Or any events will be missed out in the wpf webbrowser control compared to IE ?
2. IS there a way we can debug the javasctipts from WPF application itself ?
3. Is there a better way to debug these kind of scenarios from WPF applications ?
4. Does IE stores the WPF WebBrowser navigations in its history or it is a separate instance ?

my control looks like below

<WebBrowser x:Name="webBrowser" DockPanel.Dock="Bottom" Navigating="webBrowser_Navigating" Navigated="webBrowser_Navigated" LoadCompleted="webBrowser_LoadCompleted"/>

And code behind looks like below:

private void backButton_Click(object sender, RoutedEventArgs e)
    {
        // Navigate to the previous HTML document, if there is one
        if (this.webBrowser.CanGoBack)
        {
            this.webBrowser.GoBack();
        }
        else
        {
            MessageBox.Show("Cannot go back. There needs to be something in the history to go back to.");
        }
    }
    private void forwardButton_Click(object sender, RoutedEventArgs e)
    {
        // Navigate to the next HTML document, if there is one
        if (this.webBrowser.CanGoForward)
        {
            this.webBrowser.GoForward();
        }
        else
        {
            MessageBox.Show("Cannot go Forward. There needs to be something in the history to go forward to.");
        }
    }

Answer 1

I would have expected the WebBrowser control's navigation to work in the same way as it is essentially IE hosted in WPF.

You can have the JavaScript call methods in the .NET application, so could have the JavaScript write debug info to the .NET console

This class can be passed to JavaScript in WebBrowser for it to call .NET method:

[ComVisible(true)]
public class ScriptManager
{
    // This method can be called from JavaScript.
    public void WriteConsole(string output)
    {
        // Call a method on the form.
        Console.WriteLine(output);
    }
}

Pass to WebBrowser:

webBrowser1.ObjectForScripting = new ScriptManager();

I don't know the JavaScript bit to call the method as I've never really used JavaScript, BUT I think it would be something like this:

$scope.LogBackNavigation = function() {
    window.external.WriteConsole("Back Navigation");
}

That might allow you to see whats happening in your JavaScript.

Answer 2

Debug -Attach to Process -> Script Code This has loaded all the JS files in my VS and I could put breakpoint wherever I want.