Documentation – Debugging the website

Things go wrong.  Items don’t show where or as they should, or are missing completely.  Links don’t work.

These are just a few of the very many things that can go wrong.  This pages summarizes some techniques and tools that will help you to keep this site looking great.

Link checking

Visit this page to learn how to look for broken links.

Syntax checking

Even if things look OK, there may be errors in the HTML or the styling rules (CSS). Certainly if things don’t look right, the syntax may be to blame. Here’s what to do:

Checking the HTML for a page

A very good program for checking a web page’s HTML is available from the World Wide Web Consortium. Follow these steps to check a page:

  1. While logged in to edit the website, go to the page you want to check.
  2. Ensure that you are in HTML mode tab mode.
  3. Block the complete HTML (ctrl-a), and copy it to the clipboard (ctrl-ins).
  4. In a separate window or tab, access the World Wide Web Consortium’s HTML validator.
  5. Click Direct input button.
  6. Paste (shift-ins) the contents of the clipboard into the large text block.
  7. Click more options.
  8. Click (turn on) code fragment option.
  9. Click (turn on) show source checkbox.
  10. Click check button. The validator will now check the HTML.

You can ignore anywarning level issues messages, but you should fix anyerrrors messages. The error is identified in the CSS listing in yellow, and the location in the HTML code can be viewed by scrolling down to where the HTML code is displayed. After fixing any errors, repeat the steps above to verify that the web page is now OK.

Checking the site’s CSS

The CSS (cascading style sheet) for the IDRC alumni website is located here: /wp-content/themes/idrc-alumni/idrc.css. This usually isn’t changed, unless a new design or layout feature is added to the site. To verify that it is OK, follow these steps:

  1. View the CSS.
  2. Block the complete CSS (ctrl-a), and copy it to the clipboard (ctrl-ins).
  3. In a separate window or tab, access the World Wide Web Consortium’s CSS validator.
  4. Click Direct input button.
  5. Paste (shift-ins) the contents of the clipboard into the large text block.
  6. Click check button. The validator will now check the CSS.

You can ignore any warning level messages, but you should fix any error messages. The error is not that easy to find. It may be easiest to copy the CSS text (rule) beside the line number and search for it in the CSS file. The error is listed on the right. After fixing any errors, repeat the steps above to verify that the site’s CSS is now OK.

Checking specific content formatting from the Browser

Browsers let you click on a specific part of a website page and display the HTML and CSS that are in effect for the item being clicked. The following gives more detailed information by browser.

Firefox

To see the HTML and CSS for a specific item on a page:

  1. Expand the window if necessary to fill the screen
  2. Move the cursor to the item you wish to check. If possible, make sure that this item is near the top of the screen.
  3. Right click
  4. Select Inspect Element (Q)

You will see a split screen. The page, as seen by the public, is in the top half, while the bottom half is divided into three parts (from left to right):

  1. The HTML code corresponding to the item where the cursor is, along with some lines before and after:
    • The line with the HTML code for where the cursor was clicked is highlighted.  You can move the cursor to another HTML line and click on the line to make that the line of interest.
    • Some lines start with ▸, indicating that there are more lines associated with it.  The information that is not displayed is shown asthree dots. Click the ▸ to expand.
    • Some lines start with ▾, indicating that this line and subsequent indented lines can be collapsed by clicking on ▾.
    • Furthermore, moving the cursor over the various lines of HTML will show where this is in the page in the top half of the screen, assuming the display window shows the content associated with the HTML. The box will be in blue, padding in purple and margins in yellow*.
  2. A column showing the CSS rules, in the order in which the browser found them:
    • The coloured information shows the CSS rules. The light grey text at the top right of each block (there may be only one, or several) indicates where in the code the CSS rule is defined, by file name and line number. Alternatively, ‘inline’ implies that the CSS is embedded within the HTML element.
    • Any line that is crossed out indicates a rule that is not used, because another rule found elsewhere sets this CSS parameter and has priority over this rule.
  3. The CSS rules that apply to the selected item:
    • There are several sub-columns to this section. Of most interest are ‘layout’ (showing the box model for any box where applicable: margins, border, padding, and the box itself*), and ‘Computed’ (summarizing everything found in the middle section or assumed by default).
    • Click ‘Layout’ or ‘Computed’ to see the values for the desired sub-column.
    • Numerical values usually represent a size in pixels. Colour values show the amount of red, green and blue, in values from 0 to 255. A fourth value, if shown, is the opacity between 0 and 1, and can usually be ignored. The actual colour is also shown in a small circle.

