"如何在 IE 兼容模式下调试注入的 javascript 代码？"

Question

我需要向 IE 注入一些 Javascript 脚本，然后调用一些方法。

我尝试了以下简单的 C# 代码（Javascript 代码是从已知的 HTML 元素构建 xpath）。

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);
";

Answer 1

如果您的 JS 代码中有脚本错误，为什么不使用console.log()<\/code>或console.debug()<\/code>跟踪客户端代码的执行，以便了解应用程序中发生了什么？

"

Answer 2

如果只想在 Edge IE 模式下调试代码，可以使用 IEChooser 打开 Internet Explorer DevTools，如下：

1. 在 Windows 中，打开“运行”对话框。 例如，按Windows logo key<\/code> + R<\/code><\/li>
2. 输入%systemroot%\\system32\\f12\\IEChooser.exe<\/code> ，然后单击“确定”。<\/li>
3. 在 IEChooser 中，选择 IE 模式选项卡的条目。<\/li><\/ol>

   有关更多详细信息，您还可以参考此文档： Open DevTools on a tab in IE mode<\/a> 。

   "