Browser tools that make web development easier
2 likes1,406 views
The document presents a discussion by Alan Seiden on various browser tools that facilitate web development, focusing particularly on client-side tools and their functionalities. It includes recommendations for Firefox add-ons like Web Developer Toolbar, Live HTTP Headers, ColorZilla, and Firebug, detailing their purposes and offering links for access. Seiden also invites attendees to share their favorite tools and ways to apply the knowledge gained.
Browser tools that make web development easier
- 1. alanseiden.com Alan Seiden Consulting Browser tools that make web development easier
- 2. Browser tools that make web development easierAlan Seiden Consulting My focus Advancing PHP on IBM i • PHP project leader, Zend/IBM Toolkit • Contributor, Zend Framework DB2/i enhancements • Developer, Best Web Solution, IBM/Common • Authority, web performance on IBM i/iSeries 2
- 3. Browser tools that make web development easierAlan Seiden Consulting Contact information Alan Seiden alan@alanseiden.com 201-447-2437 alanseiden.com twitter: @alanseiden 3
- 4. Browser tools that make web development easierAlan Seiden Consulting Where to download these slides From my site http://alanseiden.com/presentations On SlideShare http://slideshare.net/aseiden The latest version will be available on both sites 4
- 5. Browser tools that make web development easierAlan Seiden Consulting Client-side development tools • Not my usual PHP server-side topic • Today we discuss the client side That means what ends up in the user’s browser Dynamic HTML, styles and classes, javascript, performance related to HTTP requests • Free tools that run in our web browser can teach us what we’re doing right and wrong 5
- 6. Browser tools that make web development easierAlan Seiden Consulting Format of today’s talk • Mostly live demos of the tools • These slides will not contain all the details of each tool—only basic reference info • People reading these at home will miss the details 6
- 7. Browser tools that make web development easierAlan Seiden Consulting Browser tools? 7
- 8. Browser tools that make web development easierAlan Seiden Consulting “View source” started it all •“View Source” was the original built-in browser tool •CTRL+U is its shortcut on many browsers •It still works but does not meet today’s challenges: Dynamic HTML (View Source doesn’t include it) Performance and speed testing Debugging of style sheets (CSS) and javascript Sophisticated redirects and AJAX 8
- 9. Browser tools that make web development easierAlan Seiden Consulting Firefox add-ons 9
- 10. Browser tools that make web development easierAlan Seiden Consulting Why Firefox? •Favored by developers •Highly extensible add-on system Anyone can create an add-on •To see all Firefox add-ons for web developers: https://addons.mozilla.org/firefox/extensions/web-development/ 10
- 11. Browser tools that make web development easierAlan Seiden Consulting Web Developer Toolbar •URL: http://chrispederick.com/work/web-developer/ •Author: Chris Pederick •Browser: Firefox •Purpose Analyzes web pages in dozens of ways Easy enough for non-programmers to use Favorite features: • View generated source (such as generated by javascript) • View style information • Outline various types of objects, table cells, etc 11
- 12. Browser tools that make web development easierAlan Seiden Consulting Web Developer Toolbar in detail •Quick way to figure out what’s going on in a page •Example below: check CSS style/class of menu item 12
- 13. Browser tools that make web development easierAlan Seiden Consulting Live HTTP Headers •URL: http://livehttpheaders.mozdev.org/ •Authors: Daniel Savard, Nikolas Coukouma •Browser: Firefox •Purpose Shows the “flow” of HTTP request/response Great tool to teach how the web works See submitted form data Determine what pages load before redirects occur 13
- 14. Browser tools that make web development easierAlan Seiden Consulting Live HTTP Headers in detail •Example below: Capture what URL was launched before redirect occurred 14
- 15. Browser tools that make web development easierAlan Seiden Consulting Colorzilla •URL: https://addons.mozilla.org/firefox/addon/colorzilla/ •Author: Alex Sirota •Browser: Firefox •Purpose Find out what colors are used in web sites, including in images Helpful for building a color palette It’s so good, you may find yourself loading images in a browser so you can use this tool 15
- 16. Browser tools that make web development easierAlan Seiden Consulting Colorzilla in detail •Example: Which “blue” was used in NEMUG’s logo? 16
- 17. Browser tools that make web development easierAlan Seiden Consulting Firebug •URL: https://addons.mozilla.org/firefox/addon/firebug/ •Author: Joe Hewitt, johnjbarton, robcee, FirebugWorkingGroup, Jan Odvarko •Browser: Firefox •Purpose Advanced tool for programmers Debug javascript and CSS Measures performance A container for other tools •Has more features than we could possibly cover here 17
- 18. Browser tools that make web development easierAlan Seiden Consulting Firebug in detail • See relationships between page objects, HTML, scripts, styles 18
- 19. Browser tools that make web development easierAlan Seiden Consulting Firebug in detail • I recently used it to understand layout issues with my blog 19
- 20. Browser tools that make web development easierAlan Seiden Consulting Firebug in detail (Pagespeed) • Includes Google’s PageSpeed diagnostic tool 20
- 21. Browser tools that make web development easierAlan Seiden Consulting For other browsers 21
- 22. Browser tools that make web development easierAlan Seiden Consulting Internet Explorer Developer Tools Included with IE. Launch via menu or F12 key 22
- 23. Browser tools that make web development easierAlan Seiden Consulting IE Developer Tools example See all “Alt Text” for page 23
- 24. Browser tools that make web development easierAlan Seiden Consulting Safari Developer Tools http://developer.apple.com/technologies/safari/ developer-tools.html 24
- 25. Browser tools that make web development easierAlan Seiden Consulting Google Chrome Developer Tools http://code.google.com/chrome/devtools/ Anyone here have experience with this? 25
- 26. Browser tools that make web development easierAlan Seiden Consulting Resources 26
- 27. Browser tools that make web development easierAlan Seiden Consulting Resources Firefox List of add-ons: https://addons.mozilla.org/firefox/extensions/web- development/ Web Developer Toolbar: http://chrispederick.com/work/web-developer/ Live HTTP Headers: http://livehttpheaders.mozdev.org/ Colorzilla: https://addons.mozilla.org/firefox/addon/colorzilla/ Firebug: https://addons.mozilla.org/firefox/addon/firebug/ FirePHP: http://firephp.org • Safari Safari Developer Tools: http://developer.apple.com/technologies/safari/ developer-tools.html Internet Explorer Developer menu is built in Google Chrome Developer Tools: http://code.google.com/chrome/devtools/ 27
- 28. Browser tools that make web development easierAlan Seiden Consulting Now it’s your turn 28
- 29. Browser tools that make web development easierAlan Seiden Consulting Share your favorite browser dev tools • What tools do you use? • How will you use what you learned today? 29
- 30. Browser tools that make web development easierAlan Seiden Consulting Contact Alan Seiden Alan Seiden Consulting Ho-Ho-Kus, NJ alanseiden.com 30 alan@alanseiden.com ● 201-447-2437 ● twitter: @alanseiden