4 ms·

Google Code Blog: Chrome Extensions for Web Development

61 points by ez77 16y ago

The page that features Chrome extensions for web development: https://chrome.google.com/extensions/featured/web_dev

deleted 16y ago
[deleted]
ez77 16y ago
It's interesting that Google hasn't incorporated some of these extensions into their devtools.
- kellegous 16y ago
  Looks like that's going to happen soon. Speed Tracer is likely to become a part of Chrome's inspector, for instance.
ez77 16y ago
Here is the extensions page: https://chrome.google.com/extensions/featured/web_dev https://chrome.google.com/extensions/featured/web_dev
pilif 16y ago
What constantly seems missing is a way to change the user agent header. There is User-Agent Switcher for Chrome, but it only changes the Agent for JavaScript on the page - the header sent to the server is still the original one. Presumably this is a limitation of the API provided to the extensions.
- adamdecaf 16y ago
  Run chrome from the command line google-chrome --user-agent="Ipad"
esers 16y ago
There doesn't seem to be a Chrome equivalent to "Live HTTP Headers" for Firefox. Viewing, logging, replaying, and manipulating HTTP headers is an absolute _must_ for many web developers. Wireshark is fantastic, but having this feature embedded in the browser is very useful.
- enomar 16y ago
  The resources tab in the developer tools is a good start. But I'd love to see the ability in the extensions API to inspect (and manipulate) the HTTP stream.
- johnswamps 16y ago
  It would be great, but the API support is not there, which is why there aren't any extensions to spoof your user-agent either. Compared to Firefox extensions (which basically let you do everything), Chrome extensions are much more fine-grained and can only use APIs specifically designed for use with extensions. There are several features that Chrome extensions developers have been requesting, such as this and the ability to prevent elements from being loaded (which is why there is no noscript and all the ad blockers are only half-baked solutions)
eekfuh 16y ago
I'd like to start using Chrome for everything (currently I use Chrome for browsing, FF for dev) but until I can clear the cache with a single button AND be able to quickly delete the cookies for the domain I'm on at the time, I gotta keep using FF with webdev toolbar.
aboodman 16y ago
Omnibus-response to previous comments: - The ability to intercept and modify requests is indeed missing. We've had some proposals for how to add that to our APIs, but nothing concrete yet. - We're working on the ability to manipulate the cookie store: http://src.chromium.org/cgi-bin/gitweb.cgi?p=chromium.git;a=blob;f=chrome/common/extensions/api/extension_api.json;h=c6094b6020d96b554ced8403e8dab57df1347fc2;hb=HEAD#l2761 http://src.chromium.org/cgi-bin/gitweb.cgi?p=chromium.git;a=... - The browser cache isn't something we've ever even thought about before. Thanks for bringing it up.
mrinterweb 16y ago
Firebug has set the bar for in browser web development tools. Until something can offer the same or better abilities as Firebug, I'm sticking with Firefox and Firebug for my web dev.
- rictic 16y ago
  Have you checked out the Web Inspector, built into Chrome and Safari? In my experience so far the only place it falls behind Firebug is in CSS editing, in every other way it seems superior. I'd be interested if you disagree. More info: http://webkit.org/blog/829/web-inspector-updates/ http://webkit.org/blog/829/web-inspector-updates/
  - mrinterweb 16y ago
    I'll have to check out the built in developer tools more. live CSS editing is one of the main things I use Firebug for , for me, that is a big feature to be missing. I do love the "Event Listeners" feature in the Developer Tools. That is very handy for easily finding what javascript events are unobtrusively bound to an element. So I can definitely see myself using the webkit developer tools in the near future.
    - adamdecaf 16y ago
      It's a hack, but you can just edit the element inline (by double or right clicking the element under the "Elements" tag) and edit the styles via style="".
    - loislo 16y ago
      You can add/edit/delete/css properties in the styles pane with help of double-click. It is not true live-edit but its working.
jonursenbach 16y ago
I really wish I were able to use SpeedTracer on Chrome and without having to append "--enable-extension-timeline-api" to the command line flag.
chasingsparks 16y ago
I'm happy to see Chris Pederick's Web Developer has been ported. https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm https://chrome.google.com/extensions/detail/bfbameneiokkgbdm...
- lftl 16y ago
  It's missing a ton of the functionality from the FF version where Chrome doesn't offer comparable APIs.
ez77 16y ago
Could someone explain why Speed Tracer shows some "Script Evaluation" even for plain vanilla HTML pages with no <script> tags? I see two scripts: the first one has the URL field blank, while the second one reads "chrome-extension://ognampngfcbddbfemdapefohjiobgbdl/data_loader.js". Thanks!

