6

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?

4 Answers 4

2

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.

3
  • 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. Apr 8, 2011 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. Apr 8, 2011 at 17:01
  • 1
    Is there any way to get the element highlighted without depending on hovering over it? I want to "pin" the highlighting of a specific node, and it's annoying to have to mouse over it and hover every time. Jul 31, 2018 at 15:37
2

Control + Shift + C should fix this. Or you can click the little cursor icon on the top left corner right next to Elements.

1

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>
1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .