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
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 PointsDifficulty following the video - Chrome Dev Tools looks and behaves differently than in the video.
I understand that Chrome dev tools has been updated probably several times since this video was made and this is likely what's making this confusing, per some of the other questions in this thread.
When I try to follow Joel in the video and start to examine the label element and the DOM around 5:32, it quickly becomes hard to follow. Chrome dev tools doesn't provide a link to the DOM for label on my end as it does in the video. I'm stuck trying to figure out what he's teaching while simultaneously trying to follow along and understand the gist.
Also, when I try to paste in (following the video at 6:28)
listItem = checkbox.parentNode.parentNode
in the console, I get the following error:
VM337:1 Uncaught ReferenceError: checkbox is not defined at <anonymous>:1:1 (anonymous) @ VM337:1
This is different than what happens in the video. Similarly, the console shows a message at the top:
[Violation] 'change' handler took 80567ms
before anything is added.
I'm a bit confused. I feel like I'm having to debug the video and not the JS files!
1 Answer
Lee Vaughn
Treehouse TeacherHi Nick Huemmer!
Being able to click on "label" would be a more convenient way to get there but since that doesn't work you can also click on the Elements tab and view the element that way. From that tab you can either open up the different elements until you get to the label element you are looking for or you can click on the Inspect icon towards the left of the Elements tab and click directly on the element on the page you want to inspect to view it.
As for using the console to log out listItem = checkbox.parentNode.parentNode that part works just like in the video for me. My guess is that you have the breakpoint on the wrong line. If you try to log that out before you get to line 69 it will return undefined.
I hope that helps!
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 PointsNick Huemmer
Front End Web Development Techdegree Graduate 26,840 PointsYes, that helps. Being new to it confused me a bit, but after probing around and trial and error I was able to discern what was going on.
Thanks for your help!