ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A HTML 5 CSS 3 Tutorial: Debugging a Web Page

Updated on May 7, 2014

Always Start With the Obvious: Has the File Been Saved?

From personal experience while adding to a Web page iteratively the first thing to check is whether the code you think is behaving improperly is the code you think you have submitted to the browser.Most editors will tell you whether your code has been saved.

Notepad++ indicates an unsaved file with an asterisk in from of the file name.The snapshot below shows tht this can happen. The asterisk preceding the file name should be one of the first things to look for.

Not Having Saved Changes To The File Can Be the Problem

One of the first thing to check is the file saved.
One of the first thing to check is the file saved.

Are You Looking at the Right File in The Right Place?

It is generally a good practice to have backup copies of what you are working on. This however can be another source of a problem. Are you in the right directory and are you editing the right file.

A Misplaced Tag can be Your Problem

In the snapshot which follows, the problem of something not displaying is as simple as a missing style tag. Other things which could be could cause this could be an incomplete tag, a missing slash "/" or less tan or greater than sign.

Many text editor will help you with color or the ability to collapse sections of code.

The snapshot which follow illustrate a blank screen being displayed when the closing style tag was missing.

It's even more baffling when there are multiple errors in a file as in the second example. This might go undiscovered until some future time when a code change occurs.


Misplace Or Missing Tags Can Cause Havoc Now....Or Much Later

Blank screen are never a good sign. These examples are easy but many Web pages  become very complex.
Blank screen are never a good sign. These examples are easy but many Web pages become very complex.
This file has multiple error which might go undetected until further modifications are made to the file.
This file has multiple error which might go undetected until further modifications are made to the file.

Using Background Colors Can Help Solve Layout Problems

Adding background colors can be quite helful in figuring out a page layout and avoiding problems. Page elements have default values for size, margins, borders which do not always result in easy calculations. Distinct colors for different page elemnts while prototyping the page can save a lot of time and avoid problems.

Simple Background Colors Can Help Avoid Probems in Page Layout

When setting up a Web page with multiple sections there is a lot to think about: borders, margins, default element sizes, images. Setting background colors can help determine and avoid page space conflicts.
When setting up a Web page with multiple sections there is a lot to think about: borders, margins, default element sizes, images. Setting background colors can help determine and avoid page space conflicts.

Using The Browser's Built-in Or Add-onTools

For example when viewing a page in Google Chrome in order to investigate a problem all you really need to do is right click your mouse and choose the "Inspect element". There are a number of performance options you can access but during the early coding stages you might just need to look at any error message reported. The snapshot which follows illustrates the very simple problem of a misspelled image name.

Other thing which it can help with are indicating default browser values and where you might need to specify an override.

Another example of a good tool is Firebug which integrates well with Firefox.

Using Chrome's "Inspect Element"

This is a simple illustration of why a page may not be displayed as you think it should. Either the file is not where you think it is or you've simply made a typo..
This is a simple illustration of why a page may not be displayed as you think it should. Either the file is not where you think it is or you've simply made a typo..

WC3 Validation For HTML and CSS

Sometimes the brute force approaches mentioned above and careful investigation doesn't seem to work. In that case you might want to utilize the W3C Validator. It's free, relatively easy to access and use. You page need not be on an active website. There is an option to upload your file or enter a snippet of HTML or CSS code. The following illustrates how it may be used and what kind of output you might expect.

Using The W3C Validator

The startup screen for the validator. You can choose to validate a URI, a file you would upload, or direct "cut and paste" input.
The startup screen for the validator. You can choose to validate a URI, a file you would upload, or direct "cut and paste" input.
My file apparently has some problems her.
My file apparently has some problems her.
It first lists the warnings.
It first lists the warnings.
Then it lists serious errors. If you code passes the test its given  the green light"
Then it lists serious errors. If you code passes the test its given the green light"
The file now looks good to go.
The file now looks good to go.

This Might Not Have Been "The End of The Line"

In this case by looking at the error messages the problems with the code were resolved. This is not always the case. Just yesterday, it looked like all of the problems I had with some code had gone through the validation process without any errors, yet my default browser was not displaying the page the way I expected it to.

So what next? What recourse do you have? Try it on another browser. Guess what? It worked! Not only on one browser but three of the four browsers I normally use. (The ones I use are firefox, Opera, Chrome, Internet Explorer.)

The moral of the story is you should not rely on one browser to verify your code nor should you rely on one device to display it. Something might look good on a deskpot machine but give a table, netbook, or mobile devices user a miserable experience.


Please Evaluate This Tutorial and Add Your Comments

5 out of 5 stars from 1 rating of Was this tutorial helpful?

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)