JavaScript forEach () Method works differently in Chrome and Firefox

Here is the code:

var img = document.createElement('img');
//debugger;
console.log(img);
[1, 2].forEach(function (item) {

    console.log(img);

    img.removeAttribute("src")

    console.log(img);

    var img_src = document.createAttribute("src");
    img_src.value = '/test?id=' + item;
    img.setAttributeNode(img_src);

    console.log(img);
});

First I ran it in Chrome and got the result:

<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">
<img src="/test?id=2">

But when I use the step in the debugger or run it in Firefox, the result will be the same as I thought:

<img>
<img>
<img>
<img src="/test?id=1">
<img src="/test?id=1">
<img>
<img src="/test?id=2">

Perhaps the best way is to put the instruction in the forEach function.

Is this a bug in the Chrome Developer Tool?

+4
source share
2 answers

I think console.log works async in Firefox. This is not standardized, so the behavior may vary depending on the version or browser, it has some problems with asynchronous connection, which are probably associated with data marshaling along the borders of the process.

console.log , - , console.log() .

img , , .

0

. (cmd + r) Firefox, , Chrome. ;)

, Firefox

0

Source: https://habr.com/ru/post/1686608/


All Articles