 Have you seen this fish before? That's a puffer. It's called Fugu in Japanese. DevTools has built-in features to help you debug the Project Fugu APIs. Wait, what is Project Fugu by the way? Let me find a fish expert to explain that to us. Hi, I'm Tom, a developer relations engineer on the Chrome team. I work on Project Fugu APIs. Fugu is a cross-company project between Microsoft, Intel, Google, and many other companies with the objective of unlocking new use cases developers want to achieve on the web platform. Have you heard of Photoshop on the web? This was made possible by adding APIs into Chrome, Safari, and Zoom Firefox so that we could port a beta version of Photoshop to the web. Thanks for being on my show Tom. So tell us, what support can developers expect when it comes to the Fugu APIs and DevTools? Glad you asked. So let's start with Google Chat and Gmail. Have you noticed that you don't get notifications on all your devices like your desktop and mobile phones anymore when you're actively using the apps on your laptop? I did. It was so annoying to receive all these notifications on my phone that I had already dealt with on my laptop. This was me dealing with all the notifications in the past. Right? The way this works is thanks to a new API in Chromium called Idle Detection API, which lets app developers detect when you are and when you're not using your device. If Gmail or Chat detects you're using your laptop, it will not send duplicate notifications to your mobile phones. Wow, that's a life-saving API. I tried to imagine how we can test it during development. It seems like you have to not use your computer while you have to use it to debug the app. That sounds impossible. And it was impossible until DevTools made it possible to simulate idle states. Here's a simple demo that shows the feature in action. It's an ephemeral canvas that gets cleared when the user goes idle and stops using the device. I can simulate different idle states like user idle, screen unlocked, or user idle, screen locked. And as you can see, when I do that, the ephemeral canvas demo shows a countdown until the canvas gets cleared. Wow, that is super useful. Nice. What else can you show us, Tom? The next example has been in DevTools for a long time, but it's not very widely known. The generic sensor API allows you to obtain sensor data from the device. For example, its orientation. If you develop an app with this API, for example, a game like in Maze that you can play by tilting your phone, it can be a bit annoying if you always have to test on a physical device. The good news is, DevTools can save us. See this demo built by Intel, who, by the way, also have implemented the generic sensor API. It shows a virtual phone, and when I open the device orientation feature in the census panel of the DevTools and set it to custom orientation, I can freely rotate the virtual device around. That's really cool. Hey, Tom. I see there's a location section right above. Can you beam us anywhere? Can we go to Kuala Lumpur? Sure, we can. Kuala Lumpur is not in the list of the default locations, but we can quickly add it. If you now launch Google Maps, you'll see that we're right there. Ha! I wish it was true. For now, we are still in rainy London. So let's make the best out of it. What else have you got for us? The next feature is a little bit more obscure. You know, for sure, the BabApps can register themselves as protocol handlers, like gmail.com can handle mail toolings or irrccloud.com can handle IRC links. Those are predefined protocols, but they are also custom protocols that you can invent for your app. They need to start with web plus and then any term you want. Here's a demo that registers itself as a handler for an imaginary web plus coffee protocol. You can install the app, and when you then launch a link that uses the web plus coffee protocol, the app opens and you can then read the parameters that were pasted, like in this case, americano, or I can also launch it with latte. That's neat. If you want to learn more about PWA features, don't miss my upcoming Dev2 tips with Adriana. Definitely looking forward to this one. Adriana is great. All right, now for something completely different. You know that in Fugu, a lot of the features start as origin trials, which is a way for developers to try out bleeding edge features with real uses of their apps. The way this works is by placing an origin trial token in a man attack in the source code. Now, to prevent burning and premature API designs, this token needs to be refreshed regularly, so developers are forced to always keep their tokens up to date. Here's an app that is full of Fugu APIs, SVG code. In this app, I take part in an origin trial that allows the app to respect the user's preferences when it comes to dark mode and light mode, so the theme color, et cetera, look correct. When I now go on the application tab and select the top frame, you can see that DevTools detects an origin trial called web app dark mode, and as you can see, luckily, my token is still valid. Next, I want to talk about the origin private file system, OPFS. It allows developers to create files that are private to the origin of an app, like Photoshop.odobi.com, and that are optimized for performance. While proper DevTools support is pending, in between, developers can use a Chrome extension that I've built called OPFS Explorer that allows them to do exactly what it says on the tin, explore the origin private file system of an app. You can see me explore Adobe Photoshop's usage of the OPFS, and as you will notice, they make heavy use of this new API. Here's a swap file that they use, and which allows me to open even super huge Photoshop files right in the browser. Here's a bonus tip. While it's not immediately related to DevTools, it's still relevant for developers who work with our hardware APIs, namely WebUSB, WebBluetooth, WebHID, and WebSerial. When you go to Chrome USB Internals, Bluetooth Internals, or DeviceLog, you have some tooling support for working with actual hardware devices. For example, to send back-and-forth messages to them straight from these Chrome internal debug pages. Wow, I never knew that. We should have another episode for that. One last question, Tom. Are there any DevTools features you wish for Fugu APIs? Oh, absolutely. I have a long wish list indeed. One of them is to see a more complete parsing of WebApp manifest fields in the application panel. How about you? Let us know in the comments below. Nice. Thanks, Tom, for sharing your fish power with us. No worries. Thank you so much for having me, Jesslyn. And finally, thanks everyone for watching. See you in the next DevTools tips. Ciao!