GDL-IL Chrome DevTools tips

Uploaded by GoogleDevelopers on 26.10.2012


BILL LUAN: Shanghai GDG a very
interesting developer community.
SUSANNAH RAUB: I'm glad somebody
has asked this question.
RETO MEIER: This is where the magic happens.
JENNY MURPHY: This is primarily a question and
answer show, so if any of you out there
would like to ask questions.

IDO GREEN: Today in this GDL episode, we speak a little bit
about the new Chromebook.
And then I would love to dive more into new things that any
web developer should know about Chrome Dev Tools and how
they could leverage them and be more productive when they
are building their next web app or mobile web app.
So without further ado, let's start and try to go--
I have this short list of things that we could go and
work on it together.

And here are the main ones.
Of course, as you can see, it's a blog post that I'm
going to publish later today.
But for now, let's just go and dive into it.
So the first thing that we have today in Chrome-- and
basically, before we even start, I would love to offer
web developers the opportunity to install Chrome Canary
alongside their regular, stable Chrome.
You could go and just Google Chrome Canary, install it.
And when you're working on your development, I would
extremely encourage you to use it.
It will give you great capabilities in terms of
having the greatest and latest features in the Dev Tools.
And moreover, you could see how Chrome is going to look
like in the next 6 or 12 weeks.
So the first thing that we have today--
let's open Chrome Dev Tools here--
is the opportunity to have a device emulation.
So it's true that in the past we had this opportunity with
other simulators that we needed to install.
For instance, the iPhone simulator on Mac or on any
iOS, and then for Android with the simulators that work on
Windows, Mac, and others platform.
But here, you have it inside the browser.
So how you do that is you saw--
or you didn't, but I'll make it a bit bigger
so it will be easier.
I opened the Chrome Dev Tools.
Let me do this a big bigger as well.
OK, so I'm going here to this button, clicking on it.
And now when I have the Setting opportunity, what I
can do here is basically override the functionalities.
The main functionality that I could
override is the user agent.
And that just allows me pretty easily to mimic any mobile
device that I wish to do or different browser.
It's very, very convenient and efficient to see how your site
or web app will look on, let's say, Android 2.3 or
BlackBerry, and so on.
So that's the first thing.
The other thing that is very cool is the device metric.
You could now basically enter any device metric that you
want to check.
But even more cool than that-- and you saw here, of course,
that it's just changing.
If you're overriding the user agent, it will
automatically fit it.
So if I'm working now on iPhone 5, you could see that
it filled for me the device metric.
And that's a great thing because it's just letting you
work with the exact device that you wish and get the
exact screen resolution that you have there.
So that's one very cool feature that we have today.
And basically, there's a ton of other
features in the settings.
So if you want to drill down it and see exactly what you're
getting there, this in the new view.
Another very important thing is to emulate Touch Event.
So if I'm clicking this checkbox, from now on, I'll
get Touch Event.
And specifically for mobile applications, this is very,
very crucial.
So we don't need to use what we used in the past, like
listening to an extra event and then have the ability to
have Click Event and Touch Event.
Here what we're doing is pretty straightforward.
We're just emulating Touch Event.
And from now on, our regular Chrome in our desktop
environment will act and will fire those touch events.
So that's another pretty cool new add-in.
Other things that we have in Chrome Dev Tools are actually
under the Experiments.
And the experiments flag could be triggered on by just going
to Chrome Flags.
Let me open it and just show it to you.
So here, basically, you're seeing all the different
experiments that you could do today under Chrome.
The list is very long, as you can see.
And what I really like in it is that if you search just for
Dev Tools--
tools, yeah--
so enable Developer Tools Experiments--
and in my case, it's already enabled--
you could see things--
sorry, it's not enabled.
Let me enable it.
Or even better, yeah.
Let me enable it here.
And now if I go here and reload it--

