Можно ли пошагово просмотреть нативный код в отладчике 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; шрифт:18px с засечками; высота: 100%; переполнение: авто;}

Затем код, как показано ниже:

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

Результат как этот.