Elements Tab of google chrome tools menu

The first menu of the Google chrome tools menu is the Elements tab of google chrome. Elements show all the content of the website and their style. If you are asking to speak in simple language. Then you will have to read the word Element in school. Elements were teaching in the 10th class science book. At that time the Elements that were telling were those elements (Tatv). This means that hydrogen-nitrogen, such as a part of the science, is related to the website that meets the website, such as content, image, styling, etc. We can see all the things in the Elements tab. Let’s now know the Elements tab very closely.

Element tools in google chrome

First of all, see how the Elements tab is useing. Let’s say you have a website. For example, an image show is being done.

You have to change the colour of the headings on this website. You have to check how many other colors will look like this. So you can check directly from here. And the Elements tab helps you in checking these. Hover over the heading. And right click with the mouse. The page you go to direct will be the Elements tab, something like this will open up the page you have.

You can see that the picture is divided into 3 parts.

  1. In the first part, the first picture with the left hand. Your website will show up. Sometimes it is split from top to bottom, so there is no panic about the image above which the image show will be awesome, the image will be your website image.
  2. In the second part, the first picture means the image will be the source image of your elements.
  3. In the third part, there will be a styling part shown in the first part of the last part and below. Whenever you style the content, the colors, font family, font size, font weight, or whatever you write in the css file, all that is being played in this section.


Inside the Elements tab, you have made a live change and assume that the change is not going to change. In the condition that we do not run the code, we will write (! important) and show the code will run. But as soon as we refresh, the changes you have made will go away. You will have to make changes to your real file for the permanent change.

Now see the right-click option of the Elements tab. In which you will get all these options.

Break on: –

Expand Recursively: – Suppose that you opened the Element tab but at that time only the parent code is going to show. You want the child code of parent code to shows, and then at that time we use Expand Recursively. Under this, you will also have child code for your parent code, for everyone to do the show.

Collapse Children: – Whenever you open the Elements tab, you do not have all the coding at that time, you have to Collapse. The element tab is just showing the parent code at the time of the opening. To see the Particular code, we need to collapse Children. Under this, you will be able to show only the parent code, by closing all the codes that are open to you.

Scroll into View: – Let’s say in the Elements tab you do not know what your cursor is saying. So in the condition; you want to show anybody, hover over the coding and right-click. Click on Scroll into View, you can easily view any code you want to see the show view.

Focus: – Suppose you have to compare a coding with other coding. It is difficult to focus on so much coding. In that situation, we use Focus. Which will work for you as a high light?

Leave a Reply

Your email address will not be published. Required fields are marked *