How to disable the new inspector tooltip in the devtools? - google-chrome-devtools

In the latest Chrome version (73.0.3683.86) there is a new feature which adds a tooltip to the Inspector tool which shows information about the hovered element. (see screenshot)
The question now is whether someone has already found out if this function can be disabled.

Very annoying. I don't believe you can disable it at the moment but if you hold down Ctrl/Cmd you can move around the page without it showing up.

Related

How can I remove explorer listitem hover tooltips in VS Code?

I want to remove this suggestion in VS Code which comes on hover, as it disrupts my scrolling.
That area of the UI is called the explorer. What you're seeing is generally called a "tooltip" in UI terminology. Looking through the available settings at the time of this writing, I do not see a setting to disable tooltips for the explorer listitems.
I looked through settings containing "tooltip" and ones starting with explorer. and workbench.list. and didn't find such a configuration point.
If you open the developer tools with the Developer: Toggle Developer Tools command, you'll see that that particular tooltip is just implmeneted with the HTML title attribute. The way that it is rendered is up to the browser, which in this case is chromium, and the particular style it appears in differs by platform / OS.
You might be able to write an extension that removes those title attributes.

VS Code QuickFix Menu selected item frame is not visible

I am using VS Code 1.71.2 (newest). Before update I used cmd + . shortcut to open QuickFix Menu, up / down arrows to navigate on it and enter to accept selected item. In 1.71 version Visual Studio Code provided many new things and one of the changes was QuickFixMenu - 1.71 verion.
After upgrade, I am not able to do this action.
After using cmd + . shortcut QuickFix Menu opens, but I cannot use up and down arrows for navigating. Enter shortcut works. It is interesting that up and down arrows work (it changes the selected item) but I cannot see the selection frame, so it is not possible for me to know what QuickFix Action I am currently selecting. Please take a look at the screen-shot - the frame of the selected item is not visible.
NO SELECTION FRAME
EXPECTED SELECTION FRAME
Interesting fact, this frame is visible when mouse hover on the specific list item.
What steps I did:
reinstall of VS Code,
removing all my shortcuts from keyblidings.json,
In upgrade the selectNextCodeAction was changed, so I checked in DefaultKeyBlidings weather it is correct,
Any ideas why this selection frame in QuickFix Menu is not visible?
Fixed!
It was fixed here
Go to Preferences: Color Theme and change it.
Problem occurs only while using Dark High Contrast

How to find grid badge when debugging gird layout in google chrome browser developer tools?

I'm learning to debug grid layout. Here is the article about it: https://developers.google.com/web/tools/chrome-devtools/css/grid
Here what says Chrome DevTools guide.
The issues comes on the very first stage - I cannot find grid badge on my Elements panel in DevTools.
I've already checked on Windows and MacOS, I seems like it's not connected to OS.
Does anybody know how to turn it on?
Maybe I need to change my browser settings?
I had the same problem and fixed it by chance by doing this:
Open DevTools settings
On Preferences go to the Elements section
I had all selected, except Show rulers and Show agent shadow DOM so I selected them too.
It worked! The Grid label started to appear on grid elements and could on Elements
The thing is that I deselected again Show rulers and Show agent shadow DOM to discard which of them was the one that activated the Grid label but then the Grid label didn't disappear. That's why I said I fixed it by chance.

Do not show user input in console autocomplete

Recently, I have noticed that Google Chrome's JavaScript console autocompletes previously inputted commands. For example:
I want to remove this feature because the autocomplete displays variables that may not exist. Is there a way to remove this feature?
Yes. A lot of people found it annoying, so they added a setting to disable it.
First, enter the DevTools settings from the menu button in the top right corner.
Then, in the "General" section, disable "Autocomplete from history".

Is there a way to search/filter properties in Styles pane of Google Devtools?

On the Elements tab 'Find' functionality (cmd+F/ctrl+F) doesn't search through styles pane. Is there a way to type CSS property with HTML element selected and find it quickly in the Styles panel?
Bottom right corner, light gray text says "Find in styles". Click there and enter your search.
Unfortunately, such functionality does not exist in current Chrome Dev Tools.
But its present in Opera Dragonfly and its very handy, so, probably Chrome will copy it, eventually (but no such feature request exists in bug tracker now).
On the latest Chrome on Mac, I'm getting the filter at the top of the styles pane. I can't believe that I never noticed it given that I've needed it so many times!
Try using CTRL+Shif+F on the Elements tab