The document discusses debugging tools in web browsers. It provides an agenda that covers problems that need debugging like JavaScript errors, resource loading, alignment/CSS issues, and supporting multiple platforms. It then discusses the built-in developer tools in browsers like Chrome, Safari, Firefox, Internet Explorer, and Opera and demonstrates some of their features. It also mentions tools for testing cross-browser compatibility like BrowserShots and Spoon. Finally, it lists some useful Firefox add-ons and Chrome extensions.

1. Debugging Tools
in Web Browsers
Presented by Sarah Dutkiewicz
sarah@cletechconsulting.com
Cleveland Tech Consulting, LLC

2. Agenda
 Problems that need debugging
 Using browsers and their (mostly) built-in tools to solve the problems
 Other tools for cross-browser testing

3. Problems – Javascript Errors
JavaScript Error
Line: 15
Char: 1
! Error: Object undefined
OK Cancel

4. Problems – Resource Loading

5. Problems – Alignment/CSS
Sarah’s CSS Playground
http://www.myfakerealestate.com/css
1 1 Cleveland Tech Housing
Apartments for techies.
www.clevelandtechevents.co
m

6. Problems – Multiple Platforms
Pinned Application
12:38
Pinned Application Username
Documents
Application
Pictures
Application Music
Games
Application
Computer
Application
Control Panel
Application Devices and Printers
Default Programs
Application
Help and Support
All Programs
Search programs and files Shut Down
3:00PM
3/14/2011

7. Browser Tools
to the Rescue!

8. Google Chrome Developer Tools
 Heavily based on WebKit Inspector tools
 Tools Overview:
https://developers.google.com/chrome
-developer-tools/docs/overview
 Demo of Audits with
ClevelandTechEvents.com

9. Safari Development Tools
 Not enabled by default
 Preferences -> Advanced -> check “Show Develop menu
in menu bar”
 Show Menu Bar
 WebKit Inspector
 Demo of basics of Developer Tools with Tackk.com

10. Firefox Web Developer
 Tools are constantly being updated in Firefox.
 Demo of Responsive Design View with LeanDog.com

11. Internet Explorer Developer Tools
 Developer Tools were baked in starting with IE8
 Developer Tools for IE7 are available here:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
 Now called “F12 developer tools” under the Tools menu
 Demo of various IE versions
 Demo of validators – W3 (HTML, CSS, Links), 508 (Accessibility),
Feeds

12. Opera Dragonfly
& other tools
 Development started in May 2008
 Compatible with:
 Presto 2.1 and higher
 Opera Mobile 9.5 and above
 Opera Desktop 9.5 and above
 Nintendo DS & Nintendo DSi Browser
 Demo of ruler & color picker
 Demo of Network with
IngenuityCleveland.com

13. Testing Cross-Browser Compatibility on
the Web
 BrowserShots: http://browsershots.org/
 Supports the following browsers:
 Google Chrome
 Dillo
 Elinks
 Epiphany
 Mozilla Firefox
 Galeon
 And more…

14. Testing Cross-Browser Compatibility on
the Web
 Spoon – Browser Sandbox: http://spoon.net/Browsers/
 Supports the following browsers:
 Google Chrome (17-21)
 Opera (9-12, Mobile 11, Mini 6)
 Safari (3-5)
 IE (6-9)
 Firefox (11-15, Mobile 2 & 5)

15. Other Web Developer Tools –
Add-Ons & Extensions
 Firefox Add-Ons
 Firebug
 Web Developer
 Colorzilla
 MeasureIt
 Page Speed
 IE Tab 2
 SEO Doctor
 Chrome Extensions
 Colorzilla
 Firebug Lite
 Code Cola – CSS editing
 CoffeeConsole – for CoffeeScript