是否可以在 Edge（或任何浏览器的）调试器中单步执行本机代码？

Question

直截了当的问题。我目前正在调试一个问题，尽管它可以在几乎所有其他浏览器上呈现，但它无法在 Edge 上正确呈现：

var img = new Image();
img.onload = function() {
  console.log("succ");
}
img.onerror = function(error) {
  console.log(error);
}
img.src = 'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;height: 100%;overflow: auto;}</style><polygon points="5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x="20" y="20" width="160" height="160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns="http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
document.getElementById("target").append(img);

<div id="target"></div>

当我进入代码时，Image 的 src 属性实例化方式显然存在错误。但是我无法进入浏览器代码以查看它为什么不起作用。有可能以某种方式做到这一点吗？

Answer 1

在我这边测试你的代码后，问题似乎与样式中的高度属性有关。

尝试从这部分代码中移除高度属性

div {color: white;font:18px serif; ~~height: 100%;~~overflow: auto;}

然后，代码如下：

<div id="target"></div>

<script type="text/javascript">
    var img = new Image();
    img.onload = function () {
        console.log("succ");
    }
    img.onerror = function (error) {
        console.log(error);
    }
    img.src = 'data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;overflow: auto;}</style><polygon points="5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x="20" y="20" width="160" height="160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns="http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
    img.style = "height :100%";
    document.getElementById("target").append(img);
</script>

结果like this.

是否可以在 Edge（或任何浏览器的）调试器中单步执行本机代码？

Is it possible to step through native code in the Edge (or any browser's) debugger?

javascript

svg

data-uri

microsoft-edge