Chrome

To see the HTML and CSS for a specific item on a page:

  1. Expand the window if necessary to fill the screen
  2. Move the cursor to the item you wish to check.
  3. Right click
  4. Inspect (Ctrl+Shift+I)

You will see a split screen. The page, as seen by the public, is at the left, while the right shows the underlying code in two columns:

  1. The HTML code corresponding to the item where the cursor is, along with some lines before and after:
    • The line with the HTML code for where the cursor was clicked is highlighted. You can move the cursor to another HTML line and click on the line to make that the line of interest.
    • Some lines start with ▸, indicating that there are more lines associated with it. The information that is not displayed is shown as “…”. Click the ▸ to expand.
    • Some lines start with ▾, indicating that this line and subsequent indented lines can be collapsed by clicking on ▾.
    • Furthermore, moving the cursor over the various lines of HTML will show where this is in the page in the top half of the screen, assuming the display window shows the content associated with the HTML. The box will be in blue, padding in green and margins in orange*.
  2. A column showing the CSS rules that apply to the item on the left, in the reverse order in which the browser found them:
    • The coloured information shows the CSS rules. The light grey text at the top right of each block (there may be only one, or several) indicates where in the code the CSS rule is defined, by file name and line number. Alternatively, ‘inline’ implies that the CSS is embedded within the HTML element.
    • Any line that is crossed out indicates a rule that is not used, because another rule found elsewhere sets this CSS parameter and has priority over this rule.
  3. To the right are all the possible CSS rules at this point:
    • dark red items show the CSS rules that apply to the selected item, with their values in grey.
    • Light red items are other CSS values, but they do not apply to the item being inspected.

Edge

To see the HTML and CSS for a specific item on a page:

  1. Expand the window if necessary to fill the screen
  2. Move the cursor to the item you wish to check.
  3. Right click
  4. Inspect element

You will see a split screen. The page, as seen by the public, is at the left, while the right shows the underlying code:

  1. At the left, the HTML code corresponding to the item where the cursor is, along with some lines before and after:
    • The line with the HTML code for where the cursor was clicked is highlighted. You can move the cursor to another HTML line and click on the line to make that the line of interest.
    • Some lines start with expnd arros, indicating that there are more lines associated with it. The information that is not displayed is shown as “…”. Click the expand arrowto expand.
    • Some lines start withdown arrow, indicating that this line and subsequent indented lines can be collapsed by clicking ondown arrow.
    • Furthermore, moving the cursor over the various lines of HTML will show where this is in the page in the top half of the screen, assuming the display window shows the content associated with the HTML. The box will be in blue, padding in green and margins in orange*.
  2. At the right, the CSS rules that apply to the item on the left:
    • The information on the left shows the CSS rules. The information on the right  indicates where in the code the CSS rule is defined, by file name and line number.

*
The “box model” shows the parts of a box (<div>, <p>, <img>, etc.), from the outside working in. In Firefox: margin (yellow), border (black), padding (purple) and content (blue). Sizes are in pixels, with 0 implying there isn’t one. Values can be fractional, since they are computed!  “auto” usually means centered in the available space, and is therefore usually shown for the left and right margin values. e.g.
the CSS box model
Browsers vary, but basically display the same information in a similar manner.