alanseiden.comAlan Seiden ConsultingBrowser tools that makeweb development easier
Browser tools that make web development easierAlan Seiden ConsultingMy focusAdvancing PHP on IBM i• PHP project leader, Ze...
Browser tools that make web development easierAlan Seiden ConsultingContact informationAlan Seidenalan@alanseiden.com201-4...
Browser tools that make web development easierAlan Seiden ConsultingWhere to download these slidesFrom my sitehttp://alans...
Browser tools that make web development easierAlan Seiden ConsultingClient-side development tools• Not my usual PHP server...
Browser tools that make web development easierAlan Seiden ConsultingFormat of today’s talk• Mostly live demos of the tools...
Browser tools that make web development easierAlan Seiden ConsultingBrowser tools?7
Browser tools that make web development easierAlan Seiden Consulting“View source” started it all•“View Source” was the ori...
Browser tools that make web development easierAlan Seiden ConsultingFirefox add-ons9
Browser tools that make web development easierAlan Seiden ConsultingWhy Firefox?•Favored by developers•Highly extensible a...
Browser tools that make web development easierAlan Seiden ConsultingWeb Developer Toolbar•URL: http://chrispederick.com/wo...
Browser tools that make web development easierAlan Seiden ConsultingWeb Developer Toolbar in detail•Quick way to figure ou...
Browser tools that make web development easierAlan Seiden ConsultingLive HTTP Headers•URL: http://livehttpheaders.mozdev.o...
Browser tools that make web development easierAlan Seiden ConsultingLive HTTP Headers in detail•Example below: Capture wha...
Browser tools that make web development easierAlan Seiden ConsultingColorzilla•URL: https://addons.mozilla.org/firefox/add...
Browser tools that make web development easierAlan Seiden ConsultingColorzilla in detail•Example: Which “blue” was used in...
Browser tools that make web development easierAlan Seiden ConsultingFirebug•URL: https://addons.mozilla.org/firefox/addon/...
Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail• See relationships between page obje...
Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail• I recently used it to understand la...
Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail (Pagespeed)• Includes Google’s PageS...
Browser tools that make web development easierAlan Seiden ConsultingFor other browsers21
Browser tools that make web development easierAlan Seiden ConsultingInternet Explorer Developer Tools Included with IE. L...
Browser tools that make web development easierAlan Seiden ConsultingIE Developer Tools example See all “Alt Text” for pag...
Browser tools that make web development easierAlan Seiden ConsultingSafari Developer Tools http://developer.apple.com/tec...
Browser tools that make web development easierAlan Seiden ConsultingGoogle Chrome Developer Tools http://code.google.com/...
Browser tools that make web development easierAlan Seiden ConsultingResources26
Browser tools that make web development easierAlan Seiden ConsultingResources Firefox List of add-ons: https://addons.mo...
Browser tools that make web development easierAlan Seiden ConsultingNow it’s your turn28
Browser tools that make web development easierAlan Seiden ConsultingShare your favorite browser dev tools• What tools do y...
Browser tools that make web development easierAlan Seiden ConsultingContactAlan SeidenAlan Seiden ConsultingHo-Ho-Kus, NJa...
Upcoming SlideShare
Loading in...5
×

Browser tools that make web development easier

2,071

Published on

A departure from my usual PHP talks, I discussed browser-based tools that help with client-side tasks such as performance diagnostics, page analysis, HTTP flow analysis, the ability to step through javascript, and much more. Developers can work smarter with downloadable browser tools.

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

  • Be the first to like this

No Downloads
Views
Total Views
2,071
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Browser tools that make web development easier

  1. 1. alanseiden.comAlan Seiden ConsultingBrowser tools that makeweb development easier
  2. 2. Browser tools that make web development easierAlan Seiden ConsultingMy focusAdvancing 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/iSeries2
  3. 3. Browser tools that make web development easierAlan Seiden ConsultingContact informationAlan Seidenalan@alanseiden.com201-447-2437alanseiden.comtwitter: @alanseiden3
  4. 4. Browser tools that make web development easierAlan Seiden ConsultingWhere to download these slidesFrom my sitehttp://alanseiden.com/presentationsOn SlideSharehttp://slideshare.net/aseidenThe latest version will be available on both sites4
  5. 5. Browser tools that make web development easierAlan Seiden ConsultingClient-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 teachus what we’re doing right and wrong5
  6. 6. Browser tools that make web development easierAlan Seiden ConsultingFormat of today’s talk• Mostly live demos of the tools• These slides will not contain all the detailsof each tool—only basic reference info• People reading these at home will missthe details6
  7. 7. Browser tools that make web development easierAlan Seiden ConsultingBrowser tools?7
  8. 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 AJAX8
  9. 9. Browser tools that make web development easierAlan Seiden ConsultingFirefox add-ons9
  10. 10. Browser tools that make web development easierAlan Seiden ConsultingWhy 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. 11. Browser tools that make web development easierAlan Seiden ConsultingWeb 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, etc11
  12. 12. Browser tools that make web development easierAlan Seiden ConsultingWeb Developer Toolbar in detail•Quick way to figure out what’s going on in a page•Example below: check CSS style/class of menu item12
  13. 13. Browser tools that make web development easierAlan Seiden ConsultingLive 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 occur13
  14. 14. Browser tools that make web development easierAlan Seiden ConsultingLive HTTP Headers in detail•Example below: Capture what URL was launchedbefore redirect occurred14
  15. 15. Browser tools that make web development easierAlan Seiden ConsultingColorzilla•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 browserso you can use this tool15
  16. 16. Browser tools that make web development easierAlan Seiden ConsultingColorzilla in detail•Example: Which “blue” was used in NEMUG’s logo?16
  17. 17. Browser tools that make web development easierAlan Seiden ConsultingFirebug•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 coverhere17
  18. 18. Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail• See relationships between page objects, HTML, scripts, styles18
  19. 19. Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail• I recently used it to understand layout issues with my blog19
  20. 20. Browser tools that make web development easierAlan Seiden ConsultingFirebug in detail (Pagespeed)• Includes Google’s PageSpeed diagnostic tool20
  21. 21. Browser tools that make web development easierAlan Seiden ConsultingFor other browsers21
  22. 22. Browser tools that make web development easierAlan Seiden ConsultingInternet Explorer Developer Tools Included with IE. Launch via menu or F12 key22
  23. 23. Browser tools that make web development easierAlan Seiden ConsultingIE Developer Tools example See all “Alt Text” for page23
  24. 24. Browser tools that make web development easierAlan Seiden ConsultingSafari Developer Tools http://developer.apple.com/technologies/safari/developer-tools.html24
  25. 25. Browser tools that make web development easierAlan Seiden ConsultingGoogle Chrome Developer Tools http://code.google.com/chrome/devtools/ Anyone here have experience with this?25
  26. 26. Browser tools that make web development easierAlan Seiden ConsultingResources26
  27. 27. Browser tools that make web development easierAlan Seiden ConsultingResources 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. 28. Browser tools that make web development easierAlan Seiden ConsultingNow it’s your turn28
  29. 29. Browser tools that make web development easierAlan Seiden ConsultingShare your favorite browser dev tools• What tools do you use?• How will you use what you learned today?29
  30. 30. Browser tools that make web development easierAlan Seiden ConsultingContactAlan SeidenAlan Seiden ConsultingHo-Ho-Kus, NJalanseiden.com30alan@alanseiden.com ● 201-447-2437 ● twitter: @alanseiden
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×