Installing Web Developer

Another important add-on for Mozilla is Web Developer. We can edit CSS files using this tool and we can also inspect HTML elements with it. Web developer has a collection of features for developers.

1.  Getting ready

Let’s install web developer first. We can add it from this website link: https://addons.mozilla.org/en-US/firefox/addon/60/.

2.  How to do it…

There is an Add to firefox button. Click on the button. It will prompt with an Install Now button.

Click the button. Then the installation will start. To get Web developer in action, we need to restart our browser.

We are going to inspect our project ‘shop’ with Web developer. First, open our site in Firefox. Now, we will use Web developer.

3. How it works…

There are different types of tabs in the Web developer toolbar:

  1. First, we will click on the Image This has different types of properties for image inspection. Now, if we select Display Image Dimension, it will show the size of images.
  2. We can see the file size of each image with the Display Image File Sizes.
  3. We can also examine different attributes of the image To see the image path, select Display Image Path.
  4. We can see all the image-related information in a page by clicking View Image Information. This will show us the image path, height, width, number of images on the page, file size, and the alt attribute.
  5. We have other options to examine the image information on our site, like Hide Image, Hide Background Images, and so on.
  6. Now, we will inspect Information. There are many options in this section:
    • First, is the Display block size. It outlines all our blocks.
    • The next necessary option is Display Color Information under the Information It will open a new tab and show the colours used in this website. So, using this tool, we can understand what colours are used in a website.
    • The View Javascript option will help us examine what JavaScript a site has and also, it is useful to debug a JavaScript error.
    • The View Page Information will show page-related If we want to have some images from other sites, then this is a good tool to use. After clicking View Page Information, click on Media. There, we will see all the images of that page. Select the one you want and click Save as.
  1. Under the Miscellaneous section, we have the Edit Html We can edit our HTML, on the browser, with it. Let’s do something in our project with it. We will wrap the titles with <h1> tag, and see what it shows in the browser. Using this tool, we can easily examine a site’s structure and fix it on the fly.
  2. In the Outline section, we have the Outline Block Level Elements. This gives us the layout structure of a website.
  3. Now comes a very important one, the CSS We can edit CSS using this option. Click Edit css, this will open up a new section in the browser containing all our CSS for the page. We can select the CSS that we want to edit. When we edit, we can see the result of our editing instantly.
  4. The View Style Information option shows us in detail the style information about an If we select the header, it will show the following information. So, when a website catches our eye, we can easily examine their style information with it.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.

Leave a Reply

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