Using Browser-Based Web Developer Tools Learn some of the tricks that developers use to work with HTML, CSS styles, and Javascript

Desktop Programs When you install a desktop program, you can’t “look inside” it to see how it works. You see the user interface—the windows, buttons, checkboxes, and other controls—for the program, and you might be able to inspect data files related to the program, but the logic of the program is hidden from view.

Desktop application example: GedSite, my unreleased GEDCOM to HTML program: Some GEDCOM data: 0 INDI 1 REFN 2 1 NAME George /Bezanson/ 2 GIVN George 2 SURN Bezanson 1 NAME John George // 2 GIVN John George 2 _SDATE 27 AUG SEX M 1 CHAN 2 DATE 11 JAN BIRT 2 DATE 16 MAY _SDATE 16 MAY SOUR 3 PAGE 2, 5

Web sites are different Some simple web pages are just content. Some web pages include some scripts to provide functionality as well as content. Some web pages include complex scripts to provide full-featured “web applications”. In all cases, a lot of the behind-the-scenes data is available to anyone who can access the page.

A simple page Here is a portion of an overview page for Steve Morse’s Ellis Island search pages. This is one user interface presented on his site. Unlike the user interface for a desktop application, you can see how the user interface for the page is built if you want to take a look.

The HTML Source Here’s a portion of the HTML for Steve Morse’s Ellis Island overview page. I’ve highlighted some of the items that are visible in the previous screenshot. <input value="Gold Form" onclick="window.location=GoldURL();" type="button"> <input value="White Form" onclick="window.location=GoldURL();" type="button">

How did I access the HTML for the page? All the major web browsers (Firefox, Chrome, and Internet Explorer) include a “view source” function that provides access to the HTML for a page. View Page Source is on the right- click menu in Firefox. Chrome and IE have similar commands on the right-click menu.

The way of the web Web sites don’t provide access to the HTML source of the page as a favor to people browsing the site. They do it because HTML is the language of the web, and web sites have to send the browser HTML, they have no choice.

Why look at the source? Reading the HTML source of someone else’s page is a great way to learn how HTML works. If you are trying to achieve something in an application that creates HTML for you, and not getting the results you want, reviewing the HTML source can help you determine why. Curiosity. Curiosity may have killed the cat, but it won’t break any web pages.

“View source” is pretty limited View source is read-only, you can’t change anything. Some pages block easy access to the source by intercepting the right- click menu. It’s tedious and/or inconvenient to view anything except the HTML, like the CSS styles or the Javascript.

Beyond “View Source”: Developer Tools All major browsers include “developer tools” that are accessed via the [F12] key. The details vary, but all the developer tools suites include the ability to view and edit HTML, CSS styles, and Javascript. For the average person, the developer tools can simply be a better version of “view source”. For people who are creating HTML pages, they can be much more than that.

How to access the developer tools You can press [F12] to open the developer tools panel. [F12] opens the developer tools panel focused on the current page. You can right-click and select “Inspect Element” (Firefox and IE) or “Inspect” (Chrome). Inspect element opens the developer tools panel focused on the HTML element under the cursor, i.e., it’s more specific.

Use “Inspect element” as a shortcut for viewing the HTML source of a particular part of a page

Developer tools typically open as a panel in the current browser window

Make the panel wide enough so you can see all the icons at the top

Developer tools reveal which CSS styles apply to an element. Current element HTML for page CSS for current element

You can disable CSS parameters The current element:Some of the CSS for that element:

Disabling background-color The current element, before and after: Background-color unchecked:

Changing background-color The current element, before and after: Background-color changed to yellow:

All styles that apply