Contents  >

Working with Web Browsers

Learning Goals

At the end of this Tutorial you will be able to:

Contents

About Web Browsers

Installing Google Chrome

Installing Mozilla Firefox Developer Edition

Displaying the Developer Tools (DevTools) window

Positioning (docking) the DevTools window

Viewing HTML and CSS source files

About web browsers

A web browser is a software program that gives you access web pages on the Internet. With a web browser, you can display text and images, view videos, listen to audio podcasts and music, exchange emails, and purchase products and services.

According to StatCounter, the most widely-used web browsers in May 2019 were as follows:

In these Tutorials, we will use the two web browsers popular with web developers and designers: Google Chrome and Mozilla Firefox Developer Edition.

Default web browsers

Computers running Microsoft Windows and Apple devices come with a default web browser pre-installed:

Unless you change your default web browser, your Windows PC will display web pages with Microsoft Edge and your Apple device will use Safari.

Microsoft Internet Explorer

Developed and now abandoned by Microsoft, Internet Explorer was a web browser generally regarded as limited and flawed. Since 2016, Microsoft has recommended using its newer Microsoft Edge web browser instead of Internet Explorer.

Installing Google Chrome

Google Chrome is the world’s most popular web browser and is installed by default on most Android-based mobile phones. Follow these steps to download and install Google Chrome on your computer.

  1. Use your web browser to go to this web address:  https://www.google.com/chrome
  2. Click the button named Download Chrome. Tutorial Web Browsers: Google Chrome Download
  3. Accept the Google Chrome Terms of Service by clicking the Accept and Install button. Tutorial Web Browsers: Google Chrome Install
  4. Follow the usual download and installation instructions for your computer.

The Google Chrome web browser will install and then open on your computer.

Setting Chrome as your default web browser

Follow these steps:

  1. At the top-right of the web browser window, click the vertical ellipses (three dots) icon.
  2. From the dropdown menu now displayed, click the Settings command.
  3. Chrome opens a new tab. Scroll down to the Default browser section and click the Make default button. Tutorial Web Browsers: Google Chrome Default  This button is displayed only if Chrome is not already set as your default web browser.
  4. You can now close the Settings tab.

Installing Mozilla Firefox Developer Edition

The Firefox Developer Edition is a version of the Firefox web browser from Mozilla that is intended for web developers and designers. It includes the latest features that are later fully tested and included in the regular version of Firefox. It also offers default preferences tailored for those who build and design web pages.

You can install and use both the regular and Developer versions of Firefox on your computer.

Follow these steps to download and install Mozilla Firefox Developer Edition.

  1. Use your web browser to go to this web address:  https://www.mozilla.org/en-US/firefox/developer/
  2. Click the button named Firefox Developer Edition Tutorial Web Browsers: Firefox Download Firefox will begin downloading the version suitable for your computer and operating system.
  3. Follow the usual download and installation instructions for your computer. Tutorial Web Browsers: Firefox Install

The Firefox Developer Edition web browser will install and then open on your computer.

Display the Menu Bar in Firefox Developer Edition

You will find it easier to use Firebox Developer Edition if you display the Menu Bar that is hidden by default. Here are the steps:

  1. At the top-right of the Firefox screen, click the hamburger (three lines) icon to display a dropdown menu of options. Tutorial Web Browsers: Firefox Menubar 1 From this menu, choose the Customize command.
  2. Along the bottom of the next screen, you can see a number of options. One is a dropdown list named Toolbars. Tutorial Web Browsers: Firefox Menubar 2 Click on Toolbars and then click the Menu Bar option to select it.  When finished, click the Done button at the bottom-right of the screen.

You can now see that the Menu Bar, with its various menus of commands, is visible at the top of the Firefox screen.

Tutorial Web Browsers

As a web developer and designer, the Menu Bar options you will use most frequently will be those available with the Tools | Web Developer command.

