Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.
up vote 0 down vote favorite
1

Somehow I turned off the highlighting in Chrome Developer Tools, so now when I select an element in the Elements panel, I don't see the element highlighted on the page. There must be a keyboard shortcut I pressed accidentally that toggles this. Does anyone know what it might be, or if there is some other way to turn the highlighting back on?

share|improve this question

3 Answers

up vote 1 down vote accepted

When you hover your mouse over the node (not select it) in the Elements panel, the corresponding element on the page should be highlighted.

If there were such an option to turn this behavior off, it isn't listed in the Keyboard Shortcuts. Also refer to Elements Panel for more information on how to inspect everything in the DOM tree.

share|improve this answer
1  
That is the expected behavior but it is not happening. I now realize that the problem is limited to one page--the one I'm working on, of course. It is an HTML5 Wordpress page that gives strange validation errors. The hover behavior works fine on a non-validating HTML 4 page I checked for comparison. I agree that it appears you can't turn this on and off (though it would be a nice option to have). The problem is not with the tools, it's somewhere in the code. – David Rhoden Apr 8 '11 at 11:51
In case anyone stumbles on this question with a similar issue, I commented out the <source> tags in my HTML5 <video> element, and the hover behavior returned to normal. – David Rhoden Apr 8 '11 at 17:01
up vote 1 down vote

I found myself in the same issue, it was caused after calling canvas.getContext('2d'); Tested on Chrome 11 and 12 and worked fine, the problem come with Canary (13 right now), test with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script type="text/javascript">
            load = function() {
                document.getElementById('canv').getContext('2d');
            }
        </script>
    </head>
    <body onload="load();">
        <canvas id="canv"></canvas>
        <div>You can't highlight me! :(</div>
    </body>
</html>
share|improve this answer
up vote 1 down vote

I noticed this issue after I turned on some experimental features in about:flags. Once I turned off "GPU compositing on all pages", dev tools started to work again as expected. Other features might break it as well, but that was the only one I noticed.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.