Browser tools to enhance web dev / design?

[Evan]

What browser add-ons / extensions does everyone use to aid them in web development / design?

I use ColorZilla to quickly grab color codes and look at a website's color palette
Gyazo for quick screenshots and uploading
Tab Notes - not really specific to web dev / design, but it's very useful.

I know Firefox's developer tools allow for finding color codes and screenshots, but the addons are a bit quicker and easier to use in my opinion.

 

[sfcgeorge]

I use this basic CSS reload bookmarklet. You drag it into your bookmarks toolbar and when you click it all CSS on the page is reloaded. It's useful for local development when you've made CSS changes but refreshing the whole page is slow.

CSS ↻

javascript:%7Blet%20e=(e,t=document)=%3EArray.from(t.querySelectorAll(e)),t=r=%3E%7Bfor(let%20t%20of%20e('link%5Brel=stylesheet%5D%5Bhref%5D',r))%7Blet%20e=new%20URL(t.href);e.searchParams.set('forceReload',Date.now()),t.href=e%7Dfor(let%20o%20of%20e('iframe',r))o.contentDocument&&t(o.contentDocument)%7D;t()%7D

---

Quite sensibly Webwide seems to block/mangle Javascript links so you'll have to edit the HREF with the code in the code block (no http!). Then it can be dragged to your bookmarks toolbar.

 

[Adam]

I use this basic CSS reload bookmarklet. You drag it into your bookmarks toolbar and when you click it all CSS on the page is reloaded. It's useful for local development when you've made CSS changes but refreshing the whole page is slow.

CSS ↻

javascript:%7Blet%20e=(e,t=document)=%3EArray.from(t.querySelectorAll(e)),t=r=%3E%7Bfor(let%20t%20of%20e('link%5Brel=stylesheet%5D%5Bhref%5D',r))%7Blet%20e=new%20URL(t.href);e.searchParams.set('forceReload',Date.now()),t.href=e%7Dfor(let%20o%20of%20e('iframe',r))o.contentDocument&&t(o.contentDocument)%7D;t()%7D

---

Quite sensibly Webwide seems to block/mangle Javascript links so you'll have to edit the HREF with the code in the code block (no http!). Then it can be dragged to your bookmarks toolbar.

That is handy! Perfect for styling pages somewhere within a flow that refreshing screws up.