Installation
| DESKTOP: |
Drag this link to your bookmarks toolbar or add it to your favorites:
|
| |
| MOBILE: |
|
Web development on mobile devices is especially challenging.
The debuggers and profilers we use on the desktop aren't available.
Bookmarklets are a good alternative. They're lightweight and work on most browsers - even mobile browsers.
But installing bookmarklets in mobile browsers is a pain.
You could try to find all the good bookmarklets out there and install them one by one.
Or...
Just install the Mobile Perf bookmarklet!
|
|
This is what the Mobile Perf bookmarklet looks like.
It displays a menu with links that load other bookmarklets including
Firebug Lite,
Page Resources,
DOM Monster,
SpriteMe,
and
CSSess.
The Mobile Perf menu is updated as new bookmarklets are released - so you get the latest tools automatically.
|
About each bookmarklet
Here's a sentence or two about each bookmarklet.
Click through to the bookmarklet's specific page for more information.
- Firebug Lite
- Everyone knows and loves Firebug for Firefox.
Firebug Lite is a bookmarklet version of Firebug that runs in all browsers including IE and WebKit.
It provides a Console, HTML viewer, DOM inspector, and more.
Some of the more advanced features of Firebug aren't there like the profiler, debugger, and Net Panel,
but when you're in a browser without tools (like mobile browsers!) Firebug Lite saves the day.
Yes! This is Firebug Lite the bookmarklet!
- Page Resources
- This is a new bookmarklet I just wrote that crawls the DOM and finds all the resources that were downloaded.
Since it's a bookmarklet it doesn't have HTTP headers, file sizes, download times, etc.
And it doesn't find resources that aren't in the DOM - like image beacons.
But until we have better tools this is an easy way to see what's being downloaded in the page.
- DOM Monster
- DOM Monster originally was only available if you purchased the
JavaScript Performance Rocks ebook by Thomas Fuchs and
Amy Hoy.
I bought the ebook and found DOM Monster to be really useful.
I contacted Thomas and Amy and they agreed to open source it independent of the book.
It provides DOM stats for the page and helpful tips on improving performance.
- SpriteMe
- I built this bookmarklet to create sprites from separate CSS background images.
- CSSess
- This bookmarklet finds unused CSS selectors.
These bookmarklets work great in desktop and tablet browsers.
They work in mobile browsers, too, but sometimes if the main page is too small the bookmarklet's info is too big and you can't scroll to see it.
I'm working on a possible solution to fix this that would work for all bookmarklets. Stay tuned.
Thanks to
Thomas Fuchs for giving me the idea of building this uber bookmarklet for mobile.
