Home

Dev tools: highlight elements (Ctrl-Shift-L)

%3CLINGO-SUB%20id%3D%22lingo-sub-553564%22%20slang%3D%22en-US%22%3EDev%20tools%3A%20highlight%20elements%20(Ctrl-Shift-L)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-553564%22%20slang%3D%22en-US%22%3E%3CP%3EWhat%20happened%20to%20the%26nbsp%3B%3CEM%3EHighlight%20elements%3C%2FEM%3E%20button%20that%20used%20to%20be%20in%20the%20top%20left-hand%20corner%20of%20the%26nbsp%3B%3CEM%3EElements%26nbsp%3B%3C%2FEM%3Ewindow%20(to%20the%20right%20of%20the%20%3CEM%3ESelect%20element%3C%2FEM%3E%20button)%3F%20I%20use%20it%20all%20the%20time%20to%20see%20which%20element%20is%20which%2C%20but%20now%20when%20I%20click%20on%20its%20replacement%2C%20something%20altogether%20different%20happens.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20205px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F112763i4AF5EBF45FBCD156%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22EA-DT-highlight-element.png%22%20title%3D%22EA-DT-highlight-element.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%20A%3C%2FSPAN%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-left%22%20style%3D%22width%3A%20205px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F112764iCCBA6DA5414C7A08%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22ED-DT-highlight-element.png%22%20title%3D%22ED-DT-highlight-element.png%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EEdge%20D%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-554207%22%20slang%3D%22en-US%22%3ERe%3A%20Dev%20tools%3A%20highlight%20elements%20(Ctrl-Shift-L)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-554207%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F9548%22%20target%3D%22_blank%22%3E%40Noel%20Burgess%3C%2FA%3E%26nbsp%3BThanks%20for%20the%20question.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20Chromium%20based%20Edge%20includes%20the%20Chromium%20based%20DevTools.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EElement%20highlighting%20happens%20by%20default%20when%20you%20hover%20over%20HTML%20elements%20in%20DOM%20Treeview%20and%20when%20you%20use%20they%20Select%20Element%20button.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20button%20to%20the%20right%20of%20the%20Select%20Element%20button%20toggles%20the%20Device%20Toolbar.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHope%20that%20helps!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-580834%22%20slang%3D%22en-US%22%3ERe%3A%20Dev%20tools%3A%20highlight%20elements%20(Ctrl-Shift-L)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-580834%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F339318%22%20target%3D%22_blank%22%3E%40paulgildea%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESorry%20I%20missed%20your%20reply%2C%20and%20thanks%20for%20the%20info.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20was%20working%20on%20a%2010%22%20tablet%2C%20and%20so%20in%20full%20screen.%20When%20I%20switched%20from%20DT%20to%20the%20page%2C%20there%20was%20no%20highlighting.%20Thanks%20to%20your%20info%2C%20I%20now%20see%20that%20it%20only%20happens%20when%20both%20are%20visible.%20This%20is%20different%20in%20Edge%2C%20where%20the%20element%20I%20point%20at%20in%20DT%20is%20highlighted%20when%20I%20switch%20to%20the%20web%20page.%3CBR%20%2F%3E%3CBR%20%2F%3EClicking%20the%20%3CEM%3ESelect%20element%3C%2FEM%3E%20button%20in%20Edge%20DT%20automatically%20switches%20me%20to%20the%20web%20page.%20This%20doesn't%20happen%20in%20Dev%20or%20Canary.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EJust%20another%20couple%20of%20small%20differences%20to%20get%20used%20to.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAs%20an%20aside%2C%20I'm%20astonished%20by%20the%20amount%20of%20well-organized%20detail%20available%20in%20the%20Chrome%20DT%20-%20far%20more%20than%20I%20suppose%20I'll%20ever%20understand.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Noel Burgess
Contributor

What happened to the Highlight elements button that used to be in the top left-hand corner of the Elements window (to the right of the Select element button)? I use it all the time to see which element is which, but now when I click on its replacement, something altogether different happens. 

 

EA-DT-highlight-element.pngEdge AED-DT-highlight-element.pngEdge D

2 Replies

@Noel Burgess Thanks for the question.

 

The Chromium based Edge includes the Chromium based DevTools. 

 

Element highlighting happens by default when you hover over HTML elements in DOM Treeview and when you use they Select Element button.

 

The button to the right of the Select Element button toggles the Device Toolbar.

 

Hope that helps!

@paulgildea 

 

Sorry I missed your reply, and thanks for the info.

 

I was working on a 10" tablet, and so in full screen. When I switched from DT to the page, there was no highlighting. Thanks to your info, I now see that it only happens when both are visible. This is different in Edge, where the element I point at in DT is highlighted when I switch to the web page.

Clicking the Select element button in Edge DT automatically switches me to the web page. This doesn't happen in Dev or Canary.

 

Just another couple of small differences to get used to.

 

As an aside, I'm astonished by the amount of well-organized detail available in the Chrome DT - far more than I suppose I'll ever understand.