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

Posted by Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

How to get to element tag from the js file variable value? as in the video.

The instructor showed when the listItem get a value of a label by clicking on the label the Dev tool jumps to the 'Element' tab directly where the lable is(around 5:07 minute).

I got Chrome 67.0.3396.87 version. In my version it's shows all the object on the side of the line in 'Source' tab not as in the video. And I cannot jump to the 'Element' tab, no link in the object. Does anyone know how to jump to the specific DOM element that should be linked to the variable?

Thank you

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Can you provide a link to the video you're talking about?

7 Answers

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

Link to the video

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The word that the instructor clicks on to jump to the element is only shown while dev tool is paused in the debugger. While it is shown, it works just like in the video.

At other times, those words are not shown so there is nothing to click on.

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

At the same situation as the insturctor but the debugger is not showing any link to the element. I am trying to upload here an image snapshot but I cannot.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The link is only shown when the code is paused by a breakpoint. It does not appear just when examining the code.

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

Yes, I know and I am in Debug mode, but still it is not showing/working in my browser!

Are you also in Debug mode and can jump to the element from JS file? Is it working for you too? what Chrome version you have? are you on Windows or Mac?

Thank you

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Not just debug mode, but paused during execution. I use several different versions of Chrome but all on Windows.

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

I am also in Paused in debugger and not seeing the possibility. Setting the event listener breakpoint to 'control -->change'.

I cannot upload a snapshot here to show you. Any suggestions? solutions? I don't know why for me it's not working if for you is working? Can you upload here a snapshot in your browser?

Thanks

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I think you mean "screenshot" (a "snapshot" is a workspace function), but when I do it, it looks exactly like in the video.

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

Yep.

Any suggestions please? How to get it work ?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I can't seem to replicate the problem. I don't do anything to "get" it to work other than set a breakpoint. When the program pauses, the links appear.

Itzhak Dangoor
seal-mask
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points
Itzhak Dangoor
.a{fill-rule:evenodd;}techdegree
Itzhak Dangoor
Full Stack JavaScript Techdegree Student 4,077 Points

I can get to the element form the 'Scope-Local' in the side bar.

I still don't know why I don't have a direct link to the element panel from the source line code.

What I have done and still not working:

  • uninstalled add-ons to chrome except two ('Pocket' I have saved articles there ...).
  • I restored to default settings of the dev-tools and still the same. Just for knowledge The option to see the values of the variables are in the settings openning window, checking the box for: 'Display variables values inline while debugging'.

If I will have any updated for that I will post you here. Thanks