The average internet user is probably not aware of it, but the web browser Google Chrome is much more than just a program to use the internet. In this article, we’ll take a look at its hidden developer options. That sounds complicated, but a wide audience can benefit from it! Watch.
Start Google Chrome, go to the menu Settings, More Tools and to Developer tools. You can also press Ctrl + Shift + I press, but with function key F12 it just goes a little faster. Windows appear on different sides that allow you to peek behind the web browser screens and give Google Chrome special commands. To get started, take a look at the menu option Dock side, because with that you determine the position of that window; top, bottom, left or right.
There are a lot of options out there, but we’ll focus on a small part of it that you will really enjoy. We look in particular at the choice Run command and the corresponding key combination Ctrl + Shift + P. This ensures that a kind of command line pops up with which you can give Google Chrome concrete commands and with which you can scroll through a pull-down menu with options.
Indeed, a lot of options. We focus on the most useful commands!
Screenshots of websites
Start typing the keyword screenshot. In the pull-down list of commands, this quartet eventually remains:
Capture area screenshot: A cursor appears with which you can indicate exactly which part of the page you want to keep. This is meant to keep only the most necessary footage, and cutting afterwards is no longer necessary.
Capture full size screenshot: The complete web page is saved. With that you have everything in one go.
Capture node screenshot: An element selected with the help of the so-called Inspector is individually written. With that you can, for example, still get hold of that one picture.
Capture screenshot: Whatever you currently have in the web browser will be saved. This is more or less the standard screenshot, but without annoying borders.
Switch between mobile and desktop site
Most modern websites have a desktop version and a mobile version. As a web builder you want to be able to test web pages in both ways and as a visitor you sometimes have a website of which the mobile version is simply easier to read.
Google Chrome has some commands related to this. Browse the pull-down menu or use mobile as keyword:
Show / Hide device frame: Where applicable, you will get a preview of the mobile device you have set up.
Show / Hide rulers: To show or omit the ruler. This is intended as a tool for the developers who insist on working pixel perfectly.
Show / Hide media queries: To indicate when special CSS elements are used. This usually has to do with the width of the screen.
Toggle device toolbar: You can also use the key combination Ctrl + Shift + M to switch between the normal and the mobile version of the website.
Reload website
Sometimes it seems like a web page hangs or refuses to load properly. You usually reach for the key combination Ctrl + Shift + Delete to discard internet history, then try to load the same web page again. You can also use one of these two commands that you will see when your navigation used as keyword:
Hard reload page or Ctrl + Shift + R: The browser cache for the current page is cleared and the page is read again.
Reload page or Ctrl + R: The current page is reloaded, but the existing cache for this current page is taken into account.
Other options
Now use the keyword network to see what commands are left in the pull-down menu. Finally, we mention the following options:
Go offline: This removes Google Chrome from the Internet. The web browser will work offline from that point on. Can be very handy for security reasons!
Go online: This puts Google Chrome back on the Internet. You are then back online as usual.
Block ads on this site: To block where possible ads shown on the current website.
Enable / Disable cache: Allows you to enable or disable the Google Chrome cache. Browser cache speeds up the browsing experience, but sometimes also creates ‘noise’.
Show search: Opens a special search window that allows you to search a web page behind the scenes; for example to invisible HTML comments.
.