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

Question

Straightforward question. I am currently debugging an issue where this doesn't render properly on Edge despite being able to render on pretty much any other browser:

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>

When I step into the code, there is clearly an error with how Image is being instantiated with its src property. But I can't step into the browser code to see why it's not working. Is it possible to do this somehow?

Answer 1

After testing your code on my side, it seems the issue is related to the height property in the style.

Try to remove the height property from this part of code

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

Then, the code as below:

<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>

The result like this.