Developer Tools for Google Chrome
Wednesday, June 24, 2009
Since the initial launch of Google Chrome back in September we have had the Elements and Resources tabs of WebKit's Inspector available. We are now ready to present Inspector's Scripts and Profiles panels built on top of the V8 engine providing web developers with full-featured Javascript debugger and sample-based profiler in the dev channel release of Google Chrome. We are also re-introducing the Elements and Resources tabs running out of process for better robustness, security and support for the new debugger and profiler setup.
You can invoke new developer tools by selecting "JavaScript console" from the Developer menu (or using Ctrl+Shift+J). For example, running the statistical profiler on the V8 benchmark suite (below screenshot) will give exact information on the actual code execution as the data is generated straight from running the optimized code from V8.
As with the rest of Google Chrome, the developer tools are open source and built upon WebKit and in particular WebKit's Inspector. We would love to get feedback - both in terms of bugs reports and feature requests - on the Chromium public issue tracker. Or even better yet, we would love to get contributions to improving developer tools further in WebKit and Google Chrome.
20 comments:
Colin said...
How about building in a non-Firebug version of PageSpeed?
June 24, 2009 10:03 AM
hito said...
just tryed it. Looks ok.
Profiling is really easy to use.
Simple and strightforward, I like it.
The only problem is font size. It's too small for me.
I have to manually modify the CSS file under the Resources\Inspector directry each time chrome was updated.
It would be nice if I have a easy config dialog within the browser itself.
June 24, 2009 6:19 PM
Maxence said...
Is there any keyboard shortcuts for step over, step into ?
The debugger seems slow with bigs scripts like ExtJS.
June 25, 2009 12:06 AM
POWRSURG said...
You know, "body { background: #FFF; }" would make the blog look much better/how you guys probably intended the site to look. :-p
@Colin: Well, one should be testing in Firefox as well, and Firebug is the best tool for Web developers on Firefox. PageSpeed does not offer any suggestions that are Firefox specific that I'm aware of so any suggestions you see there would apply to Chrome as well. Yeah, I get where you're coming from but it seems like it'd be a lot of work to duplicate something just because.
June 25, 2009 5:57 AM
Tomi said...
hmmm nu prea stiu ce sa zic...e ceva de capu'luida inca are multe bug-uri...sorry \-/
June 26, 2009 2:01 PM
Jon said...
Still can't dock the developer tools to the browser window though, so it's still almost unusable for people without multiple monitors. You mention wanting feedback, but there has been an issue open regarding this for 9 months (see it here), one of the most starred in the tracker, but so far, the only change made has been to remove the 'dock' button from the tools window.
June 28, 2009 6:21 AM
Landon said...
i dont know if this has been requested or confirmed but plugin support would be nice
June 28, 2009 1:59 PM
Matt said...
this is the most insane combination of mac and windoze styling shoved into a single window. just saying.
July 7, 2009 7:22 AM
Langras said...
Can it also have a dock function ?
July 16, 2009 6:11 PM
Tecsisa said...
Since Google Chrome documentation about debuging is still to come, I
wrote a short article explaining how to use the different tools
"for developers" available in Google Chrome.
Please take a look at the artilcle (Pictures are self explanatory,
but text is in Spanish)
"Depurar Aplicaciones y Páginas Web con Google Chrome"
How to debug with Google Chrome
I will be glad to add, edit or do changes as information arrives, so
feel free to give feedback.
Javier Ruiz
Tecsisa
July 22, 2009 7:26 AM
check-ca said...
How about extending it to an full IDE ?
August 11, 2009 1:16 PM
Animal said...
Developer tools is coming along. But it does not match the usability features of Firebug (even though Firebug is as flaky as hell IMHO)
How about being able to clear the Resources tab? In an Ajax app there may be dozens of new requests popping up. I need to be able to clear what's there so I can see what's happening!
The "Elements" tab needs a few more features. Right click on an element should offer some choices like Firebug does. I frequently use "Add attribute" and "Delete Element".
I don't like the accordion style displaying on the right side of the Element view either. The accordion headers take up so much space! I have the Developer tools open at the bottom of the window and the available height is not great. There's more header than information there! Why not a tabbed style interface for the various cards available?
Same issue with the Scripts tab, and the accordion view of things on the right there.
Also, changing the CSS style settings is not quite as dynamic as Firebug. I'd like it to evaluate the styles as you type so you can really fiddle with the styles to get what you want in-browser before going back to your code. Uparrow/downarrow changing of numeric values in Firebug is very nice!
And logging objects to the console log isn't as useful as Firebug. Any object logged to Firebug's console is clickable to drill into it. That's incredibly useful.
August 25, 2009 2:17 AM
Jay said...
Arbitrary CSS editing would be great. We can modify existing rules and even "cheat" by adding new rules by editing the string of an existing rule (be nice if there was a more straightforward way), but it'd be great to be able to define rules for elements/selectors that have no defined style as can be done via the CSS tab in Firebug.
September 29, 2009 3:05 PM
letdinosaursdie said...
I really think you guys should copy the Firebug interface. It's really nice to have the option of docking the dev tools at the bottom of the page. Their interface for inspecting AJAX requests is also invaluable. Maybe it's just a familiarity thing and I'll just get used to the chrome interface, but there are certainly a lot of lessons to be learned from Firebug.
October 23, 2009 12:35 PM
Link E Starbureiy said...
I agree with check-ca, a full-blown IDE would be a fantastic app! Consider making it so that users can log onto Google App Engine directly from Chrome and compose webpages from there. Much like the GWT plugin for Eclipse.
December 2, 2009 4:59 PM
Ronny said...
someone mentioned something about extending it to a full IDE. Well, I think a better approach would be to put and online IDE like CodeRun.
Google already has:
- Appengine
- Appengine SDK
- GWT
- SpeedTracer
- Google code
- Google apps (docs, talk, mail, sites)
and the premier suite has video, blog and some others. So addig an online IDE that takes advantage of all these and couple them together in a window and just adds the editor part with a simple WYSIWYG/HTML5/CSS/JavaScript Editor is what we need.
Add YUI3.0 to the SITES product capabilities and the ability to modify HTML and CSS and we are done.
December 10, 2009 9:44 AM
Lee Probert said...
Does anyone know if you can write classes for logging to the Chrome console like Thunderbolt does for logging Actionscript traces to Firebug?
February 11, 2010 1:28 PM
Octavia said...
You know, it might just be me being a 'loser noob' and all but I can't quite understand what the Developer Tool thing is used for.
I mean, I've worked with something like this before when I was in a Multimedia class and we were creating websites...but I'm pretty sure that this tool isn't what I think its for....
Or at least I think so....hmm...
March 3, 2010 4:37 PM
ShivekKhurana said...
I'm on a linux machine, and my dev tools just highlight that particular element rather that opening that dev window, on clicking inspect element.
April 16, 2010 8:16 AM
cyber said...
I'm presuming that Developer Tools is destined for the general public and not software specialists. So why does Google allow this useless software on their site since it has no basic instructions to help the user along?!
April 20, 2010 12:30 AM
Post a Comment