This has happened to me enough times now that I would think of publishing the issue and its resolution in a blog post. And the issue relates to inspecting elements on a web-page using Internat Explorer 9’s Developer Tools.

Every now and then when I need to debug a Html or Css issue with IE, and open up its Developer Tools console, nothing happens when I click the “Select element by click” button on the Developr Tools toolbar and hover over the page. The element on the page under the mouse does not get highlighted as you would normally expect, and neither does it gets selected when you click it (Chrome Developer Tools are ages ahead than its IE’s counterpart in terms of functionality and developer productivity).

IE Dev Tools Select Element does not workNotice in the adjoining screenshot that I have clicked the option to “Select element” on page and currently hovering over the page (the mouse pointer was not captured by Windows PrntScrn in this screenshot), but not a single element on the page is highlighted.

The initial times I faced this issue, I tried to close and re-open Developer Tools but that did not help. I closed and re-started Internet Explorer itself, that sometimes resolved the issue and sometimes not. On many occasions, I had to reboot the machine itself to get the IE Dev Tools help me inspect elements on the page.

Then somewhere in between, I hit the jackpot. As I was facing this issue on one occasion, I wanted to press F5 on the main browser window but accidently pressed F5 in Dev Tools itself. I appeared to me that something changed in Dev Tools. I tried clicking the “Select element” option again from the Dev Tools toolbar, and when I hovered over the page, voila, the page elements were getting highlighted properly and selection on clicking an element worked too.

I face this issue regularly when debugging complex ExtJs UI css issues in IE, especially when IE 9 Dev Tools are made to run in IE 7 Browser mode. In almost all instances when I face this issue now, pressing F5 in Developer Tools resolves the issue and I can now select an element on page after that (pressing F5 in IE Dev Tools does not reload the page as it does in Chrome Dev Tools).

Before pressing F5, I sometimes need to first unclick the “Select element” on page toolbar button, then press F5 and then click it again to make it work. While on other occasions, simply pessing F5 makes Dev Tools work properly without requiring unclicking and re-clicking the “Select element” button.

On a very minority of cases, even F5 does not work for me. Those times, I have resorted to going into Dev Tools’ Tools menu -> Outline Elements -> Entered ‘div’ as selector, and closed the “Outline element” window. Then go back again in it, press the “Clear All” button and close the window again to resolve issues with Dev Tools element selection not working.

It seems a completely random issue to me, whose probability of occurence increases as the UI complexity on the web-page increases.