Debugging a Website
Debugging a website can be a tedious job. A simple website may contain a few pages and would be easier to maintain and debug, but with greater size comes complexity, this is what makes debugging a exasperating experience. Is your website fully functional and tested without errors? If not, and you have broken links or sections of your website that cause errors it is important that you address these problems immediately!
Not only will it look unprofessional for you from your customers' perspectives, but errors within your website can detrimentally affect your search engine rankings. This is especially prevalent with Google. Google seems to have little tolerance for websites with errors where pages, images or links don't load, and we have seen websites that are ranking in the top 10 quickly lose positioning and almost vanish from search engine results.
If the website errors are due to web pages not loading where they are linked correctly, you should take a look at the web hosting company you are using in case:
· Their server is too slow for your website;
· Are their servers at capacity for the amount of websites hosted on their servers?
· Or are their web servers unstable and go down quite often.
No matter what the reason; ask your web hosting company what they are doing about it. If they don't fix the problem quickly, then find a new web hosting company. -don't accept excuses where they are not going to fix the problem in a timely manner- There are a lot of hosting companies around, so there is no reason why you should settle for poor quality.
While cost is not always indicative of whether or not a web hosting company is going to provide a quality service -we have seen expensive web hosting companies provide low quality hosting services, and low cost companies provide high quality service-, don't choose a cheap web hosting company because you think you may save a couple of hundred dollars a year. If your site has consistent errors, and you lose positioning in the search engines then it will cost your business a lot more than a couple of hundred dollars a year.
What do you need to do to find out if your website has errors?
· Manually check your website by having a few different users navigate through it. Make sure all links work correctly, and that all images are showing where they should be.
· Look at your web statistics reports to find out if any errors are showing. If you don't have these types of reports for your website, change hosting providers straight away!
Step by step guide for debugging a website:
1. Be sure to edit the right page.
Check to see if the page you're looking at in the browser is the same page you're editing in Notepad or your HTML editor. It's easy to get confused when you're working with multiple copies of the same file.
For instance, most webmasters with slow Internet connections often prefer to make changes offline and keep a duplicate copy of their Web site on their own PC. It's quicker to update the page offline. So they work on the local copy, save it, and then test the changes online.
But they sometimes leave out one critical step: sending the changed document to the server. The online copy hasn't changed a bit because the webmaster forgot to upload the changed file! The file open in the browser is not the same file that has changed.
Note: you should always have a backup copy of your site no matter what kind of connection you have!
2. Beware of the browser cache
If you're sure that you are editing the correct page, but your changes still don't show up in your browser, then you may have a caching problem.
The solution is often as simple as closing your browser and reopening it because the browser cache isn't functioning properly. Normally, the cache is your friend: it decreases page download time by saving downloaded files and loading the local copies when the browser requests them again. That means fewer requests to the server.
Theoretically, a "hard refresh" (press the shift key as you reload the page) in Explorer and Netscape tells the browser to request the page from the source (either the server or your local copy) instead of loading the cached copy.
That's the theory, but in reality you sometimes just have to close the browser window entirely and reopen it to see the changed file.
3. Write clean HTML code
Before you get your hands dirty trying to debug problems, run HTML Toolbox over your page to make sure you don't have any coding errors. Clean HTML code isn't guaranteed to solve your problem, but it's a critical step.
If your page is free of HTML coding errors, then the problem may be in your Cascading Style Sheets (CSS) or JavaScript code. Review them both for errors and browser display problems. And remember, sometimes your code, CSS, and JavaScript are all correct but the basic problem is browser support! Use Browser Photo to determine how your page looks in different browser versions and operating systems. If you find a display problem in a single browser, check to see if the browser actually supports the design technique you used.
For instance, Opera doesn't allow you to use CSS to create dynamic form fields and WebTV has very limited JavaScript support. If you don't realize that browsers display pages differently at times, you may waste a lot of time trying to debug your pages when really there's nothing you can do except use a different technique.
It's comforting to know that you didn't cause the problem - but frustrating to realize that you can't fix it either!
4. Take it one step at a time.
The subscription version of HTML Toolbox will identify and repair coding errors, then give you a corrected copy of the page that you can test and upload to your own server. But if you're using the trial version, Toolbox just finds the errors for you. You have to fix them yourself.
One problem with fixing errors by hand is that you often introduce new errors while trying to figure out the original problem.
To avoid this trap always make one change at a time. It's maddening to spend hours making extensive corrections to a page, only to have it look worse than when you started. Follow these steps:
- Take the first error flagged by Toolbox and fix it.
- Save the file.
- Test your page (remember Step One in this article!).
Sometimes, fixing one error takes care of multiple problems. That's because a single error like not closing a tag properly can cascade through the rest of the code. The tool may read the rest of the code improperly and assume the whole thing is messed up - when in fact the only problem is that you just forgot to close a quotation mark or bracket on one tag.
Make changes one at a time and it's much easier to evaluate the results and fix problems.
5. Pay attention to server-side issues.
You may be using server-side technologies that only work when the page is on a live server. Here's a short list:
- Server-side Includes: These don't appear on your local machine since they're a server-side technology. You have to upload your pages to test them.
- Database Functions: If you're running a dynamic Web site and creating pages on the fly from database queries, then you may need to upload the pages to the server before testing them. That depends on how you have your local system set up, but if your Web host is supplying the database or shopping cart software, chances are you need to design online!
- FrontPage Forms: FrontPage makes it easy to process forms without bothering with CGI script installation, database setup, etc. However, you must have FrontPage extensions installed on the server before the forms will process and display correctly.
FrontPage usually warns you when the page "contains elements that need to be published before they display correctly." That's your cue to upload the page before you even start trying to debug it.
Some common errors found in websites are:
· Invalid HTML
· Broken Links
· Missing meta tags
· JavaScript errors
HTML Errors:
Our web pages are made with a kind of "word processing" language called HTML - Hyper Text Markup Language. This language is made up of tags which say how the web page should look. For example, to make bold text, you would use this HTML:
bold text
Everything between the start and end tags and would appear in bold text. As with any language, there are rules, and the rules for HTML are set by an organization called World Wide Web Consortium (W3C). They have a test you can run to see if your pages meet their standards. If you pass, your pages have valid HTML.
How HTML errors occur:
Errors in HTML can be caused by lots of things. Here are the most common causes of errors:
· Failure to specify the version of HTML being used. This is a very common problem. The first line of HTML in a web page should indicate the document type. It's important to specify this because web browsers try to adapt to the version of HTML being used, and if that unknown (or incorrectly set), a page may look completely different depending on the browser being used.
· Web page editors can produce invalid HTML. This has improved in the last few years, but some programs just don't follow the standards. The worst offender is Microsoft FrontPage. It inserts all kinds of junk that shouldn't be there. Dreamweaver, another popular editor, does pretty well now, though older versions had some problems. NVU is another one that does a good job. And of course, you can write your own HTML from scratch. We write mostly from scratch around here, because it gives us total control over the HTML.
· Sloppy editing is another cause of errors. Leaving out information, failure to close or nest tags properly, and careless mistakes can wreak havoc on a web page. Unfortunately, many Content Management System (CMS) programs have errors in the HTML they create, probably because lots of different people work on the programming, and many programmers don't know how to make valid HTML
How to find HTML errors:
Validation errors can be found using the W3C Markup Validation Service. It will tell you, in pretty technical terms, what problems it found with your web page. Another way of finding these errors is to use a Firefox plugin called Total Validator. This tool is nice because it provides one-click access to the validation tests, and the results are shown in the context of the page so you can see exactly where the problems are. They also have a web-based validation tool which gives more options, including spell checking and screen shots.
HTML Validation:
· Validation helps to ensure your web page looks right, no matter what web browser is being used.
· Search engines can view and understand the page content. Some errors may prevent your content from being read by the search engines.
· Pages are more accessible to people with disabilities.
BROKEN LINKS:
Nothing annoys your visitors like a broken link. It is very important that all of your pages in a website must work properly and must be accessible. It is bad when a visitor clicks on a link and gets an error page or something other than what was expected. If you have a links page or make frequent additions and deletions on your site, you should check for broken links on a regular basis.
How links get broken:
Broken links can happen for a variety of reasons:
· A web page on your site is moved or deleted.
· A web page on someone else's site is moved or deleted.
· A web site ceases to exist (a frequent occurence).
· A typo or incorrect capitalization in the URL address.
Broken links are easy to fix - they must be updated or removed.
How to fix broken links:
· Try to find an updated link - If the link is on your site, contact your webmaster for a fix. If the link is to a specific page on another web site, try visiting just the domain name part of the address. For example, if the link goes to www.somesite.com/somepage.html, trying going to just www.somesite.com - perhaps you can find the original information in a new place. If you find it, send the new link to your webmaster.
· Find a replacement link - The web is a very transient place, with sites coming and going all the time. You can always search for a site offering something similar and replace the old with the new.
· Remove the link
Broken links can also be treated by using any of the following tools:
1. W3C Link Checker - This tool will check a single page of your web site. Simply enter the web address (URL) of the page you want to check, and the checker will visit the page and verify each link within the page, including links to web pages, other web sites, images, style sheets and anything else linked within the page. If you want to check more than one page on your site, set the recursion depth, which specifies how many pages deep the link checker should go into the site. A setting of 2 or 3 should be sufficient to check each page of your site.
2. Google Webmaster Tools - If you've set up a webmaster account with Google, you have access to a bunch of reports about your site, one of which is a "broken links" report. This covers your entire site, so it can be a very valuable monitoring tool. From your dashboard, click on your web site link, then Diagnostics, then Web Crawl, then Not Found to see the broken links report. If you have a links page on your site, you should check this report regularly.
3. Install a Link Checker - We use a program called WebTester - it does the same checking as Google, but it's installed on your web site and you can run it as often as you please. All it requires is the ability to run PHP on your web site.
META TAGS:
Meta tags provide additional information about the content of a web page. They are important to search engines because they give your pages meaning and context. Your visitors appreciate the extra information. The three most important tags are the title, description and keyword tags.
Title Tag
This is probably the most important tag of all because it's used by Google as the text for your link. The title should describe what your page is about.
Description Tag
The description gives more details about the page, and can be used to compel people to click on your link in the search results.
Keyword Tag
Search engines use keywords to help categorize your web pages. Not all search engines use them, but they are still important and should be included on each page of your site.
HTTP Debugger is a full-scale tool for IT professionals for intercepting, viewing and analyzing the HTTP and HTTPS protocol traffic between a web browser or any other application using the HTTP/HTTPS protocol, and a web server. Whether you are a professional web developer creating next generation web sites, or a software programming guru creating killer networking applications or a system/network administrator guarding your organization privacy and security, the HTTP Debugger is program for you. Web developers can use the HTTP Debugger to identify performance bottlenecks of their web site by measuring the size and downloading time of web pages; to locate and to eliminate website errors analyzing http headers, query strings, cookies, redirections, authorization headers, POST parameters and error codes; to view the source code of HTML/XML web pages and Java/VB scripts. You can use HTTP Debugger to analyze the http traffic produced by web browser add-ons, ActiveX components and/or Java applets. Software developers can use the HTTP Debugger to view and analyze the HTTP traffic of their own, or any third party, software programs in C#, Java, VB, C++, Delphi, etc. and the Internet, regardless of whether it is a user mode application or a Windows System Service. System and network administrators can use the HTTP Debugger to analyze the behavior of suspicious web sites and to view what information is sent from your computers by applications to their owners, for example, during the activation or update procedure.
Comments
Post a Comment