61 points by ez77 16y ago

The page that features Chrome extensions for web development: https://chrome.google.com/extensions/featured/web_dev

deleted 16y ago

[deleted]

ez77 16y ago

It's interesting that Google hasn't incorporated some of these extensions into their devtools.

kellegous 16y ago
Looks like that's going to happen soon. Speed Tracer is likely to become a part of Chrome's inspector, for instance.

ez77 16y ago

Here is the extensions page: https://chrome.google.com/extensions/featured/web_dev https://chrome.google.com/extensions/featured/web_dev

pilif 16y ago

What constantly seems missing is a way to change the user agent header. There is User-Agent Switcher for Chrome, but it only changes the Agent for JavaScript on the page - the header sent to the server is still the original one. Presumably this is a limitation of the API provided to the extensions.

adamdecaf 16y ago
Run chrome from the command line google-chrome --user-agent="Ipad"

esers 16y ago

There doesn't seem to be a Chrome equivalent to "Live HTTP Headers" for Firefox. Viewing, logging, replaying, and manipulating HTTP headers is an absolute _must_ for many web developers. Wireshark is fantastic, but having this feature embedded in the browser is very useful.

enomar 16y ago
The resources tab in the developer tools is a good start. But I'd love to see the ability in the extensions API to inspect (and manipulate) the HTTP stream.
johnswamps 16y ago
It would be great, but the API support is not there, which is why there aren't any extensions to spoof your user-agent either. Compared to Firefox extensions (which basically let you do everything), Chrome extensions are much more fine-grained and can only use APIs specifically designed for use with extensions. There are several features that Chrome extensions developers have been requesting, such as this and the ability to prevent elements from being loaded (which is why there is no noscript and all the ad blockers are only half-baked solutions)

eekfuh 16y ago

I'd like to start using Chrome for everything (currently I use Chrome for browsing, FF for dev) but until I can clear the cache with a single button AND be able to quickly delete the cookies for the domain I'm on at the time, I gotta keep using FF with webdev toolbar.

aboodman 16y ago

Omnibus-response to previous comments: - The ability to intercept and modify requests is indeed missing. We've had some proposals for how to add that to our APIs, but nothing concrete yet. - We're working on the ability to manipulate the cookie store: http://src.chromium.org/cgi-bin/gitweb.cgi?p=chromium.git;a=blob;f=chrome/common/extensions/api/extension_api.json;h=c6094b6020d96b554ced8403e8dab57df1347fc2;hb=HEAD#l2761 http://src.chromium.org/cgi-bin/gitweb.cgi?p=chromium.git;a=... - The browser cache isn't something we've ever even thought about before. Thanks for bringing it up.

mrinterweb 16y ago

Firebug has set the bar for in browser web development tools. Until something can offer the same or better abilities as Firebug, I'm sticking with Firefox and Firebug for my web dev.

rictic 16y ago
Have you checked out the Web Inspector, built into Chrome and Safari? In my experience so far the only place it falls behind Firebug is in CSS editing, in every other way it seems superior. I'd be interested if you disagree. More info: http://webkit.org/blog/829/web-inspector-updates/ http://webkit.org/blog/829/web-inspector-updates/
- mrinterweb 16y ago
  I'll have to check out the built in developer tools more. live CSS editing is one of the main things I use Firebug for , for me, that is a big feature to be missing. I do love the "Event Listeners" feature in the Developer Tools. That is very handy for easily finding what javascript events are unobtrusively bound to an element. So I can definitely see myself using the webkit developer tools in the near future.
  - adamdecaf 16y ago
    It's a hack, but you can just edit the element inline (by double or right clicking the element under the "Elements" tag) and edit the styles via style="".
  - loislo 16y ago
    You can add/edit/delete/css properties in the styles pane with help of double-click. It is not true live-edit but its working.

jonursenbach 16y ago

I really wish I were able to use SpeedTracer on Chrome and without having to append "--enable-extension-timeline-api" to the command line flag.

chasingsparks 16y ago

I'm happy to see Chris Pederick's Web Developer has been ported. https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm https://chrome.google.com/extensions/detail/bfbameneiokkgbdm...

lftl 16y ago
It's missing a ton of the functionality from the FF version where Chrome doesn't offer comparable APIs.

ez77 16y ago

Could someone explain why Speed Tracer shows some "Script Evaluation" even for plain vanilla HTML pages with no <script> tags? I see two scripts: the first one has the URL field blank, while the second one reads "chrome-extension://ognampngfcbddbfemdapefohjiobgbdl/data_loader.js". Thanks!