Google Chrome developer tools (also known as verification mode) are very useful tools for web developers.
Especially convenient is the display emulation function when developing for smartphones, which displays a pseudo smartphone screen even though it is a PC screen.
Knowing the Google Chrome developer tools will make it easier to edit and debug HTML / CS S and check the display on your smartphone.
This time, we have summarized the basic functions and usage of Google Chrome Developer Tools.
How to use Chrome developer tools
The developer tools are free to use by anyone using the Google Chrome browser.
To use it, right-click the page you want to check, and there is a “Verification” item, so click it.
With the shortcut key, you can start it with [Ctrl + Shift + I (Command + Option + I on Mac)] or [F12] key.
When you start “Verification”, the source code that composes the page will be displayed, so the functions of each item will be explained in numerical order below.
1. Select an element on the home page with the magnifying glass icon
Click the magnifying glass icon, the home page you can select each element on.
The color of the part where the cursor is placed changes, and you can see how each element is composed of the source code.
2. Mobile emulation display switching for smartphones and tablets
Click the smartphone-shaped icon next to the magnifying glass icon to switch the display.
Since emulation display can be performed for each device such as smartphones, mobile PCs, and tablets , device checks can be performed in a simulated manner.
You can select a device from the “Device” pull-down menu in the upper left .
You can choose from a wide range of devices such as iPhone 4-6, iPad, iPad mini, Amazon Kindle Fire, Samsung Galaxy note and Galaxy S4.
By the way, the screenshot image is the iPhone 6 emulation window.
3. Elements panel
The Elements panel can display the source code of the page , and if you want to examine each element in detail, click the magnifying glass icon and click the part you want to examine on the displayed page (shortcut key: Ctrl + Shift) + C Mac: Control + Option + C) Then page corresponding to the source code and the right-hand side “Styles” that make up the CS S is displayed.
It is described in the Styles CS pseudo-display and to write additional code is changed to S.
In addition, you can visually check the margin, border, and padding values of the selected element in “Compted” next to Styles.
It can be used when making fine adjustments to the layout , such as which element contains how much value .
4. Show / Hide Developer Tools Extensions
Click to see the extension at the bottom. It is switched by tabs and divided into “Console”, “Search”, “Emulation”, and “Rendering” tabs.
It is a function for developers such as engineers.
5. Display the advanced settings of the developer tools in the window
Make detailed settings for the developer tools. You can change the environment of the developer tools by changing the operating environment or stopping the function in Google Chrome. In addition, you can make detailed settings such as Workspace settings, on / off of various devices in device mode , and shortcut key settings.
6. Switching the display location of the developer tools
In this image, the tool display was on the right side. You can display it below by using this button. It is best to display this function in a position that is easy for you to use.
This time, we’ve covered the basic features of Google Chrome developer tools.
If you can master debugging and adjustment in Web development, you can develop more smoothly.
You can also use it to make corrections in the preview while actually hearing in front of the customer.
In addition, there are various functions such as checking the display speed.
Among them, the Elements panel introduced this time is a basic function and anyone can use it, so let’s take advantage of it.