Home > Back-end >  How to debug injected javascript code in IE compatibility mode?
How to debug injected javascript code in IE compatibility mode?

Time:02-07

I need to inject some Javascript scripts to IE and then invoke some methods.

I tried the following simple C# code (the Javascript code is to build xpath from a known HTML element).

string xpath = @"
(function(win) {
    ""use strict"";
    var doc = win.document;

    if (doc._xpath_installed) return;
    doc._xpath_installed = true;

    doc.createXPath = function (node, optimized) {
        if (node.nodeType === Node.DOCUMENT_NODE) {
            return '/';
        }

        var steps = [];
        var contextNode = node;
        while (contextNode) {
            var step = _xPathValue(contextNode, optimized);
            if (!step) {
                break;
            }  // Error - bail out early.
            steps.push(step);
            if (step.optimized) {
                break;
            }
            contextNode = contextNode.parentNode;
        }

        steps.reverse();

        var stepvalues = [];
        steps.forEach(function (step) {
            stepvalues.push(_steptostring(step));
        });
        return (steps.length && steps[0].optimized ? '' : '/')   stepvalues.join('/');
    };

    var _xPathValue = function (node, optimized) {
        var ownValue;
        var ownIndex = _xPathIndex(node);
        if (ownIndex === -1) {
            return null;
        }  // Error.

        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                if (optimized && node.getAttribute('id')) {
                    return _stepnew('//*[@id=""'   node.getAttribute('id')   '""]', true);
                }
                ownValue = node.localName;
                break;
            case Node.ATTRIBUTE_NODE:
                ownValue = '@'   node.nodeName;
                break;
            case Node.TEXT_NODE:
            case Node.CDATA_SECTION_NODE:
                ownValue = 'text()';
                break;
            case Node.PROCESSING_INSTRUCTION_NODE:
                ownValue = 'processing-instruction()';
                break;
            case Node.COMMENT_NODE:
                ownValue = 'comment()';
                break;
            case Node.DOCUMENT_NODE:
                ownValue = '';
                break;
            default:
                ownValue = '';
                break;
        }

        if (ownIndex > 0) {
            ownValue  = '['   ownIndex   ']';
        }

        return _stepnew(ownValue, node.nodeType === Node.DOCUMENT_NODE);
    };

    var _xPathIndex = function (node) {
        // Returns -1 in case of error, 0 if no siblings matching the same expression,
        // <XPath index among the same expression-matching sibling nodes> otherwise.
        function areNodesSimilar(left, right) {
            if (left === right) {
                return true;
            }

            if (left.nodeType === Node.ELEMENT_NODE && right.nodeType === Node.ELEMENT_NODE) {
                return left.localName === right.localName;
            }

            if (left.nodeType === right.nodeType) {
                return true;
            }

            // XPath treats CDATA as text nodes.
            var leftType = left.nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : left.nodeType;
            var rightType = right.nodeType === Node.CDATA_SECTION_NODE ? Node.TEXT_NODE : right.nodeType;
            return leftType === rightType;
        }

        var siblings = node.parentNode ? node.parentNode.children : null;
        if (!siblings) {
            return 0;
        }  // Root node - no siblings.
        var hasSameNamedElements;
        for (var i = 0; i < siblings.length;   i) {
            if (areNodesSimilar(node, siblings[i]) && siblings[i] !== node) {
                hasSameNamedElements = true;
                break;
            }
        }
        if (!hasSameNamedElements) {
            return 0;
        }
        var ownIndex = 1;  // XPath indices start with 1.
        for (var i = 0; i < siblings.length;   i) {
            if (areNodesSimilar(node, siblings[i])) {
                if (siblings[i] === node) {
                    return ownIndex;
                }
                  ownIndex;
            }
        }
        return -1; 
    };


    var _stepnew = function(value, optimized) {
        return {
            value: value,
            optimized: optimized || false
        }
    };

    var _steptostring = function(step) {
        return step[""value""];
    };
})(window);
";

And then I try to inject the xpath string and invoke a method,

// doc is the html document (type: mshtml.IHTMLDocument2)
// element is the html element (type: mshtml.IHTMLElement)

doc.parentWindow.execScript(xpath, "JScript");
    
object[] args = new object[2];
args[0] = element;
args[1] = 1;
object result = doc.GetType().InvokeMember("createXPath", BindingFlags.Instance | BindingFlags.InvokeMethod, null, doc, args);

It works fine in Internet Explorer 11 (Windows 10).

However, when I add the website to Compatibility View (settings-> compatibility view settings), the InvokeMember call throws exception "Exception from HRESULT: 0x80020101", which means there are some script errors in the Javascript code.

My question is, is there a way to debug into this Javascript code in the above situation? Without debugging it is almost impossible to find the root cause only based on the information 0x80020101.

CodePudding user response:

If you have script errors in your JS code, why don't you trace the client-side code's execution with console.log() or console.debug() so that you know what is happening in your application ?

CodePudding user response:

If you just want to debug code in Edge IE mode, you can use IEChooser to open Internet Explorer DevTools, as follows:

  1. In Windows, open the Run dialog box. For example, press the Windows logo key R.
  2. Enter %systemroot%\system32\f12\IEChooser.exe, and then click OK.
  3. In IEChooser, select the entry for the IE mode tab.

For more details, you could also refer to this doc: Open DevTools on a tab in IE mode.

  •  Tags:  
  • Related