Inspecting Web Pages

Creating responsive and adaptive layouts is a crucial aspect of modern web development. We always want a web page that will be accessible on all devices. Fortunately, web developers have access to a robust set of tools built into the web browsers.

Let's consider the Chrome web tools:

Tools

To get access to the responsive tools and start to use them, we need the following:

1. Open developer tools as we did previously. Possible ways are: using a mouse, clicking the right button and clicking the "Inspect" field, or using the keyboard shortcut "Ctrl+Shift+I" (Windows, Linux) or "Command+Option+I" (Mac);
2. Click the 5 icon. We get responsive mode. To close the responsive mode, we need again click the 5 icon.

Additional features:

1. We can change (imitate) the device's width with the help of dragging the 6 element;
2. We can select the definite device with the help of the field 1. There are some widely spread devices that users use the most;
3. We can set the width (field 2) and height (field 3) of the device screen size;
4. We can change the scale (field 4). Generally, it is used when we deal with large values, and we need to see the whole layout;
5. 7 is the viewport. We see the website view for such a width and height screen size.

Note

All modern browsers (e.g., Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) have the same set of tools. There is no difference what browser we select.