Debugging tools in web browsers

1,781 views
1,589 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,781
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Debugging tools in web browsers

  1. 1. Debugging Toolsin Web Browsers Presented by Sarah Dutkiewicz sarah@cletechconsulting.com Cleveland Tech Consulting, LLC
  2. 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. 3. Problems – Javascript Errors JavaScript Error Line: 15 Char: 1 ! Error: Object undefined OK Cancel
  4. 4. Problems – Resource Loading
  5. 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. 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. 7. Browser Toolsto the Rescue!
  8. 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. 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. 10. Firefox Web Developer Tools are constantly being updated in Firefox. Demo of Responsive Design View with LeanDog.com
  11. 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. 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. 13. Testing Cross-Browser Compatibility onthe Web BrowserShots: http://browsershots.org/  Supports the following browsers:  Google Chrome  Dillo  Elinks  Epiphany  Mozilla Firefox  Galeon  And more…
  14. 14. Testing Cross-Browser Compatibility onthe 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. 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

×