0
Bookmarklets For Speed   Dan DeFelippi
WTF is a Bookmarklet?
WTF is a Bookmarklet?An app stored in the URL of a bookmark.
The Bookmarklets     Mobile Perf
The Bookmarklets                 Mobile Perf• Firebug Lite
The Bookmarklets                 Mobile Perf• Firebug Lite• Docsource
The Bookmarklets                 Mobile Perf• Firebug Lite• Docsource• DOM Monster
The Bookmarklets                 Mobile Perf• Firebug Lite          • Storager• Docsource• DOM Monster
The Bookmarklets                 Mobile Perf• Firebug Lite          • Storager• Docsource             • SpriteMe• DOM Mons...
The Bookmarklets                 Mobile Perf• Firebug Lite          • Storager• Docsource             • SpriteMe• DOM Mons...
Mobile Perf
Mobile Perf• Bundle of performance bookmarklets• http://bit.ly/mobileperf
Firebug Lite
Firebug Lite• JS version of Firebug
Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM
Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features
Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging
Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitor...
Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitor...
Docsource
Docsource• View page source easily on mobile  browsers• http://bit.ly/viewdc
DOM Monster
DOM Monster• Analyzes the DOM
DOM Monster• Analyzes the DOM• Performance issues / bottlenecks
DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes
DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes• http://bit.ly/dom-monster
Storager• Manipulate and view localStorage and  sessionStorage• http://bit.ly/storager
SpriteMe
SpriteMe• Automated sprite creation
SpriteMe• Automated sprite creation• Merges images and creates CSS
SpriteMe• Automated sprite creation• Merges images and creates CSS• http://spriteme.org
CSSess
CSSess• Check for unused CSS across multiple  pages• http://cssess.com
Questions?   @ExpertDandan@driverdan.com          Rate me:  http://spkr8.com/t/7268
Upcoming SlideShare
Loading in...5
×

Bookmarklets for Speed

608

Published on

Popular bookmarklets you can use to improve your website's performance

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

  • Be the first to like this

No Downloads
Views
Total Views
608
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Bookmarklets for Speed"

    1. 1. Bookmarklets For Speed Dan DeFelippi
    2. 2. WTF is a Bookmarklet?
    3. 3. WTF is a Bookmarklet?An app stored in the URL of a bookmark.
    4. 4. The Bookmarklets Mobile Perf
    5. 5. The Bookmarklets Mobile Perf• Firebug Lite
    6. 6. The Bookmarklets Mobile Perf• Firebug Lite• Docsource
    7. 7. The Bookmarklets Mobile Perf• Firebug Lite• Docsource• DOM Monster
    8. 8. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource• DOM Monster
    9. 9. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource • SpriteMe• DOM Monster
    10. 10. The Bookmarklets Mobile Perf• Firebug Lite • Storager• Docsource • SpriteMe• DOM Monster • CSSess
    11. 11. Mobile Perf
    12. 12. Mobile Perf• Bundle of performance bookmarklets• http://bit.ly/mobileperf
    13. 13. Firebug Lite
    14. 14. Firebug Lite• JS version of Firebug
    15. 15. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM
    16. 16. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features
    17. 17. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging
    18. 18. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitoring
    19. 19. Firebug Lite• JS version of Firebug• Console, HTML inspection, CSS, DOM• Missing Features • JS debugging • Network monitoring• http://bit.ly/firebuglite
    20. 20. Docsource
    21. 21. Docsource• View page source easily on mobile browsers• http://bit.ly/viewdc
    22. 22. DOM Monster
    23. 23. DOM Monster• Analyzes the DOM
    24. 24. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks
    25. 25. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes
    26. 26. DOM Monster• Analyzes the DOM• Performance issues / bottlenecks• Recommends fixes• http://bit.ly/dom-monster
    27. 27. Storager• Manipulate and view localStorage and sessionStorage• http://bit.ly/storager
    28. 28. SpriteMe
    29. 29. SpriteMe• Automated sprite creation
    30. 30. SpriteMe• Automated sprite creation• Merges images and creates CSS
    31. 31. SpriteMe• Automated sprite creation• Merges images and creates CSS• http://spriteme.org
    32. 32. CSSess
    33. 33. CSSess• Check for unused CSS across multiple pages• http://cssess.com
    34. 34. Questions? @ExpertDandan@driverdan.com Rate me: http://spkr8.com/t/7268
    1. A particular slide catching your eye?

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

    ×