You may not be aware of bookmarklets which are an underused tool in web designer or developer’s toolbox. A bookmarklet is a a term that merges bookmark and applet to add functionality to a web browser. They can be stored in the bookmark bar of any browser and used from there to perform useful tasks and consist primarily of Javascript code.
As Javascript is synonymous with web development, some clever developers have created some extremely helpful bookmarklets that can improve your day to day work. Here are ten of the best available.
1. Firebug Lite
All web designers and developers should be familiar with Firebug (if for some reason you’re not then go now) and Firebug Lite is a striped down version that works on all browsers. Especially useful for fixing IE issues.
Interesting fact: Firebug inspired the name for Inspect Element.
2. MRI
Enter the name of any selector into the text box and click the MRI button and this bookmarklet will highlight all of those selectors on the page.
3. Design
4. Resize Viewport
Very simple, click on the following links to resize your browser window to these common resolutions. Only works in Firefox but that’s most of you who read Inspect Element.
1024 x 768 |Â 1280 x 1024 | 1440 x 900 | 1680 x 1050
5. ReCSS
One of the most useful bookmarklets for development is ReCSS. It reloads the CSS file independent of the HTML which speeds up work considerably when you’re only writing CSS code.
6. Save to Delicious
Delicious is one of, if not the most, popular way of saving articles especially in the web design and development community. This bookmarlet provides a quick way to save the current page to Delicious. Give it a go and save this article to Delicious!
Bookmark this page on Delicious
7. Edit Current Website
Sure, you can preview edits of HTML text using Firebug or WebKit’s Web Inspector but this bookmarklet turns the whole page into a WYSIWYG editor. Of course these changes aren’t permanent and are only local to your machine but gives you a good idea of what changing content does to the page.
8. XRAY
Similar to Firebug Lite in that you can inspect elements on a page but much clearer to see what you have selected. Also seems to be quicker.
9. Layout Grid Bookmarklet
Having trouble lining up elements on a page? Andy Budd’s layout grid bookmarklet will come in handy as it overlays a transparent image of a grid, complete with pixel rulers along the X and Y axis.
10. Favelet Suite
The Favelet Suite bookmarklet is the Swiss Army knife of the web design bookmarklet world. It includes the following features:
- Color List
- Document Tree Chart
- HTML Attribute Viewer
- HTTP Header Viewer
- Hidden Field Modifier
- Javascript Object Tree
- MODIv2
- Mouseover DOM Inspector
- Object Dimensions
- Page Info
- Remove Children
- Resize Fonts
- Ruler
- Show Source
- Style Sheet Tweak
- Style Sheet Viewer
);void(myBody=document.getElementsByTagName('body')%5B0%5D);if(myDiv!=null){void(myBody.removeChild(myDiv));}else{void(myDiv=document.createElement%20('div'));void(myDiv.id='_grid_div_mrb');void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width=myBody.offsetWidth+%20'px');void(myDiv.style.height=myBody.offsetHeight+'px');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));}){kind=link}
A few brilliant little tools there, I’m going to have a play with them this afternoon.
Thanks
This is a nice list. Thanks for sharing. Really helpful stuff.
cheers!
The problem with the resize one is that it won’t work if you disable the allowance of a script to resize your window. There are some cool Firefox addons that get by this though.
Sweet list, keep on writing.
If you prefer your “Save to Delicious” bookmarklet to use a modal window, then there’s a solution for that at http://t.rc.vc/delicious/
Full PHP/JavaScript code is available.
Pretty okay list…
Hi,
It is really very good. I like this tips a lot as a Web Designer. Good Job !!
- Safi.
One of my favourites is jQuerify (http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet)
Great read, I’m definitely going to try out MRI, Design and XRay in Chrome.
great list..!!
keep it up..!!!
Great List! Remco’s suggestion for a modal delicious bookmarklet is great also!
Thank you so much!
Good list. In an unrelated matter, how come everything fades back on this site when you roll over it? Shouldn’t things that you are rolling over become clearer or somehow accentuated rather than fade away? It seems like it’s the opposite of what should happen.
Nice collection, definitely a few I haven’t heard of and will be checking out.
Great post. There are some really interesting and inspirational sites in this list.
I will try for my sites..
Some great ideas. I always struggle with design. Why not just download firebug? I found that works for most of these things.
nice list – the next addon generation has begun – my fave 3.Design and 8. Xray
Good ,I like.
thk!
This is a very good advice for me try and thanks for the advice you gave…
Excellent list of useful stuff, thanx
Killer list. I’ve been designing for years and had never heard of most of these. Thanks!
Cool, thanks for the list
Excellent list, thanks for sharing!
Bookmarklets are awesome – thanks for the list
I am using the bookmarlet Delicious and it really help me a lot in increasing the visibility of my website in the search engines.
great list…really useful
It is really very good. I like this tips.