A recent Chrome browser update brought “tab hover cards” which are small boxes that appear when you put your mouse on a tab. These boxes display the website’s “title” tag and domain name, as shown in the screenshot below.
For me, these tab hover cards started to annoy me, as they block part of the address bar, so I disabled them. See down below for steps on how to disable tab hover cards.
Steps to turn off tab hover cards in Chrome
In the address bar, type in: chrome://flags/
Do a CTRL + F to bring up the “Find” search box and type in: Tab Hover Cards
When you find “Tab Hover Cards”, on the right there is a drop-down, change it from “Default” or “Enabled” to “Disabled”, and you are done
Here’s a quick tip that I thought would be helpful for others (and myself in case I forget in the future). I needed to take a screenshot of a website in the Chrome web browser and I remembered there was an option in the Dev Tools to do this but I couldn’t find it.
So I searched around online and found an answer, which is pretty simple and quick without having to install any extensions. Here’s what to do:
Open the Dev Tools (hitting the F12 key)
Press the “Ctrl”, “Shift” and “P” keys at the same time
Scroll down the list and find the light purple “Screenshot” rectangles and click the one with “Capture full size screenshot”
A prompt will come up asking you where to save the screenshot and you are done
I was working on an older site this past week and an issue came up where the IE10 web browser was showing different spacing compared to the Google Chrome web browser. My initial thoughts were to use CSS conditional comments to make a specific class have different padding for IE web browsers.
When building your web site, at some point you should test how your site looks in different web browsers and mobile devices. To do this all you need is the Google Chrome web browser. Follow the steps below to test your site. The below steps were written while using Chrome version 33.0.1750.154. Future updates of Chrome may have the icons or tabs in different places.
In Chrome, open the “Developer tools” via the button with the horizontal lines in the top right corner of the Google Chrome web browser
Now with “Developer tools” open, in the bottom right corner click the round gears icon (the word “Settings” appears when you mouseover it)
In the “General” tab, check the “Show ‘Emulation’ view in console drawer” checkbox and close that overlay
With the “Developer tools” still open, in the bottom right corner click the icon with a greater than symbol and three lines (the words “Show drawer” appear when you mouseover it) and a new tab appears below the “Developer tools”
Click the “Emulation” tab and now you can see how your web site looks in different mobile devices (in the “Device” tab), different screen sizes (in the “Screen” tab), and different user agents/web browsers (in the “User Agent” tab)