MATT GAUNT: Hi.
I'm Matt Gaunt, a developer advocate here at Google.
And in this video, we'll catch a glimpse of an undulating
monkey, have some crazy robot talk,
and I even get to take a trip to Hawaii, all thanks
to the latest web view in Android.
When we released KitKat, the WebView
changed from being based on WebKit to being Chromium based.
Initially, this was version M30 of Chrome.
And the big win with this release
was support for DevTools.
In KitKat MR2, we updated the WebView from M30 to M33,
meaning it came with all the usual security and bug fixes
that you'd get in a new version of Chrome.
The WebView team also worked on improving the canvas
performance and added support for screencasting and DevTools.
Now with the developer preview of L,
we're updating the WebView to M36
and enabling some additional web platform features.
If you haven't already tried using DevTools
to debug you WebViews, you need to go and add this line of code
into your app right now, calling setWebContentsDebuggingEnabled
to true, you'll actually enable DevTools debugging,
and I admit that is quite a mouthful.
You can enable this just for debug builds
or for release builds.
It's entirely up to you.
But once you've enabled it, plug your phone
into your computer with a USB cable,
open up Chrome on your computer, and go to Chrome inspect.
Here, you'll see entries for every single web view
inside of your app, and clicking on inspect
will open up DevTools.
Now, it's worth mentioning that you
should have a desktop version of Chrome equal to or newer
than the WebView version.
So for the developer preview of L,
you're going to need to use Chrome Beta or Chrome Canary.
With DevTools open, you'll have access to DOM
and the CSS inside of your WebViews.
Here, you can make changes and you'll
see them immediately take effect inside of your app.
The JavaScript console is useful for viewing console.log
messages, as well as manually executing
JavaScript inside your WebViews.
Now, one crazy useful trick I realized
is if you've got a JavaScript interface that you're
adding into the WebView just so that you can communicate
from JavaScript to native, you can actually
call those native methods directly
from the DevTools console, which makes debugging this bridge
logic just a tiny bit easier.
The Network tab enables you to view whatever network requests
are happening inside of your page.
Now, this is useful for anyone who's
loading a page on a remote server, so a normal URL.
But it's also useful for anyone loading a static web app
from the APK, because if they're making XHR calls,
you can actually view the requests and the responses,
as they'll all show up in the Network tab.
And it's just a little bit easier than logging everything.
Then there's a timeline.
If you ever notice any jank inside of your web app,
this is the place you should go to get an insight into what
Chrome is spending its time doing for each frame.
Generally, you want to look out for long running
tasks or tasks that are happening repeatedly
and see if there's anything you can do to alleviate the issue.
The last thing I wanted to mention on DevTools
is screencasting.
Screencasting was enabled in KitKat MR2 and above,
and it allows you to interact with your web app
directly from DevTools.
It means you don't need to switch from your computer
to your device.
You can just do everything from your computer.
Now, a nice side effect of this is
let's say you have a WebView that's currently off screen.
And we can animate it in later on.
You can actually use the screencasting feature
to see what the WebView is rendering, even though it's not
visible screen.
I mentioned that the WebView team
have been working to improve canvas performance.
Here, we have some stats from the Vellamo Benchmark Suite.
And you can see improvements of around 200 to 350%
for these tasks.
Now let's take a look at some of the new web
features we've been able to [INAUDIBLE], starting
with the undulating monkey I promised you at the start.
In the developer preview of L, we've added support for WebGL.
Here, you can see a demo from Paul Lewis
and quite frankly, I love this monkey.
Next up is the web audio.
Web audio API is an important part for any web based game.
But it also enables you to manipulate sounds, create
synths, or play with the microphone input, which
is why I have a crazy robot voice.
The final new web feature enabled is WebRTC.
You can now use data channels for sharing data
or get user media to access the camera.
All of this means I can now do things like this.
Hey Sam.
SAM: Hey Matt.
How's it going?
You're in Hawaii?
MATT GAUNT: There we go.
We've looked at DevTools, seen a WebGL undulating monkey.
I've got to talk like a robot and take a green screen
trip to Hawaii.
For guides and additional info on the Chrome based WebView,
check out this link.
Cheers.