Browser tools to enhance web dev / design?

Browser tools to enhance web dev / design?

Evan

Evan

Wordpress / Divi / Avada / Oxygen
Local time
12:58
Joined
Oct 5, 2019
Messages
56

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.

 
Last edited:
sfcgeorge

sfcgeorge

Sonic the developer
Gold Member
Local time
17:58
Joined
Oct 5, 2019
Messages
129
Pronouns
He/Him

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 ↻

Code: 
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.

 
Last edited:
adam

adam

Mr. Webwide
Administrator
Local time
17:58
Joined
Sep 24, 2019
Messages
1,261
Pronouns
he/him

sfcgeorge said:
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 ↻

Code: 
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.

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

 
Top