1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 20: Testing and Debugging Webpages

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Utilize debugging techniques. Check the easy problems in HTML. Check the easy problems in CSS. Validate code. Troubleshoot with HTML validators. Test a page in a variety of browsers and platforms. Fix missing images.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Testing and Debugging Webpages

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Validating Your Code HTML validator compares code against rules of the language, displaying errors or warnings for any inconsistencies it finds. –Alerts to syntax errors; invalid elements, attributes, and values; and improper nesting of elements.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Validate Your Code First check your HTML with either http://html5.validator.nu or http://validator.w3.org. http://html5.validator.nuhttp://validator.w3.org As desired, fix the HTML errors that are flagged, save the changes, and, if necessary, upload the file to your server again. Then repeat the first step. Check for CSS errors with http://jigsaw.w3.org/css- validator/, fixing the problems and checking your page again.http://jigsaw.w3.org/css- validator/

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Troubleshooting with Validator Text to the right of the image is too big.

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Troubleshooting with Validator The error found on Line 10 is the problem. –Instead of an end tag, there's another start tag by mistake. –The other errors are caused by the first error.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Checking with Validator

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Troubleshooting with Validator The page is now trouble-free.

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Checking HTML for Consistency HTML Lint (http://lint.brihten.com/html/) has options for checking that empty elements are closed, start and end tags are lowercase, attributes are lowercase, and more.

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Testing Your Page Test your page in a variety of browsers and platforms. Page validates, but it doesn't look anything like it's supposed to.

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Test Your HTML Pages Validate HTML and CSS and make needed changes. Open your page. Go through the whole page, and make sure it looks exactly the way you want it to: –Does the formatting look correct? –Does each link point to the proper page or asset? –Do all images appear? Are they placed and aligned properly? –If you’re checking a responsive webpage, does the layout adapt as expected at different sizes?

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Test Your HTML Pages Without closing the page in the browser, open the appropriate HTML or CSS document and make any necessary changes. Save the changes. Switch back to browser and refresh or reload to see changes. Repeat steps until satisfied with your webpages. Revalidate the code to make sure you haven't introduced any new errors.

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Test Your HTML Pages Beginning with step 2, perform the same testing procedure in other browsers until page is ready to go live. Upload files to server. Return to the browser, type page's URL in address bar, and press Return or Enter. Page will appear in browser. Go through page on live site to make sure everything is all right. Don't forget to test it on mobile devices too.

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Testing Your Page After we fix the file name in the code, the style sheet loads and the page displays properly.

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE A Testing Workflow A common testing workflow is to: –Check a page periodically in a couple of browsers while you are building it. –Then test it across the full set of browsers when the page is finished, refining your code as necessary. –When your site is finished, test it thoroughly in browsers again to be sure it’s all working together properly.

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE More About Browser Testing Most developers verify sites in these desktop browsers: –Chrome (www.google.com/chrome), latest version. –Firefox (www.firefox.com), latest version. –Internet Explorer 8+, Windows only. –Safari (www.apple.com/safari/), latest version or sometimes Safari 5+.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Obtaining Browsers for Testing A virtual machine (VM) is an isolated version of an operating system that runs on your computer. –Microsoft provides VMs with various versions of Windows and IE so you can test IE from a Mac, Windows, or Linux computer. –You cannot run OS X in a VM to test Mac browsers from a Windows machine. BrowserStack and Sauce Labs are services that allow you to test your pages on a huge range of browsers and mobile devices for a fee.

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Testing on Mobile Phones and Tablets Test pages for mobile compatibility: –Apple’s iOS Simulator tests pages for the iPhone and iPad. –DeviceAnywhere provides online access to various mobile devices for testing for a fee. –Electric Plum’s iPhone and iPad simulator for Windows. –Mobile Boilerplate maintains a list of emulators and simulators for other devices and mobile browsers. –Open Device Lab show spots near you that have devices available to test with for free. –Adobe Edge Inspect in combination with a device to simplify testing and fixing bugs.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Trying Some Debugging Techniques Debugging techniques for getting kinks out of a webpage: –Check easy stuff first. –Work incrementally. Make small changes, and test after each change. –When you're debugging, start with what you know works. –Use process of elimination to figure out which chunks of code are giving you trouble. –Be careful about typos.

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Trying Some Debugging Techniques Debugging techniques for getting kinks out of a webpage: –In CSS, if you're not sure whether the problem is with the property or with the selector, try adding a very simple declaration to your selector. If element turns red, the problem is with your property; if it doesn't, the problem is with your selector. –Test changes to HTML or CSS directly in browser using the developer toolbars at your disposal. Or inspect the code with these tools to try to locate the problem.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Browser Developer Tools The tools used most often for each browser are as follows: –Chrome: DevTools. –Firefox: Firefox has built-in tools, but Firebug is more popular. Web Developer is a slightly different type of tool, but it is very handy. It’s also available for Chrome at the same link. –Internet Explorer: F12 Developer Tools. –Opera: Dragonfly –Safari: Web Inspector

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Checking the Easy Stuff: General Validate code. Great place to start, because you can eliminate coding syntax and related errors. Make sure you've uploaded the file you want to test. Make sure you've uploaded the file where it belongs. Make sure you've typed the URL that corresponds to the file. Make sure the URL in the link to the page matches its file name and location. Make sure you've saved the file—including the very latest changes—before you upload it.

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Checking the Easy Stuff: General Make sure you've uploaded any auxiliary files—CSS, images, music, videos, and so on. Make sure the upper- and lower-case letters in your URL exactly match the upper and lowercase letters in your file names. If you disabled any of the browser features, such as JavaScript support, during previous testing, make sure you haven't neglected to re-enable them. Make sure the problem is not the browser's fault. The easiest way is to test the page in another browser.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Still Stuck? Additional suggestions: –Take a break and come back to it in a bit. –Go back to most recent version that worked properly. Test the page as you add each new element bit by bit. –For resources page links to, type URL directly in browser's address bar. –Check Stack Overflow and SitePoint for solutions or guidance.

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Check the Easy Stuff in HTML Sometimes problem is in the HTML: –Simple typo can be easy to miss. Make sure everything's spelled correctly and that valid values are assigned to attributes. –Be careful about element nesting. –If accented characters or special symbols are not displaying, make sure appears right after document head element starts, and be sure text editor is configured to save HTML files in the same encoding. –Be sure attribute values are enclosed in straight quotes. –Don't use separate start and end tags for void (empty) elements.

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Check the Easy Stuff in CSS Sometimes problem is in the HTML: –Make sure properties are separated from values with a colon (:), not an equals sign. –Be sure to complete each property/value pair (a declaration) with a semicolon (;). Make sure there are no extra semicolons. –Don't add spaces between numbers and their units. –Don't forget to close your curly braces. –Make sure you're using an accepted value.

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Check the Easy Stuff in CSS Sometimes problem is in the HTML: –Don't forget end tag for embedded style sheets. –Make sure the path to the desired CSS file is correct in your HTML. –Watch the spaces and punctuation in and between the CSS selectors. –Make sure the browser supports what you're doing, particularly with CSS3. –Use browser developer tools to inspect style rules as parsed by the browser to quickly highlight which code isn't being parsed as expected or to see how specificity rules have been applied.

29. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Inspecting the Code with Chrome’s DevTools

30. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE When Images Don't Display Little red x's, broken image icons, alternate text, or nothing at all are all signs that images aren't loading properly.

31. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Fix Missing Images Check that file name of image on server exactly matches name referenced in img element. Make sure the image’s URL is correct in the img element’s src attribute. If the image shows up on your computer but not when you upload the page to the server, make sure you’ve uploaded the image to the server. Have you saved the image as a PNG, JPEG, or GIF? If so, all browsers will display it, which is not true of other formats.