5 ms·

Google Chrome Extensions for People Who Build Websites

118 points by tswicegood 16y ago

pmichaud 16y ago
The title is a little yucky with the "15", but the extensions mentioned are legitimately useful to web devs.
- AjJi 16y ago
  I think it's OK when it's not a top. The title is just stating the fact that 15 extensions are listed.
8ig8 16y ago
Until there's a full version of Firebug available for Chome, I'll be sticking with Firefox for development work.
- scotth 16y ago
  I agree with you that Chrome dev tools are lacking a bit, but what do you miss specifically? I find that the JS debugger is far better (or at least since the last time I worked with Firebug). That's enough for me.
  - hbt 16y ago
    - multi-line javascript console - inline viewing of ajax requests - go to link that works - urls that work - keyboard shortcuts for debugging (go to line, create breakpoint) - inspector with more options - easier to edit inline html with highlighting not raw text - connecting to console via other extensions (chrome API is very small compared to firefox API) - Better search in scripts - Better search in DOM tree - Better search in inspector - Less clicking when viewing remote content - Displaying remote content that works (file is loaded, content tab is empty) Only a matter of time before it's implemented in chrome. But, firebug already has all this stuff and it makes a huge difference when debugging JS Note: I wrote a couple of chrome extensions. Therefore, I cumulated more frustration than the average JS developer on chrome because switching to firebug is not even an option in my case ;-)
    - scotth 16y ago
      haha, that's a great list. A few of those have bothered me in passing (inline html/css editing, shortcuts, following links without resource tracking). If you need multiline and you're on a Mac (not sure about Windows), you've got option+return in the console.
    - catshirt 16y ago
      i did not recognize this until recently so i sympathize; but the chrome inspector has a javascript environment superior to firebug. i do suppose this is arguable, though. more objectively, you can definitely review ajax requests in the inspector- and I actually think this feature is superior as well. interestingly, I actually learned to love the chrome inspector because I was so fed up with using firefox in general (enough so that it's debugging capabilities did not outweigh the cons).
    - ELV1S 16y ago
      > - keyboard shortcuts for debugging (go to line, create breakpoint) F1 shows shortcuts. ⌘G: Go to Line How do you create a breakpoint with shortcut?
  - wanderr 16y ago
    In addition to hbt's complaints, the ability to see responses to requests from Flash, and not ripping out get vars from the URL would be incredibly useful (our api all talks to the same endpoint, but the method name is the first get var, making it really easy to find the proper call in Firebug, and a bitch to do the same in Chrome developer tools
  - 8ig8 16y ago
    Honestly, now that I think about it, my biggest gripe is that Firebug lite on Chrome feels like an add-on. On Firefox, it feels native, and thus more usable (to me). I've toyed around with various bookmarklet utilities to aid front-end developers. Firebug lite feels like one of those to me. I (maybe wrongly) perceive those as lightweight utilities. Based on your comment, it sounds like my issue may be more with usability than functionality. I haven't even given the lite version enough of a chance since I didn't realize the JS debugger might be superior. For the record, most of the time I'll use Firebug to tweak/debug some CSS. I'll also use it to track down JS issues. I've recently started to use it for server-side debugging with a couple php extensions. Right now, Chrome is my primary browser (OSX). I'd love to use it exclusively, but I still find myself bouncing between the two when developing. (Sometimes I find myself getting lost in a cycle of Safari, Chrome and Firefox windows, but that's a whole 'nother issue.) Edit: Fixed my use of parentheses.
    - scotth 16y ago
      I wasn't actually talking about Firebug Lite. I use Chrome Developer Tools (cmd+option+I mac, ctrl+shift+I pc). They are very Firebug-like.
maguay 16y ago
A couple more I find useful: - Evernote Web Clipper - for saving code snippets and notes about projects - Resize Window - to open a page in a resolution of your choice. Very useful. - Awesome Screenshot - take a screenshot and let people know what you think about a page ... if you're using Safari, Coda Notes is much nicer, though :) And, of course, the developer tools included in Chrome (first in Safari ... and they still are nicer there) are great, too. Any more extensions HN users find useful?
- hbt 16y ago
  Refer to http://news.ycombinator.com/formatdoc http://news.ycombinator.com/formatdoc for formatting options. Feel free to add a couple of links About chrome extensions: You might like vimium http://github.com/philc/vimium http://github.com/philc/vimium
  - sp4rki 16y ago
    If I could upvote you more I would! Vimium in Chrome is the bees knees! The best extension ever made, no discussion.
    - hbt 16y ago
      It needs a bit more work (if you compare it to vimperator on firefox). Especially some essential things like cursor mode, visual mode, bookmarks and keymarks Take a look at my fork (and others) for more stuff. http://github.com/hbt/vimium http://github.com/hbt/vimium
  - maguay 16y ago
    Thanks for the info ... I thought just pressing return once would make a new line, but obviously was wrong. So, for links: - Evernote Web Clipper for Chrome: https://chrome.google.com/extensions/detail/pioclpoplcdbaefihamjohnefbikjilc?hl=en https://chrome.google.com/extensions/detail/pioclpoplcdbaefi... - Window Resizer: https://chrome.google.com/extensions/detail/kkelicaakdanhinjdeammmilcgefonfh?hl=en https://chrome.google.com/extensions/detail/kkelicaakdanhinj... - Awesome Screenshot: https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce?hl=en https://chrome.google.com/extensions/detail/alelhddbbhepgpmg... - GleeBox is another pretty awesome extension for navigating pages via keyboard shortcuts: https://chrome.google.com/extensions/detail/miinkdcjglbkbanpkghnkgkgbamdkgji?hl=en https://chrome.google.com/extensions/detail/miinkdcjglbkbanp... And for Safari: Coda Notes - http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-available/ http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-... Vimium looks nice ... I'll have to give that a try.
abraham 16y ago
The Chrome extension gallery has a category for web developer tools: https://chrome.google.com/extensions/featured/web_dev https://chrome.google.com/extensions/featured/web_dev I don't know how the article missed Speed Tracer. https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl https://chrome.google.com/extensions/detail/ognampngfcbddbfe...
- mike4u 16y ago
  They also missed iMacros for Chrome - great for web regression tests (record & replay). A bit like Selenium, but easier to use for quick testing/performance measurements. https://chrome.google.com/extensions/detail/deckhobdafgddaglbaokimbcjjdikago https://chrome.google.com/extensions/detail/deckhobdafgddagl...
nowarninglabel 16y ago
The color picker module does not do what is stated in this article, did they even try it? The feedback section for color picker is riddled with comments that it doesn't do what people would naturally think it would do (pick out a color on the page using an 'eye dropper' like functionality. Fortunately, there is both an actual 'eye dropper' extension and the 'color pick' extension. Eye dropper never worked for me on my Linux box, but color pick works like a charm. Here is its extension page: https://chrome.google.com/extensions/detail/ohcpnigalekghcmgcdcenkpelffpdolg https://chrome.google.com/extensions/detail/ohcpnigalekghcmg...
mhansen 16y ago
No stylebot? For me, it's the biggest innovation in CSS editing since Firebug. http://stylebot.me/ http://stylebot.me/
- sandGorgon 16y ago
  thank you so much for this - right when I needed it !
- abraham 16y ago
  I was just looking for this yesterday but couldn't remember what it was called.
deleted 16y ago
[deleted]
crizCraig 16y ago
I like cqstyle for editing CSS in Chrome. However, I may be partial since I wrote it. https://chrome.google.com/extensions/detail/kgjoohfhbbdcbnecemfodgoofpohgbee https://chrome.google.com/extensions/detail/kgjoohfhbbdcbnec...
CWIZO 16y ago
Firebug Lite link seems to be broken in the article. This link works: https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench https://chrome.google.com/extensions/detail/bmagokdooijbeehm...
edanm 16y ago
For anyone using the "color picker" extension, there is a better option (Windows only, sorry). I use ClipX, which is a utility for having clipboard history (i.e., you can ctrl+c 10 things and have them all available.) It's amazingly useful, and works exactly as you'd expect out of the box. It has an extension called Color Picker, which gives you a shortcut for popping up a Color Picker/Eye Dropper tool whenever and wherever you want, anywhere inside you Operating System. It's customizable as to what exactly gets copied to your clipboard. It is a much better option than having an extension, IMO, both because it's part of a utility I use anyway, and because it is available anywhere inside Windows, not just your browser.
- fharper1961 16y ago
  It's Windows only; which you did mention, but only at the very end of your comment.
- stuartloxton 16y ago
  For OSX I use 'DigitalColor Meter', comes with all OS X's and isn't browser based. Can do Hex + RGB, install Afloat and you can keep it above all windows on your mac.
- th0ma5 16y ago
  i really like agave on ubuntu, using color theory
BonoboBoner 16y ago
As much as I liked that list, I stopped from installing all of them, because they scare me. Call me stupid and paranoid, but I dont understand why a friggin "color-picker"-extension would require full access to my browsing history. If anyboy can explain, I d be glad to be informed on why that is.
dionysus 16y ago
save

118 points by tswicegood 16y ago

pmichaud 16y ago

The title is a little yucky with the "15", but the extensions mentioned are legitimately useful to web devs.

AjJi 16y ago
I think it's OK when it's not a top. The title is just stating the fact that 15 extensions are listed.

8ig8 16y ago

Until there's a full version of Firebug available for Chome, I'll be sticking with Firefox for development work.

scotth 16y ago
I agree with you that Chrome dev tools are lacking a bit, but what do you miss specifically? I find that the JS debugger is far better (or at least since the last time I worked with Firebug). That's enough for me.
- hbt 16y ago
  - multi-line javascript console - inline viewing of ajax requests - go to link that works - urls that work - keyboard shortcuts for debugging (go to line, create breakpoint) - inspector with more options - easier to edit inline html with highlighting not raw text - connecting to console via other extensions (chrome API is very small compared to firefox API) - Better search in scripts - Better search in DOM tree - Better search in inspector - Less clicking when viewing remote content - Displaying remote content that works (file is loaded, content tab is empty) Only a matter of time before it's implemented in chrome. But, firebug already has all this stuff and it makes a huge difference when debugging JS Note: I wrote a couple of chrome extensions. Therefore, I cumulated more frustration than the average JS developer on chrome because switching to firebug is not even an option in my case ;-)
  - scotth 16y ago
    haha, that's a great list. A few of those have bothered me in passing (inline html/css editing, shortcuts, following links without resource tracking). If you need multiline and you're on a Mac (not sure about Windows), you've got option+return in the console.
  - catshirt 16y ago
    i did not recognize this until recently so i sympathize; but the chrome inspector has a javascript environment superior to firebug. i do suppose this is arguable, though. more objectively, you can definitely review ajax requests in the inspector- and I actually think this feature is superior as well. interestingly, I actually learned to love the chrome inspector because I was so fed up with using firefox in general (enough so that it's debugging capabilities did not outweigh the cons).
  - ELV1S 16y ago
    > - keyboard shortcuts for debugging (go to line, create breakpoint) F1 shows shortcuts. ⌘G: Go to Line How do you create a breakpoint with shortcut?
- wanderr 16y ago
  In addition to hbt's complaints, the ability to see responses to requests from Flash, and not ripping out get vars from the URL would be incredibly useful (our api all talks to the same endpoint, but the method name is the first get var, making it really easy to find the proper call in Firebug, and a bitch to do the same in Chrome developer tools
- 8ig8 16y ago
  Honestly, now that I think about it, my biggest gripe is that Firebug lite on Chrome feels like an add-on. On Firefox, it feels native, and thus more usable (to me). I've toyed around with various bookmarklet utilities to aid front-end developers. Firebug lite feels like one of those to me. I (maybe wrongly) perceive those as lightweight utilities. Based on your comment, it sounds like my issue may be more with usability than functionality. I haven't even given the lite version enough of a chance since I didn't realize the JS debugger might be superior. For the record, most of the time I'll use Firebug to tweak/debug some CSS. I'll also use it to track down JS issues. I've recently started to use it for server-side debugging with a couple php extensions. Right now, Chrome is my primary browser (OSX). I'd love to use it exclusively, but I still find myself bouncing between the two when developing. (Sometimes I find myself getting lost in a cycle of Safari, Chrome and Firefox windows, but that's a whole 'nother issue.) Edit: Fixed my use of parentheses.
  - scotth 16y ago
    I wasn't actually talking about Firebug Lite. I use Chrome Developer Tools (cmd+option+I mac, ctrl+shift+I pc). They are very Firebug-like.

maguay 16y ago

A couple more I find useful: - Evernote Web Clipper - for saving code snippets and notes about projects - Resize Window - to open a page in a resolution of your choice. Very useful. - Awesome Screenshot - take a screenshot and let people know what you think about a page ... if you're using Safari, Coda Notes is much nicer, though :) And, of course, the developer tools included in Chrome (first in Safari ... and they still are nicer there) are great, too. Any more extensions HN users find useful?

hbt 16y ago
Refer to http://news.ycombinator.com/formatdoc http://news.ycombinator.com/formatdoc for formatting options. Feel free to add a couple of links About chrome extensions: You might like vimium http://github.com/philc/vimium http://github.com/philc/vimium
- sp4rki 16y ago
  If I could upvote you more I would! Vimium in Chrome is the bees knees! The best extension ever made, no discussion.
  - hbt 16y ago
    It needs a bit more work (if you compare it to vimperator on firefox). Especially some essential things like cursor mode, visual mode, bookmarks and keymarks Take a look at my fork (and others) for more stuff. http://github.com/hbt/vimium http://github.com/hbt/vimium
- maguay 16y ago
  Thanks for the info ... I thought just pressing return once would make a new line, but obviously was wrong. So, for links: - Evernote Web Clipper for Chrome: https://chrome.google.com/extensions/detail/pioclpoplcdbaefihamjohnefbikjilc?hl=en https://chrome.google.com/extensions/detail/pioclpoplcdbaefi... - Window Resizer: https://chrome.google.com/extensions/detail/kkelicaakdanhinjdeammmilcgefonfh?hl=en https://chrome.google.com/extensions/detail/kkelicaakdanhinj... - Awesome Screenshot: https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce?hl=en https://chrome.google.com/extensions/detail/alelhddbbhepgpmg... - GleeBox is another pretty awesome extension for navigating pages via keyboard shortcuts: https://chrome.google.com/extensions/detail/miinkdcjglbkbanpkghnkgkgbamdkgji?hl=en https://chrome.google.com/extensions/detail/miinkdcjglbkbanp... And for Safari: Coda Notes - http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-available/ http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-... Vimium looks nice ... I'll have to give that a try.

abraham 16y ago

The Chrome extension gallery has a category for web developer tools: https://chrome.google.com/extensions/featured/web_dev https://chrome.google.com/extensions/featured/web_dev I don't know how the article missed Speed Tracer. https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl https://chrome.google.com/extensions/detail/ognampngfcbddbfe...

mike4u 16y ago
They also missed iMacros for Chrome - great for web regression tests (record & replay). A bit like Selenium, but easier to use for quick testing/performance measurements. https://chrome.google.com/extensions/detail/deckhobdafgddaglbaokimbcjjdikago https://chrome.google.com/extensions/detail/deckhobdafgddagl...

nowarninglabel 16y ago

The color picker module does not do what is stated in this article, did they even try it? The feedback section for color picker is riddled with comments that it doesn't do what people would naturally think it would do (pick out a color on the page using an 'eye dropper' like functionality. Fortunately, there is both an actual 'eye dropper' extension and the 'color pick' extension. Eye dropper never worked for me on my Linux box, but color pick works like a charm. Here is its extension page: https://chrome.google.com/extensions/detail/ohcpnigalekghcmgcdcenkpelffpdolg https://chrome.google.com/extensions/detail/ohcpnigalekghcmg...

mhansen 16y ago

No stylebot? For me, it's the biggest innovation in CSS editing since Firebug. http://stylebot.me/ http://stylebot.me/

sandGorgon 16y ago
thank you so much for this - right when I needed it !
abraham 16y ago
I was just looking for this yesterday but couldn't remember what it was called.

deleted 16y ago

[deleted]

crizCraig 16y ago

I like cqstyle for editing CSS in Chrome. However, I may be partial since I wrote it. https://chrome.google.com/extensions/detail/kgjoohfhbbdcbnecemfodgoofpohgbee https://chrome.google.com/extensions/detail/kgjoohfhbbdcbnec...

CWIZO 16y ago

Firebug Lite link seems to be broken in the article. This link works: https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench https://chrome.google.com/extensions/detail/bmagokdooijbeehm...

edanm 16y ago

For anyone using the "color picker" extension, there is a better option (Windows only, sorry). I use ClipX, which is a utility for having clipboard history (i.e., you can ctrl+c 10 things and have them all available.) It's amazingly useful, and works exactly as you'd expect out of the box. It has an extension called Color Picker, which gives you a shortcut for popping up a Color Picker/Eye Dropper tool whenever and wherever you want, anywhere inside you Operating System. It's customizable as to what exactly gets copied to your clipboard. It is a much better option than having an extension, IMO, both because it's part of a utility I use anyway, and because it is available anywhere inside Windows, not just your browser.

fharper1961 16y ago
It's Windows only; which you did mention, but only at the very end of your comment.
stuartloxton 16y ago
For OSX I use 'DigitalColor Meter', comes with all OS X's and isn't browser based. Can do Hex + RGB, install Afloat and you can keep it above all windows on your mac.
th0ma5 16y ago
i really like agave on ubuntu, using color theory

BonoboBoner 16y ago

As much as I liked that list, I stopped from installing all of them, because they scare me. Call me stupid and paranoid, but I dont understand why a friggin "color-picker"-extension would require full access to my browsing history. If anyboy can explain, I d be glad to be informed on why that is.

dionysus 16y ago

save