Download Using Browser-Based Web Developer Tools

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
1
1
2
2
1
2
2
1
1
2
1
2
2
2
3
@I2@ INDI
REFN 2
NAME George /Bezanson/
GIVN George
SURN Bezanson
NAME John George //
GIVN John George
_SDATE 27 AUG 1770
SEX M
CHAN
DATE 11 JAN 2016
BIRT
DATE 16 MAY 1781
_SDATE 16 MAY 1781
SOUR @S1@
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.
<td>
<center>
<input value="Gold Form"
onclick="window.location=GoldURL();"
type="button">
</center>
</td>
<td>
<center>
<input value="White Form"
onclick="window.location=GoldURL();"
type="button">
</center>
</td>
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 rightclick 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 rightclick 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.
HTML for page
Current
element
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