debugging tools in web browsers
TRANSCRIPT
Debugging Tools
in Web Browsers
Presented by Sarah Dutkiewicz
Cleveland Tech Consulting, LLC
Agenda
Problems that need debugging
Using browsers and their (mostly) built-in tools to solve the problems
Other tools for cross-browser testing
Problems – Alignment/CSSSarah’s CSS Playground
http://www.myfakerealestate.com/css
Cleveland Tech HousingApartments for techies.
www.clevelandtechevents.co
m
1 1
Problems – Multiple Platforms
12:38
3:00PM
3/14/2011
Search programs and files
All Programs
Shut Down
Username
Documents
Pictures
Music
Games
Computer
Control Panel
Devices and Printers
Default Programs
Help and Support
Pinned Application
Pinned Application
Application
Application
Application
Application
Application
Application
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
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
Firefox Web Developer
Tools are constantly being updated in Firefox.
Demo of Responsive Design View with LeanDog.com
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
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
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…
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)