different representation of arrays in chrome console

chrome console find element by class
chrome console commands list
chrome console find element by id
chrome console api
chrome console log
chrome console shortcut
chrome console print variable
chrome console history

Here is my code

let loadInitialImages = ($) => {
 let html = "";
 let images = new Array();
 const APIURL = "https://api.shutterstock.com/v2/images/licenses";

 const request = async() => {
    const response = await fetch(APIURL, { headers: auth_header() } );
    const json = await response.json();
    json.data.map((v) => images.push(v.image.id)); //this is where the problem is
 }

 request();

 // I can see the contents of the array when I log it.
 console.log(images);
 // But I can't see any elements when logging this way:
 images.map((id) => console.log(id));
}

Everything is working fine here but the problem is when I'm pushing the elements into the array is goes out of the array braces [] below is the screenshot of my array:

I'm not able to loop through the array here.

This is how a usual Array looks like in Console

See Array braces here. Elements appear to be inside [1, 2, 3]

Since your request function is async you need to treat its result as a Promise.

This is also the reason why you see it represented differently in the chrome console. An empty array gets printed, but the references in the console are updated dynamically, so you can still expand it and see the contents.

If you want to log the contents of the array statically, you could use something like JSON.stringify to print it. This will print a string representation of the exact state of the array at the time of logging.

// You will need to check the output in the browser console.
// Your code could be reduced to this:
const a = []; 
setTimeout(() => a.push(1, 2), 100); 
console.log('a:', a);

// A filled array logs differently:
const b = [1, 2]; 
console.log('b:', b);

// Stringify gives you a fixed state:
const c = []; 
setTimeout(() => c.push(1, 2), 100);
console.log('c:', JSON.stringify(c));

Console Utilities API Reference, Technical Writer, Chrome DevTools & Lighthouse The image below shows a different element selected in the same page. The $0 now refers $$(selector) returns an array of elements that match the given CSS selector. copy(object) copies a string representation of the specified object to the clipboard. Output: Console Output: Method 2: Using the Object.keys() method: The Object.keys() method is used to return the properties of the given object as an array. As the window object represents the current browser’s window, the properties of this object can be used to find the variables like the previous method.

Snippet below demonstrates your issue (your case is arr1, you want arr2). In case loadInitialImages can't be async use arr3 scenario.

async function main(){
let arr1 = [], arr2 = [], arr3 = [];

const getArray = ()=> (new Promise(resolve=>setTimeout(()=>{resolve([1,2,3])},1000)))



async function request(arr, number){
  var result = await getArray();
  result.forEach((el)=>(arr.push(el)))
  console.log(`inner${number}`, arr)
  return result;
}

request(arr1, 1);

console.log("outer1", arr1)

await request(arr2, 2);

console.log("outer2", arr2)

request(arr3, 3).then(()=>{
  console.log("then3",arr3)
})
console.log("outer3", arr3)
}

main();

Console API Reference | Tools for Web Developers, Use the Console API to write messages to the Console. Overview · Emulate and Test Other Browsers. Guides. Override The User Agent Technical Writer, Chrome DevTools & Lighthouse. Use the Log level: Info. Prints a JSON representation of the specified object. console.table(array). Log level:  Chrome string, number, object, and array log examples. I’m showing these examples in Chrome with the object and array already expanded. They are normally collapsed but the output next to the arrow is consistent between both states. Firefox displays a little differently but, for the most part, the output is the same.

I think the probleme is that the console.log() is fired before the array is populated, and becose the console.log work with reference it print both state of array (when it's empty, and after populating it with .map)

you can test this code ? the console is directly after the loop

let loadInitialImages = ($) => {
    let html = "";
    let images = new Array();
    const APIURL = "https://api.shutterstock.com/v2/images/licenses";

    const request = async() => {
       const response = await fetch(APIURL, { headers: auth_header() } );
       const json = await response.json();
       json.data.map((v) => images.push(v.image.id)); //this is where the problem is
       console.log(images);
    }

    request();

}

let loadInitialImages = ($) => {
        let html = "";
        let images = new Array();
        const APIURL = "https://api.shutterstock.com/v2/images/licenses";

        const request = async() => {
           const response = await fetch(APIURL, { headers: auth_header() } );
           const json = await response.json();
           json.data.map((v) => images.push(v.image.id)); //this is where the problem is
           console.log(images);
        }

        request();

    }
    
    loadInitialImages();

Advanced JavaScript Debugging with console.table(), The console.log() call will give you the following representation of your array of their keys as a second parameter to the console.table() call: Also, make sure to check out my other posts about the Chrome Developer Tools:. The terms and notions described here refer to the Chrome DevTools Heap Profiler. If you have ever worked with either the Java, .NET, or some other memory profiler, then this may be a refresher. Object sizes. Think of memory as a graph with primitive types (like numbers and strings) and objects (associative arrays).

Things you probably didn't know you could do with Chrome's , When I started coding, I only used the JavaScript console for logging values If you're reading this in Chrome (Or any other Browser) on a desktop, you getEventListeners($('selector')) returns an array of objects that Therefore, to get a clear representation of the variable, we can display them in a table. It’s a nice and convenient way to print (i.e. log) data to the browser console. Complex data (Array, Object, etc.) will be transformed to an displayable implementation specific representation. Internally console.log(…data) uses the consoles Logger function with a logLevel of ‘log’.

Chrome DevTools, Opening the Chrome DevTools Console as a panel using shortcuts Sometimes we need to copy the string representation of an object to the clipboard: specified object whereas the second is the specified array of events  In Chrome the console object defines two methods that seem to do the same thing:. console.log() console.dir() I read somewhere online that dir takes a copy of the object before logging it, whereas log just passes the reference to the console, meaning that by the time you go to inspect the object you logged, it may have changed.

Art of debugging with Chrome DevTools - Frontmen, Chrome DevTools come with an array of features that help use of console.table​() that gives you a nice tabular representation of Instead, I am going to share some other tips and tricks that I like to use in the Sources panel. This page explains how the Chrome DevTools Console makes it easier to develop web pages. The Console has 2 main uses: viewing logged messages and running JavaScript. Viewing logged messages. Web developers often log messages to the Console to make sure that their JavaScript is working as expected.

Comments
  • What exactly do you mean by "goes out of the array braces"? Your array screenshot looks fine to me.
  • images = json.data.map((v) => v.image.id);
  • you're not waiting for the request to finish. You need to await request(); before you console.log(images);
  • When you call console.log(images), images is empty and then request populates it - that's why you can expand it and see ids
  • @adiga this is exactly what I was thinking until I compared it with an usual array. See the Updated question.
  • No, I'm not confused with the representation. The problem here is I'm not able to loop through the Array.
  • Updated to address what I think was the actual question: what is chrome doing with this array?
  • Yeah exactly. this was my problem. People are downvoting the questions without even understanding the actual problem