Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Practice Project Project Overview

Posted by Jason Swetzoff
Jason Swetzoff
3,104 Points

How to debug?

How do I debug prototypes? For example if I wanted to see if anything was added to an array inside a prototype through the console?

In the other lessons we would make sure things were working step by step. I wish we learned how to do this while building out the prototype projects.

3 Answers

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

You have to insert in your function the console.log method and then simply call the function like this:

function Playlist() {
    this.songs = ['Song 1', 'Song 2', 'Song 3'];
    this.nowPlayingIndex = 0;
    console.log(songs);
}

In the console of web inspector tools simply call the function Playlist();

Jason Swetzoff
Jason Swetzoff
3,104 Points

Thanks again but this does not work. You would need to do this: 

function Playlist() {
    this.songs = ['Song 1', 'Song 2', 'Song 3'];
    this.nowPlayingIndex = 0;
    console.log(this.songs);
}

But what I'm trying to ask is how would you call this array FROM the console? Without adding any extra code to your JS files. I would like to know how to debug prototypes from the console in the browser.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Jason Swetzoff,

you could you the console.log() function to print in the console you parameter, for example, your array like this

var cars = [
"Saab",
"Volvo",
"BMW"
];
console.log(cars);

If you use Firefox you can use tool like Firebug

Jason Swetzoff
Jason Swetzoff
3,104 Points

In the console of web inspector tools I could also just do cars or cars.length() to see the same.

How would I access the array below in the console? 

function Playlist() {
    this.songs = ['Song 1', 'Song 2', 'Song 3'];
    this.nowPlayingIndex = 0;
}
Jason Swetzoff
Jason Swetzoff
3,104 Points
Jason Swetzoff
Jason Swetzoff
3,104 Points

Hey, Gianmarco, actually I think you were right, sorry. this.songs or this would work. You could put Playlist.songs; in the console but it's undefined because the function didn't run. If I'm understanding this right.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Jason Swetzoff,

I didn't answer you because I was looking for a solution.

I'm playing around with the console in Chrome and the only way I find to do what you asked is this:

function Playlist() {
    this.songs = ['Song 1', 'Song 2', 'Song 3'];
    this.nowPlayingIndex = 0;
    console.log(this.songs);
}

and call the function in the console to see what appen.

You don't have to apologize, maybe there's another method that fit your need! :blush:

EDIT:

You can call Playlist().songs; in you console and it return the array... and an error! :sweat: