11 ms·

Super Useful Chrome Plugins for Front-End Developers

47 points by javatuts 2y ago

throwaway743950 2y ago
It's unfortunate that chrome extensions are major security liabilities.
- password4321 2y ago
  such as "EditThisCookie", still going strong though back in 2021 per https://old.reddit.com/r/youtubedl/comments/jcvutb/the_cookiestxt_extension_has_been_removed_from/gu89zh9/ 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 https://news.ycombinator.com/item?id=37772829 1 year ago. https://stackoverflow.com/questions/27657617/how-to-disable-google-chrome-extension-autoupdate https://stackoverflow.com/questions/27657617/how-to-disable-...
- yen223 2y ago
  Yeah, as a web developer you're better off learning all the things plain old Chrome DevTools can do
  - chrisweekly 2y ago
    "plain old" devtools is really, really powerful in the hands of an expert user.
- seanwilson 2y ago
  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.
lylejantzi3rd 2y ago
CSS Scan and CSS Pro are two of the best chrome extensions for front-end developers I know of. https://getcssscan.com/ https://getcssscan.com/ https://csspro.com/ https://csspro.com/
- w-ll 2y ago
  what lol? $100 bucks for a custom inspector that can copy the compiled css?
  - Brajeshwar 2y ago
    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.”
    - huimang 2y ago
      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.
- system2 2y ago
  LOL no thanks. I would only download it from the chrome store with legit reviews. And not paid.
  - lylejantzi3rd 2y ago
    [flagged]
    - system2 2y ago
      [flagged]
jgrant114 2y ago
https://jam.dev https://jam.dev is the best debugging / qa tool. Not sure how they missed it.
system2 2y ago
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.
- javatuts 2y ago
  2, 5 -> 9. Ahrefs SEO Toolbar 4 -> 3. Wappalyzer 7 -> 1. CSS Peeper 11 -> PrtSc (seriously ;-) Some plugins are very useful – thank you!
  - system2 2y ago
    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.
    - javatuts 2y ago
      For screens I use - GoFullPage, https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en https://chromewebstore.google.com/detail/gofullpage-full-pag... SimilarWeb is great, but it's very expensive.
gman83 2y ago
I use these the most: https://responsiveviewer.org/ https://responsiveviewer.org/ https://stylebot.dev/ https://stylebot.dev/ https://superdevpro.com/ https://superdevpro.com/
- javatuts 2y ago
  thank you, I just installed Stylebot
seanwilson 2y ago
Here's my extension that crawls pages for on-page SEO, speed and security best practices: https://www.checkbot.io/ 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.
shahzaibmushtaq 2y ago
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.

47 points by javatuts 2y ago

throwaway743950 2y ago

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

password4321 2y ago
such as "EditThisCookie", still going strong though back in 2021 per https://old.reddit.com/r/youtubedl/comments/jcvutb/the_cookiestxt_extension_has_been_removed_from/gu89zh9/ 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 https://news.ycombinator.com/item?id=37772829 1 year ago. https://stackoverflow.com/questions/27657617/how-to-disable-google-chrome-extension-autoupdate https://stackoverflow.com/questions/27657617/how-to-disable-...
yen223 2y ago
Yeah, as a web developer you're better off learning all the things plain old Chrome DevTools can do
- chrisweekly 2y ago
  "plain old" devtools is really, really powerful in the hands of an expert user.
seanwilson 2y ago
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.

lylejantzi3rd 2y ago

CSS Scan and CSS Pro are two of the best chrome extensions for front-end developers I know of. https://getcssscan.com/ https://getcssscan.com/ https://csspro.com/ https://csspro.com/

w-ll 2y ago
what lol? $100 bucks for a custom inspector that can copy the compiled css?
- Brajeshwar 2y ago
  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.”
  - huimang 2y ago
    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.
system2 2y ago
LOL no thanks. I would only download it from the chrome store with legit reviews. And not paid.
- lylejantzi3rd 2y ago
  [flagged]
  - system2 2y ago
    [flagged]

jgrant114 2y ago

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

system2 2y ago

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.

javatuts 2y ago
2, 5 -> 9. Ahrefs SEO Toolbar 4 -> 3. Wappalyzer 7 -> 1. CSS Peeper 11 -> PrtSc (seriously ;-) Some plugins are very useful – thank you!
- system2 2y ago
  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.
  - javatuts 2y ago
    For screens I use - GoFullPage, https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=en https://chromewebstore.google.com/detail/gofullpage-full-pag... SimilarWeb is great, but it's very expensive.

gman83 2y ago

I use these the most: https://responsiveviewer.org/ https://responsiveviewer.org/ https://stylebot.dev/ https://stylebot.dev/ https://superdevpro.com/ https://superdevpro.com/

javatuts 2y ago
thank you, I just installed Stylebot

seanwilson 2y ago

Here's my extension that crawls pages for on-page SEO, speed and security best practices: https://www.checkbot.io/ 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.

shahzaibmushtaq 2y ago

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.