Paul Irish

Everyone, do CTRL + SHIFT + I in Chrome -> In the Developer Tools, do Esc to get the console and type: starryEgg(); for Paul's Easter egg.

Thank you for restoring the paintable background. Your website is useful again.

Pretty print is a great idea but it reminds me something… But wait, of course, that's my extension :D (http://goo.gl/YdcAR)

BTW, I love chrome developer tools. Great work guys !

I'm really loving these tools! The remote debugger will be so handy for mobile app debugging!

I'm having trouble inline editing pretty printed javascript. Is there a trick to it?

Just watched the talk today (at work :) )
Some of the things that you haven't mentioned in the blog posts that stood out for me were the console functions and variables (such as $0 and inspect) and the fact that CSS changes are highlighted, which will be a life saver.

Also, remote debugging looks very cool, any timeline on when it will be available on Android?

Is there any way to temporarily apply the :hover (and :active) pseudo-class within the inspector? I can inspect it, but as soon as I move my mouse away, I can't figure out how to view/modify an element in its hovered state. This is one of the few things I miss from firebug.

This is epic! I have no choice but to switch from firebug now…

This is awesome! For sure I will use Chrome more often for debugging now. How come I don't see that small "{}" button on my scripts panel? How to turn it on?

That starryEgg() video is hilarious BTW. I couldn't stop laughing!

@Emma The {} button seems to have just been added to the dev build (13.0.761.0)

Great video. I actually now understand what I'm seeing!

Paul, a call by pressing F12 DevTools replace ctrl + shift + i finally?

I'll have to try this out instead of firebug.

Love it all. And thank god for the shortcut keys popup thing, that was my biggest issue was not knowing the shortcuts. One thing that was weird though was you press shift + ? to show it. but not to close it. Have to press esc to do that. just seemed odd it wasnt the same thing to close it.

Hi Paul, Good job!

I guess you were using showoff as a presentation tool at IO. Any chance we can get the markup/template for that nicely designed presentation?

Here's the link to those CSS patterns, if anyone else is interested (just found it!):

http://leaverou.me/css3patterns/

Thanks Paul!
Love the new features that chrome developer tools are implimenting.

CTRL + SHIFT + J opens the Inspector with the console already open.

The CSS versioning bit is awesome. I've always wished for a diff tool to compare my current tweaked page in the browser to the original. I'm surprised no one has implemented this well with firebug I've searched and all I find is people asking for it and poorly written scripts that try to write you changes over ftp to the server.

I can't see how you can tell dev tools to snapshot it at a certain point in time, but I've just started playing with it.

Once again, I learned some new tricks :) Thx Paul !

Awesome work! I was honored to meet Boris Smus when he came to Brazil last month, and I am hoping to see Paul doing the same. Cheers!

I am having trouble with the "Save as …" option in the chrome debugger. I do not see that option when I right click. I am on Mac OS X 10.6.7 and Chrome 12.0.742.100. Is this something I will see on a later build?

@Justin I am having this exact same issue…

Hi Paul
Been using Firefox with Firebug to look at CSS etc on sites.
Looks as though Chrome Developer Tools would be a great alternative to Firebug.

Brian Gardener over at Studiopress is recommending Chrome so with Chrome Dev Tools available, I might make the move.

Hi,

Remote-debugging is a very exciting feature, particularly for mobile web-developers… In this concern, how can we activate the remote debugging mode launching Safari Mobile, or IOS Simulator (sorry, don't know anything about android here) ?

A simple way would be remote debugging be activated by default while running in developer mode, like this comment suggests it: http://www.webkit.org/blog/1620/webkit-remote-debugging/#comment-25419

Do you have information when Apple or Google will integrate this webkit's change into their mobile browsers version, so we can remotely debug mobile apps?

Thank you, these tools are great.

0 down vote favorite

I'm trying to remote debugg a chrome instance using the remote debug option in chrome:

chrome.exe –remote-debugging-port=1337

the problem is when i try to access it using IP it doesn't work, while testing it with localhost:1337 does work.

any idea?

This Post is 2 months old. and that time the Remote debugging was only available for RIM Playbook. Now , did you add the support for more device.

iPad

@Paul Irish

I've tried Weinre but in Weinre the problem is as you mentioned here http://www.youtube.com/watch?v=N8SS-rUEZPg&feature=player_embedded#t=466s

In Chrome Developer tools We can see and save css change from Frame . But when I use Weinre it doesn't show any file in Frame. I've talked to developer of Weinre. He will look into it.

I'm just curious to is CSS saving available with Rim Playbook when we do remote debugging.

@mahen23
I got 'ReferenceError'

Hey Paul, first of all I must say you're the Lil' Wayne of HTML. A complete #BADA55! But here's my question to you… in the Timeline tab of Dev Tools, is it possible to listen to a specific event via javascript?

Example: I have an Flash MP3 Player that I use on my site, and what I am attempting to do (since the Flash element doesn't have a built in callback listener) is possibly add one myself. The Timeline tells me exactly the name and location of each file as they are being called running through the playlist — it shows up as "Send Request". So, is it at all possible listen for this event via javascript?

Purpose is to then grab the file name, scan it via PHP, and return its ID3 image via jQuery.

Disregard… I decided to go another way.

Hi Paul, I have a question….
I'm trying to make an extension to monitor and debug jquery. To do
this I need to access the runtime environment of the page to retrieve
the actual state of the javascript variables.
I know that the content script lives in a different world than the
world of the web page, and that only the DOM is shared, not the
global variables. This is a limitation to continue developing my
extension.
I'd like to know if it's possible to do this from within an
extension. If not, is there any chance that it may be available in
the future?
Thanks in advance!

wow,I watched that screencast yesterday still trying to find a different way to edit css in the browser, I tried a lot of extensions and none of them are as good as Chrome dev tools. And the funny thing is that yesterday, I tried to edit Html and It wouldn't work. Today when I right clicked I realized it says: "edit as html". Nice, so now I can edit in the browser and also use 960gridder at the same time if I want to use a grid. I only open Vim once in a while to put classes and ids on elements.I can't believe all these tools were in front of me all this time!

Well, I saw your presentation, and it was really awesome.
Although, I tried to do what you did about re-styling the Elements Panel (when you increased the text font of the elements panel in the video), and could not find the "Inspect Element" about that, both on Chrome Stable v.15 and Chromium Dev v.16.

Do you have any clue for that?
Thanks in advance, and congratulations again for the presentation.

Move control to different line in Chrome Debugger Tools while debugging?
http://stackoverflow.com/questions/8267578/move-control-to-different-line-in-chrome-debugger-tools

@Paul : Dev tool is really cool, awesome video.
can we do Html manipulation in Dev tools? similar to Firebug – Edit Html.
I can able modify and save css files. But i am not able to edit html pages.

@Paul: Sorry, Edit html works fine.