Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Undo Google Chrome inspector's magnifying glass tool?

enter image description here

  1. Open the inspector on any element.
  2. Select the Computed tab.
  3. Hover to the left of any style you will see the magnifying glass.
  4. Click the magnifying glass and it will filter the Styles tab to only relevant results.

Now, how do I deselect this feature? The only way I have found is to close the inspector completely and reopen it.

like image 495
o_O Avatar asked Jan 08 '23 07:01

o_O


1 Answers

Clicking the magnifying glass is apparently a shortcut for using the "Find in Styles" feature of the Styles panel. Thus, after clicking it, the item you clicked will appear in the "Find in Styles" field at the bottom of the Styles panel, highlighted in yellow. When you hover over the field, a Ⓧ icon appears at the far right side of the field. Clicking the icon clears the field, and the Styles panel is back to normal.

Here's how it looked in action (see edit below for current location of search filter):

enter image description here

You won't be returned to the "Computed" panel, though.

Edit 2015-09-08:

With some recent update to Chrome, the search field has moved. Now it appears at the top of the CSS column, in the same row as the "New Style Rule" (plus), "Toggle Element State" (pushpin), and "Animations Controls" (stacked diamonds) buttons:

enter image description here

To clear your search, just delete the filter text (e.g., "vertical" as pictured).

like image 104
Dave Land Avatar answered Jan 14 '23 17:01

Dave Land