Posts by Category
Full website offer

How to open the element Inspector in Chrome

web inspector

Knowledge is relative and there is no person that knows everything!

Opening the web element inspector may seem basic knowledge if you already know about it but if you’ve never used it before or are new to computing and the web, it may not seem that simple. However, it really is this easy…

  1. Highlight the element of the webpage that you want to inspect.
  2. Right click on the mouse to open the context menu
  3. Click on ‘Inspect’

It’s that easy.  Of course you need to know what all the code means before you can modify it.

What is the element inspector?

The element inspector, often called the web inspector is an open source web development tool that is built into many browsers.

Different browsers use different methods to open it but where Chrome is concerned, you just left click on any part of the website and ‘Inspector’ will be part of the context menu.

What do you do with it?

You use it to inspect the code used to display all the elements on a webpage.  You can figure out problems with these elements (debug) or analyse the existing code used in the webpage and improve it or use it as a code modification tool, in order to ascertain what code to implement into the website to make the changes you require.

For example, you might be looking at one of your webpages and decide to alter a margin or a text colour etc.

There are two main ways to open the inspector to display the right code.  Either highlight the content if you can, such as in the case of text, and right click to open the menu or simply right-click in the area that you want to inspect.

The context menu on a right click displays the inspector option (although there are a few occasions that it doesn’t such as in the case of flash or animated content etc.

While writing this post, if I highlight ‘this piece of text’ and right click I get the following menu:

Open the web inspector
I have highlighted the Inspector option and when clicked, it opens the Inspector window, as below.

Web inspector window

Opening the window is that simple.  Understanding the code is something else!

If I look at the window on the right it displays information about that piece of text that I highlighted.  For instance, I can see that the font is size 16 and that the font colour is #333.

If I wanted to make the text another colour, I would simply change the #333 to the colour I wanted and this would reflect on the webpage.

This doesn’t make the change permanently… otherwise, anybody would be able to change anyones website!  It just applies that code change until the window is refreshed.  But, where modifications are concerned, if you like the look of the temporary changes you have made, you have the option of copying the code you altered and pasting it into a styling sheet (i.e. style.css) which will make the change permanent.

This post is simply to explain how to open the inspector in Chrome.  The options available once you have opened it are endless and range from simple modifications to text/layout etc to complex debugging scripts.

The Inspector can be a great learning tool and is invaluable in trying to figure out bugs with webpage content.

Regards
Daniel
WebMorf

Related Posts...

Building a niche site How to build a niche site Building a niche site is not complicated as long as you set a plan, keep to a few simple rules and ‘know’ about the elements you’re going to work with. If you know about the internet, websites and marketing, you’ll realise there are no secrets to building any site, however, if I had to name just two elements which will make any project work, it would be;  Motivation and...
Free website tools Free tools for any office or web business Free programs, tools and applications are widely available all over the internet nowadays and these cover just about anything you might ever need to do in any internet or office based environment but you have to choose wisely. You have to be very careful when choosing free stuff off the internet.  Free sounds great but sometimes some are not up to the ...
Website Backlinks Back-links: Still a top factor in page ranking! Backlinks – A few ideas Back-links are still one of the top factors that affect search engine rankings (and therefore SERP’s) and also one of the best ways to get referral traffic.  There are many ways to get back-links, but not so many to get good, appropriate back-links.  Nowadays, more than ever before, it ‘does’ matter where the links to your s...
Bad Webpage Design A.K.A. How to make your website naff! This post refers to business sites, whether they are ecommerce sites or simple niche web pages. I was doing some research this week and in the process came across some terrible websites (from a business point of view). The owners don’t think they are terrible of course, they probably think they look great or they wouldn’t have made them like that. T...

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
DanielGerlLan Recent comment authors
  Subscribe  
Notify of
GerlLan
Guest
GerlLan

That’s how it is!

I did not know, thank you webmorf.co.uk always good information!

I’m here in the new year made pharmaceuticals Shop ttps://buy-xanax-online-24h.com/en/products/buy-tramadol-250mg.html , you can look at and say good or bad?

Daniel
Guest
Daniel

Saw that GerLan… bit expensive!!