Super Useful Chrome Plugins for Front-End Developers | Hacker News Reader

Super Useful Chrome Plugins for Front-End Developers

jsdevspace.substack.com

47 pointsjavatuts31 comments

As a front-end/full-stack developer do not rely on super useful browser plugins if you or other developers have trust issues with the plugin developer(s). Instead, learn how to use DevTools and take a solid command of it.

There are many missing, I am only posting the ones related to web development:

1-) DarkReader (protect your eyes while working at night)

2-) SimilarWeb (site rank)

3-) IPWhois (registrar and IP info. Some other useful stuff too)

4-) BuiltWith (how can this be not on the list?!)

5-) Seo Analysis by WooRank (good detailed SEO stuff)

6-) Web Developer by Chris Pederick (disable js and other mods)

7-) StyleBot (edit and override CSS)

8-) TamperMonkey (Inject JS. I can't live without this and I already have over 30 scripts running)

9-) Edit this cookie (cookie editor, very useful and detailed cookie info)

10-) Clear Session (deletes per-site session info)

11-) FireShot (screenshot)

12-) MousePinchZoom (desktop mouse zoom function instead of scaling the screen. Very useful for development for checking the elements up close)

13-) Word Count (count selected text word count, useful for article SEO related stuff)

I have more semi-developer ones that are not listed here. I really use these on a daily basis and removing any would disrupt my workflow.

2, 5 -> 9. Ahrefs SEO Toolbar

4 -> 3. Wappalyzer

7 -> 1. CSS Peeper

11 -> PrtSc (seriously ;-)

Some plugins are very useful – thank you!

Wappalyzer opens a bunch of popups promoting their stuff. Also doesn't list historical data like BuiltWith does. BuiltWith is on another level compared to Wappalyzer.

I also use CssPeeper, to download assets with one click. The others do what csspeeper can't.

Ahrefs SEO toolbar doesn't have historical data as similarweb. However, I am using it as another tester.

PrintScreen does not take full-page screenshots with scrolling, turns into pdf, and allows you to annotate or email. Try and you will see the difference.

For screens I use - GoFullPage, https://chromewebstore.google.com/detail/gofullpage-full-pag...

SimilarWeb is great, but it's very expensive.

The free version with registration gives enough info for individual sites. I use their paid version too but I am thinking about dropping it. I am just using it for the website category first 300 leaders which I think is a little inconsistent. I miss Alexa days. Alexa was really accurate.

It's unfortunate that chrome extensions are major security liabilities.

such as "EditThisCookie", still going strong though back in 2021 per https://old.reddit.com/r/youtubedl/comments/jcvutb/the_cooki...

> the Chrome store version is 1.6.3 and was changed November 2020 (same time a lot of other addons were hijacked / sold to malicious authors). The github version is 1.5.0 from 2018!

I personally had left "ModHeader" installed when I read Tell HN: The popular Chrome extension ModHeader is injecting ads into searches https://news.ycombinator.com/item?id=37772829 1 year ago.

https://stackoverflow.com/questions/27657617/how-to-disable-...

Yeah, as a web developer you're better off learning all the things plain old Chrome DevTools can do

"plain old" devtools is really, really powerful in the hands of an expert user.

My tip for this is to install web dev extensions in a new Chrome profile, that way the extensions are completely isolated from your regular browsing. Or even install extensions in Chrome Canary or Chrome Beta which run alongside regular Chrome so there's even more distance from your email, banking etc. stuff.

I use these the most:

https://responsiveviewer.org/

https://stylebot.dev/

https://superdevpro.com/

thank you, I just installed Stylebot

Here's my extension that crawls pages for on-page SEO, speed and security best practices:

https://www.checkbot.io/

It's the only extension I know of that checks multiple pages at once, so it'll find problems you usually miss checking one page at a time, and can spot issues across pages like duplicate page titles/headings/descriptions/content (e.g. Google will group, hide or rename these kinds of pages in search results, so you lose some control), duplicate asset files that can hurt caching, and lets you explore/audit your internal links/redirects.

CSS Scan and CSS Pro are two of the best chrome extensions for front-end developers I know of.

https://getcssscan.com/

https://csspro.com/

what lol? $100 bucks for a custom inspector that can copy the compiled css?

A few days back, someone commented on my comment on a different thread, “Lots of noob chess players out there to beat!”

There are lots of CSS developers who would benefit from spending that $100.

I've worked with developers who always copy codes from the manual and online help “to avoid syntax errors.”

There's always gullible marks. You could just tell them to open the web developer tools for their browser instead of pushing predatory products, though.

Charging $100 for that (on sale!) is a sick joke.

LOL no thanks. I would only download it from the chrome store with legit reviews. And not paid.

A chrome extension with a affiliate program?!

https://jam.dev is the best debugging / qa tool. Not sure how they missed it.

Reply on news.ycombinator.com