Chrome console logs arrays out of order when preview is expanded?

I have noticed in chrome (not tried other browsers) that the ‘preview’ of an array I have created is often in a different order to when I click to expand that array in the console:

The code below creates this array of hues (running through all values before a reshuffle), with each array element preceeded by an element of string ‘White’. Logging each value directly confirms the array is created correctly (included in code). Perhaps this is an issue related to the use of shallow copies/ object references by the code?

I couldn’t find any info on Chrome so asking here incase this isn’t an known bug, and as I am interested in any information on the root cause of this problem. Thanks.

const trials = []

function createTrialsArray(){
    const hues = ['Red', 'Green', 'Blue', 'Yellow']
    const nBlocks = 3
    for (let b=0; b<nBlocks; b++) {
        shuffle(hues) // Random shuffle on hues
        for(let h=0; h<hues.length; h++){
            trials.push('White')
            trials.push(hues[h])
        }
    }
    console.log(trials);  // Check array directly
    console.log(`First Element: ${trials[0]}`);
    console.log(`Last Element: ${trials[trials.length - 1]}`);
    trials.forEach((trial, index) => {
        console.log(`Index ${index}: ${trial}`);
    });
}

// Function to shuffle the array (Fisher-Yates Shuffle)
function shuffle(array) {
    for(let i=array.length-1; i>0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];  // Swap
    }
}