Yeah, basically I need to restart Chrome.
Let me just get Chrome restarted, the Chrome that I'm
using, and I'll open it again.
And then you'll be able to see what did the flag that I
opened in the experiment.
Basically, we get another tab under the Dev Tools.
And this tab will be all the new experiments that you could
do, all the different features that you want
to use will be there.
So let me just show this to you.
Yeah, this is the wrong program now.
And here we go.
Let's take this one.
And I'm opening it.
Yeah, so let's do another new screen share.
And yes.
So now, basically what you can see here--
and let me try just to make it even larger.
OK, so you see here, I how have a new tab called
And these experiments could give you the new things that
are going to be baked in Chrome, hopefully in that
feature, and in that form and shape, maybe a bit differently
in the future.
But at least you could play with them now and see
how they look like.
Show CPU activity and timelines, or override the
device geolocation, orientation, support SASS,
lots of very, very cool things.
The Snippets support is one of the things that I really like.
And you could actually drive into JSON objects and see them
in a very nice format in the console today.
So that's something that we should open.
And another very important thing that I see more and more
web developers are using these days is the ability
to disable the cache.
So if you are working now, you definitely don't want to be
miserable and try to figure out if it's a
cache resource or not.
Probably at the beginning of your development, the
prototyping, you want just to make sure that the cache is
disabled, and each and every time that you're hitting the
server, you're getting the latest version.
Just check this option, and you are a good.
Other cool things that you could do here is
enable source map.
Source map is the option to work with the
original form of the file.
So let's say that you have in your build system a
notification for your JavaScript
or some other phase.
Let's say, if you're working with Dart and you have it
compiled to JavaScript, basically with source map, you
could debug with the original code base.
And that's, of course, extremely useful, specifically
when you're working in those cases that you don't want to
work with a code that's been magnified.
You just want to work with the source of it.
What other cool things that I worked?
The ability to log XHR is very nice.
And just to see the shadow dome in places that you're
working with them is also a very nice thing.
In terms of rendering, to show the repaint rectangulars, it's
very nice just to have this organization what's going on
with your site in terms of rendering.
That's basically most of the things that I wanted to dig
from Dev Tools inside the settings.
Another other great capability that had been covered in last
Google I/O was the ability how to debug mobile websites.
Let me just show you where you could find it.

So, yeah.
Let's close this one.
In the blog post that I'm going to launch very soon, you
have here, basically, a great talk by Pavel and Sam about
Dev Tools and how they allow you to debug and be efficient
when you're working on your mobile web apps.
That's something that I highly encourage you to check out
I think we are in a quite good timing so far.
I really apologize for the people that were
here exactly at 2:00.
I had a bit of problems with installing the new plug-in.
And that's why I couldn't do it on air on time.
But I promise that the next episode up here will be at
exactly 2:00 and not 2-0-something.
So until next time, thank you very much.
And as always, if you have any questions or feedback, just
feel free to reach out to me on G+.
Just google greenido.
Or if you want, on Twitter, greenido is one word as well.
And if you have a cool start-up that you want to show
cast in this episode, just feel free to reach out to me.
I'll share show notes for these episodes on my blog.
And I'll put a link there for people that want
to be on the show.
Just fill a short form, and then we'll contact you.
We have quite a lot of very interesting episodes that
we're going to run in the next few weeks.
Some of them will be based on great people that I met
yesterday in DLD Tel Aviv.
It's a big, big Yossi Vardi festival and lots of great
VCs, NGOs, and developers were there.
We had two amazing events--
Google for Women Entrepreneurship 2.0, and the
other was what Android can do.
And for people in Israel that are not part of the GDG, I
highly encourage you to check it out.
They are almost biweekly or monthly meetings.
And in most of them, you have great speakers, great content.
And you're just meeting very cool people that are all
passionate about Android, Chrome, HTML5, and what's cool
on the web with or without Google platforms.
So just feel free to hang out with us.
And thank you very much.