mozilla firefox developer tools how to get an element xpath

When I do click to expand the dropdown, the image below shows that a new kendo-popup element appears in the DOM (and it contains sub-elements to represent each of the options). At this stage the menu options that will appear when I click on the dropdown don’t even exist in the DOM.

When collapsed it’s easy to inspect the kendo-dropdownlist element (that holds the selected value of ‘Document’. I’m using a 3rd party control for my “Content Type” dropdown (it’s the Kendo UI for Angular library) On the left side of the screenshots you can see the OnePlaceMail (Outlook Add-in) displayed in Chrome, on the right hand side is Developer Tools inspector window. This tip might not work in all scenarios but it has gotten me out of trouble on a few occasions. This often happens with navigation menu options or dropdown controls, where you have the menu options or dropdown options visible on the screen but as soon as you click something in Developer Tools (to go exploring), the menu options or dropdown options disappear and don’t exist on the page anymore! This is usually because an event such as the blur event is fired when you click outside the element and this removes the elements from the page that you are trying to inspect. What I wanted to focus on was those frustrating elements that only exist on the page (in the Document Object Model) while a certain element has the “focus”.

For this tip I’ll assume you are familiar with Chrome Developer Tools for inspecting HTML elements and CSS styles. The Developer Tools in Chrome go a long way to assisting with this.

I still find styling HTML elements difficult at times, trying to figure out where the styling is being inherited from and exactly which elements I need to apply styles to.

Mozilla firefox developer tools how to get an element xpath