Posts by Category
Web Programming

Affordable, Professional Web Programmers!
We have a Portfolio of 150+ websites and 100+ mobile apps.

We excel in the following:

PHP, WordPress, Magento, Shopify, OpenCart, Android, IPhone, Woocommerce, Ecommece, html5, PHP web development, WordPress plugin development, Mobile Responsive site development, Bootstrap, CSS, jQuery, Customization of PHP/MYSQL based scripts, Premium themes and templates wordpress, Drupal, shopify, etc.

Need website changes?
Contact us for a quote:
shivam@webmorf.co.uk
 

Full website offer
Web Server Services

Affordable, Professional WebServer specialists!
Over 40 years experience. We can instal any php script.

Fully experienced in:

RHEL, CentOS, CloudLinux, Ubuntu, Debian, FreeBSD and Windows dedicated servers, Azure, Amazon, AWS, Google Cloud, Nginx, Apache, Lighttpd, LiteSpeed, VPS - OpenVZ, KVM, Xen, Hyper-V, SolusVM, ProxMox, Docker, RancherOS, Linux, Cpanel Server Setup, Server Security - csf/maldet, PHP - Script Installation, Custom coding, Laravel Ffmpeg, Youtube Clone installation, WHMCS installation, Windows server setup.

No job too small.
Contact us for a quote:
admin@webmorf.co.uk
 

Make it cheaper...

ebay

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

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!!