Tutorial Web Browsers: Firefox Menubar 3

For Apple Mac users, see the instructions below:

Restore the Menu bar in Firefox

 

Setting Firefox as your default web browser

Follow these steps:

  1. At the top-right of the web browser window, click the hamburger (three lines) icon.
  2. From the dropdown menu now displayed, click the Options command.
  3. Firefox opens a new tab. In the General section at the top, click the Make default button. Tutorial Web Browsers: Firefox Default  This button is displayed only if Firefox is not already set as your default web browser.
  4. You can now close the Options tab.

Displaying the Developer Tools (DevTools) window

Developer Tools – commonly known as DevTools – are tools built into web browsers that enable developers and designers to view and edit the properties of any displayed web page. Typically you will use DevTools to:

Tutorial Web Browsers: DevTools

DevTools appear in a window typically located at the bottom or right of your web browser. You can position or ‘dock‘ the DevTools at whatever screen location you wish. Two points to note about DevTools.

In web browsers, there are two main ways to display DevTools: the Inspect Element command, and via an icon at the top-right of the web browser window.

DevTools: the Inspect Element command

If you are focused on a particular element of a web page, such as an image, a heading or other block of text, you can:

Tutorial Web Browsers: DevTools

The DevTools window is now displayed with the properties of the selected web page element highlighted.

DevTools: the dropdown menu

At the top-right of the web browser window in Chrome or Firefox is an icon that, if clicked, gives you access to various additional features such as DevTools.

In Google Chrome, follow these steps:

  1. At the top-right of the web browser window, click the vertical ellipses (three dots) icon.
  2. From the dropdown menu now displayed, click the More tools command.
  3. From the sub-menu now displayed, click the Developer tools command.
Tutorial Web Browsers: DevTools Chrome

In Mozilla Firefox, follow these steps:

  1. At the top-right of the web browser window, click the hamburger (three lines) icon.
  2. From the dropdown menu now displayed, click the Developer Tools command near the bottom.
  3. From the sub-menu now displayed, click the Toggle Tools command.
Tutorial Web Browsers: DevTools Firefox

Mozilla Firefox now displays its DevTools window. Another option in Firefox is to choose the Tools | Web Developer | Toggle Tools command from the Menu Bar at the top of the web browser window.

Positioning (docking) the DevTools window

Web browsers allow you to position (‘dock’) the DevTools window at various locations within the main web browser window. You can change the DevTools docking location at any stage.

In Google Chrome, follow these steps:

  1. At the top-right of the DevTools window, click the vertical ellipses (three dots) icon.
  2. Choose your required location for the DevTools window from the list of docking options displayed.
Tutorial Web Browsers: Docking Chrome

In Mozilla Firefox, follow these steps:

  1. At the top-right of the DevTools window, click the horizontal ellipses (three dots) icon.
  2. Choose your required location for the DevTools window from the list of docking options displayed.
Tutorial Web Browsers: Docking Firefox

Viewing HTML and CSS source files

You can use a web browser to display the underlying HTML and CSS code for a web page. Here is an example:

  1. Use your web browser to go to this web address:  https://www.citizensinformation.ie
  2. Right-click anywhere on the web page. From the pop-up menu displayed, choose the View Page Source command Tutorial Web Browsers: Page Source You can now see the HTML code of the web page in a new tab of your web browser. Tutorial Web Browsers: Page Source Menu
  3. Web pages are typically linked to one or more stylesheet files that control their visual appearance – such as the position of various elements, their fonts and colours.  Stylesheet files are included near the top of the HTML code in the <head> section, and their file names end in .css. You will also see that they are shown as clickable hyperlinks.  In this example, you can see two stylesheet files, named print1.css and screen1.css. Tutorial Web Browsers: Page Source
  4. Click on the second stylesheet, screen1.css Tutorial Web Browsers: Page Source You can now see the content of the stylesheet.


Return to Contents.