We all need toolkit that makes our jobs a little bit easier. As a QE there are several chrome extensions that i use everyday that boosts my productivity and reduces chunk of extra workload Here are all of them
BlazeMeter | The Continuous Testing Platform
Blazemeter plugin is easiest way to record your performance script in jmeter
this is a handy tool for doing exploratory testing. it's opensorce and provides you with range of test data to check edge cases of your app.
its a link checker that crawls through your webpage and looks for broken links.
Exploratory Testing Chrome Extension
another must have plugin for Exploratory Testing. you can gp page by page take a screenshot and write bugs, ideas, notes etc..
How many time you have browse through a article had some thoughts and forgot after some time. Well no more.
with this extension, you can create notes on any web page and when you open that page again, the notes will get loaded automatically.
Quickly need to check the loading time for your webpage ? there is a extension for it.
Screencastify - Screen Video Recorder
I use this plugin to record product workflows, bugs etc...
In Free tire it gives you 50 recordings per month with max 10 min. recording per session. you can download saved videos from Google drive or export it as gifs.
i have been using it for some time and never needed to upgrade to paid plan.
easiest way to find what kind of font is being used on any portion of webpage without going into the details of devtools.
And of course our all time favorite
So, What are plugins / extensions that you use which has become integrated part of your work ?
Top comments (76)
All browsers should come pre-installed with uBlock Origin.
I used to have a LOT of browser extensions but now I try to keep only to a few ones, currently on my Firefox:
same here, i got rid of lots of extensions which i was using occasionally. Now i keep only few handful of them which i use everyday.
off topic, but how did you quote that?
Just go to new line and add > and your quote.
here is a quick Markdown Cheatsheet
is this with firefox or chrome?
Typically I'm using Chrome Canary for development and these are my must-have plugins I sync across all my accounts,
I should have mentioned JSONView in mine.
It makes working with REST APIs so much easier by presenting JSON in a more readable format.
A very good collection. Specially Funkify and Spectrum. they are definitely going into my accessibility testing toolkit.
Vue, Augury and React Dev Tools.
All three of those make debugging those frameworks soooo much easier.
And Vue is the best of them. It watches your
$emitevents, it keeps track of Vuex, it shows you your props and state. I love it.
Outside of web dev, I also use LastPass to keep my passwords managed. Though I'm finding Firefox and Chrome are quickly making it more redundant.
Select text and search from the context menu or a tiled popup using any of your installed search engines.
Drag-Select Link Text
Easily select the text in links. So damn useful when you need to copy and paste some text that is part of a link!
Mouse gestures to control the browser. Less moving hands between mouse and keyboard.
New Tab Override
New Tab Override brings back the ability to change the page which is shown when opening a new tab.
Automatically save the content in a text input field. Saves you having to retype it when a web-site barfs and the text would be otherwise lost.
I don't care about cookies
Get rid of annoying cookie warnings from almost all 'infected' websites!
Make Medium Readable Again
Improves the Medium reading experience, ruined by user engagement tactics.
Neat URL cleans URLs, removing parameters such as Google Analytics' utm parameters.
Click the toolbar button, and any element with 'position: fixed' is removed from the page. Clears up pages cluttered with frozen headers and share buttons. (For some reason, I usually have to click it twice for it to have an effect.)
A bit more specialist, but useful to some
Bookmark Tab Here
Adds context menu item 'Bookmark Tab Here' to Bookmarks Menus as an alternative bookmarking method.
Easy Youtube Video Downloader Express
Seems to be the best of the add-ons to download video from youtube.
Because RSS feeds are not dead.
Firefox Multi-Account Containers
If you have multiple accounts on the same site, then this can really save you having to log out and log in again to switch accounts all the time.
If you are a markdown aficionado this lets use write in markdown then click a button to toggle to formatted. Useful for web-based email (gmail, etc) and other sites like blogger or wordpress.
Regularly monitors a page for changes.
More developer specific
Empty Cache Button
Toolbar button to empty the browser cache.
HTML validation inside Firefox. The number of errors of a HTML page is seen on the form of an icon and details in a developer tools tab.
Quickly open current web page in another browser.
Repeat after me, it is not an 'ad blocker', it is a HTML firewall.
Bitwarden Passward Manager
The best password manager IMO.
When a tab closes, any cookies not being used are automatically deleted. Whitelist the ones you trust while deleting the rest. (Note: It can generate strange behaviour on some sites, or pop-ups that normally only show once will repeat.)
Protects you against tracking through "free", centralized, content
delivery. It prevents a lot of requests from reaching networks like
Google Hosted Libraries, and serves local files to keep sites from
Enables HTTPS encryption automatically on sites that are known to
support it, even when you type URLs or follow links that omit the https:
Automatically learns to block invisible trackers.
Others I haven't used by are on my list to try
HTTPS by default
Request websites over secure https by default from the location bar instead of insecure http.
Prevent Facebook from tracking you around the web. The Facebook
Container extension for Firefox helps you take control and isolate your
web activity from Facebook.
Wow! that's a very long list Evan. going to need my Tea for this one.😄
Funny, I have no development-oriented addon on Firefox! That's what I have:
great stuff. you are heavy on how you surf web. :)
I love Privacy Badger! I still have Greasemonkey installed, too.
Is shameless self promotion ok if it's to fight climate change? Using co2ok.ninja webshops pay to make your purchase there climate neutral (shipping and production). Also, we finance projects that not only directly reduce emmions, but also help people in developing nations.
yes it is. cool website with noble concept. Great work Milo
Thanks! It's hard work, we're currently having a bit of a rough patch (among others is surprisingly hard to get press/influencers). Little things like your comment are what keeps me going.
are you using the extensions reloader url to automate the reloading?
Yep! Especially when the extension icons don't update after I enable/load an extension (which I think is unintended behavior), I just go to reload.extensions and everything works as intended!
well i mean are you tying it into a save trigger by your code editor or something? id like to set that up somehow.
Does this help? dev.to/sgvictorino/reloading-your-... 😃
React Developer Tools
ColorZilla - color picker from anywhere on the page
Grammarly - better spell and grammar checker
Inifinite dashboard - I use it to have only a nice image and nothing else on the new tab
LastPass - password manager
Appear.in screen sharing - for my service of choice to make video calls
GitHub SLOC - shows the number of lines in a repo, somehow, to me, it feels important :)
Toolkit for YNAB - youneedabudget.com is an amazing budget planning tool, this is an extension to make it even better
Evernote Clipper - not sure yet about this one
I have heard good things about youneedabudget.com. didn't know they had chrome plugin.
I think it's not theirs, it's an independent thing. It adds some nice UX tweaks to the webapp.
thank you for the info @simoroshka ☺
CSS Reloader - reloads page stylesheets without reloading the page itself, highly useful especially when designing for SPAs or other instances where full reloads reset the application state.
I thought only Hugo can do that. this is very useful for designers.
Full Page Screen Capture
JSONView - Validate and view JSON documents
Allow-Control-Allow-Origin: * - Allows to you request any site with ajax from any source. Adds to response 'Allow-Control-Allow-Origin: *' header
i'm curious. where do you use Allow-Control-Allow-Origin: * ?
if you don't mind.can you provide some working applications/examples ?
It's for testing Rest APIs on localhost. Our enterprise system disabled CORS. This tool allows for a quick hack.
I'm currently using the following extensions:-
Redux Dev Tools - React debugging tools to the Chrome Developer Tools
axe - Accessibility testing in Chrome Developer Tools
VisBug - Open source browser design tools
Sizzy - Tool for developing responsive websites crazy-fast
axe seems cool. how does it compare to WAVE ?
Haven't used WAVE, so can't give a comparison. All I can say is axe is really good.
The Grammarly plugin is rather nice because I'm not a native speaker.
I'm a native speaker and I use Grammarly all of the time! :D
Standard Adblock Plus and 1Password.
The last couple of months I added these 3 dev related extensions.
Btw these are all open source so you could always contribute improvements.
i am sold on JSON Viewer and CodeCopy. definitely gonna try.