Inspecting console.log variables in Chrome

Question

As a thought, i would like to know if is possible to inspect for log properties of any variable in the chrome or any other browsers within the console mode. As i already know that you can already inspect the DOM in inspector element and you can go through debugging mode also. I want to demonstrate my point and why i and most novice would benefit this.

So as you can see in the picture below:

So as you can see i am trying to access some element of Array[15] but in the end it always giving me undefined. It nice just to test out some code before recompiling it again which takes time. Plus sometime you don't always knows enough that the function you are calling in JS is compatible with what you trying to achieve.

You have to wrap the individual array elements with jquery again to get access to the .attr method of jquery like this - $($('input')[0]).attr('class') — Harshit Laddha
– Harshit Laddha, Commented Jan 15, 2017 at 6:02
Ahh that right... you code doesnt work. But it gave me more understanding. Anyway $('input') this only give me 1 element, i want an array. I try this $($('input')[0]) also but it didnt work — Photonic
– Photonic, Commented Jan 15, 2017 at 6:19
Just tried in the browser console. It worked for me. Not sure what you are trying to do but can you elaborate your use case so as to better understand your problem — Harshit Laddha
– Harshit Laddha, Commented Jan 15, 2017 at 6:22
Ahh yeah i found out i was trying to access iframe element which i havent referenced it — Photonic
– Photonic, Commented Jan 15, 2017 at 14:20

Ranadip Dutta · Accepted Answer · 2017-01-15 05:56:05Z

1

Put your entire code inside:

$(document).ready (function (){
    //Paste your code here
});

The whole point is you are trying to access an element in the DOM before it exists.

When your trying to access the class the item doesnot exist.

Alternative: Move your script below the elements in the html.

This is a very generic solution I gave without seeing the code. Request you to post the code as well.

Hope it helps.

answered Jan 15, 2017 at 5:56

Ranadip Dutta

9,5493 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Photonic Over a year ago

My function has been called and the array was output from the angular controller. I guess i understand a little bit now

Ranadip Dutta Over a year ago

Then wrap it up in this function @Photonic: when you called the function and results in array , some of the elements are out of scope for the current class. I hope you can understand the code base and change the logic accordingly.

Photonic Over a year ago

It turns out i was trying to access data from inside an iframe of which i didnt reference it. Thats why document.ready wasnt working for me

Ranadip Dutta Over a year ago

@Photonic: superb. Anything is good if it fulfills the requirement. :)

poushy · Accepted Answer · 2017-01-15 06:03:54Z

1

You need to add a debugger where you are outputting your array. It seems to me you are trying to access the variable after execution is over, so the variable value is lost, as it goes out of scope. When execution stops at the debugger, you can console.log your variable and properties. At that point the variable will be in scope.

answered Jan 15, 2017 at 6:03

poushy

1,13411 silver badges17 bronze badges

1 Comment

Photonic Over a year ago

Thanks.. i litteral thought it wasnt possible to do what i was asking

Collectives™ on Stack Overflow

Inspecting console.log variables in Chrome

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related