And if thou wilt make me an altar of stone, thou shalt not build it of hewn stone: for if thou lift up thy tool upon it, thou hast polluted it.
Exodus 20:25
Google Chrome, Microsoft Edge and other modern web browsers have a built-in Developer tools case that greatly supports the work of any web designer and developer. For example, the page doesn’t look good, I want to change the width of the main content container, change the font size, change the location of the page elements. I expect my CSS code to do one thing, but in practice it turns out to be different – I will track the dependencies of an element in each class. It allows to inspect a JavaScript function behavior, also can check if the server is sending the necessary table data to the page, the page load time, the amount of data transferred between the server and the client, and so on. Also the Developer tools are very useful debugger tool.
To open the Developer tools, open a webpage and right-click on it. From the context menu, select “Inspect” or press Ctrl + Shift + I.
By default, the toolbar opens on the right side of the screen, but you can move it to a convenient location. Click on the three dots the toolbar’s title bar and select one of the possible locations “Undock into separate window”, “Dock to left”, “Dock to bottom”, “Dock to right”. In my opinion, the location below is the most convenient.
Developer tools window with the icons for the window locations
To execute a command or to see a list of all commands, press Ctrl + Shift + P. This will invoke the command menu. Type a command or some string to search.
Inspector list of commands
Command Prompt Actions
For example if you type “theme” inside the field, will see the command to switch the Appearance between dark and light theme. Other useful command is for Disable/Enable JavaScript for debugging purposes. When you disable it, a yellow warning icon “JavaScript is disabled” appears at the Sources section until enable it again.
Developer tools switch theme
Delete the “>” character and type “?” to see the other actions in the command prompt:
- Open File.
- > Run Command.
- ! Run Snippet.
- @ Go to Symbol.
- : Go to line.
There are several main sections in the Inspector, with the structure showed on the left and the properties on the right.
Use the combination of Ctrl + Shift + J to open the Console.
Toggle Device Mode with Ctrl + Shift + M.
Execute Hard reload by pressing Ctrl + F5.
Open a file in a Sources section with a combination Ctrl + P.
Comments