 Hi, my name is Paul Bacaus and I'm a developer advocate working on at Google and I work on the open web and especially Chrome DevTools and Later on stage with me will be Paul Irish and Seth Thompson together. We're going to talk about three things authoring application and JavaScript all those three things are categories that we cater to in DevTools and We have a lot of improvements coming in 2016 and some of the ones that we added in the last couple months So I'm going to kick off this First of all by saying that we're going to talk about the weather wonder app This is an app that we've built, but it's not completely finished. It's a mobile first responsive progressive web app And we want to do a few touches to it and we have a few errors that we want to fix So first off there are a couple new things that we're showing that are not yet in beta and in stable so please use Chrome canary for the very brand new features and enable the DevTools experiments in Chrome Flags and I had to the settings and Click on experiments to enable any experiment that was showing All right, let's start with authoring So when I talk about all thing I talk about the actual crafting of a website Not just debugging or front-end apps or performance optimizations, but actually building the website Now the first thing that I want to talk about is the device mode We've added the device mode more than a year ago, but we did some heavy improvements recently Because of the mobile first story that becomes ever more popular With responsive design we felt that it was kind of backwards that we were building a page first in desktop With the Chrome DevTools and then had to enable mode that is pretty overwhelming at times So you want to disable it again sometimes And so instead of going desktop first We wanted you to go mobile first and actually have that mode enabled and feel that it's fine to have it enabled So how does it look like? Well same thing device mode toggle is in the site by here next to expect and if you talk about it You see a very streamlined UI that focuses on responsive design So resize freely, but you also have shortcuts that give you the most common mobile resolutions right there Under the actual line that extends Now you can also just manually change it And so that's the responsive story. That's relatively easy to use and just figure out on the fly If you want to go more advanced, you can also emulate a certain device So for instance in this case, I'm going to switch to the Nexus 5x yes, and as you can see there's some chrome that we emulate But it also shrinks our viewport to fit in everything on our device On our screen. I'm going to show you what that means and why that's useful in a bit You can also trigger certain chrome UI. So for instance the keyboards light up We can go to landscape and now it switches back to 100% because it realizes that the viewport has enough space to display It is displayed as at 100% So that's device emulation, but you can go even one step further and this is something we just added recently You can immerse yourself with actual device art so you can go to the settings and show the device frame of that device to Actually give you a real impression of the actual device not on dot not only that you can capture a screenshot and that screenshot Includes the actual device frame so you can share it with your with your co-workers And with the designers Thank you Now you can also customize that mode It's pretty bare-boned in the first place, but you can edit the device list We ship with a lot of configurations for all sorts of popular devices But we can also add a new one and just add a user agent string some values in there and If you want to customize more you can add you can click the three little odds and in for instance If you want to debug images you go to the device pixel ratio If you want to simulate network thought link you can do that in the network panel too But sometimes you want to look at it in device mode And so if you want to go offline test offering functionality or just a slow connection you can do that right there So that's customization and there's more stuff Now I talked about mobile first and that I want you to have that mode enabled But some people have been asking well, what about desktop? I mean, I still want to build desktop sites well there's a very good story here too and Something that's actually even in my opinion better than what we had before Because of the zoom that I showed you before We can now change the zoom level to something that's much smaller than the actual resolution and the page still functions as before But we can switch to a resolution that we don't even have on this device on this actual laptop Now we can enable the device type as you can see it's now a touch device by default But we can switch it back to desktop and now everything becomes selectable again It's just a normal desktop You know viewport again, but it has the whole responsive story So now we're going to use that. We are also going to show media queries And it turns out that my weather wonder app looks pretty crappy On that resolution and if I resize it well, yes, it doesn't look exactly good. We are missing a media query So let's add one I'm gonna add a media query at Approximately right right point is all gonna use flex box. I want to have the boxes next to each other And if I switch back to chrome here, I can see that I worked I can resize my viewport again with the responsive handles and And as you can see the actual media creed that's not used at the top fades out So only the ones that are currently used Highlighted and if you don't want to see it in the dev tools what I just did I can right-click reveal in source code and go to exactly the thing that I've written right there So the really nice way to iterate on media queries And that's the new device mode now moving on Let's talk about colors Now we've added we did a lot of improvements to color picker recently So if we're looking at the header right here, I can click on the color picker and what's built in now are color palettes The first one are the page colors the page colors are generated from your CSS on the fly To just give you all options that you have in your actual CSS But if I want to do custom colors I can do that too and any kind of color to the custom palette and that's available across all of my tabs But then to me my my personal favorite is the material design palette Because those have really nice colors out of the box that I can choose for the header and most of them will just look pretty good So that's the color picker, but I actually think we can do a bit better than that Because this is 2016 and we have a new feature called CSS variables that's a emerging standard that we actually support in DevTools So let's see how we can use that to add a dark theme to The night theme to our weather on the app. So first I'm gonna paste some to speed this up I'm gonna paste some variables into the HTML Those are all CSS variables as you can see it actually is smart enough to realize that that's a color that I have in there It could be anything right, but it's parsing it as a color. I can use the color picker I'm gonna change the variables of where they need to be changed. So in this case on the header I'm gonna change to the header color. I'm just gonna speed it up a little and Gonna use background color here Cart background color on the actual card And then let's see. Yes, that's missing. It's a faded color on the text and I think we have final one and Yeah, actually coming back to the card as you can see there's no text color defined on the card But we do have quick actions in the bottom now that are actually pretty nice to add a color to a class Right there. So you don't have to type in color or background anymore and just can add it right there So that's nice. I'm gonna use it to just add the card text color here Okay, and now I'm gonna switch back to the hml tag To actually create our dark theme. We just have that's just our preparation. We've done So I'm gonna copy the block of CSS variables here And I'm gonna use another new feature in the actions the quick actions below and the little plus that actually adds a new Style rule right in that file Below the side rule at top and I'm gonna call it dark gonna paste it And now I'm not gonna use another new feature Which is the class toggle in the side panel if I do that I can insert a new class on that element It applies directly and I can even toggle that I'm gonna use that right right a bit So now I'm gonna bring up the color pick again, and now if I long press on one of those colors First of all, yeah, I'm gonna choose. Yeah, let's do that blue is good But if I long press on one of those colors, I can come come to all of the shades of that color Which is a really nice way to just pick a palette that works nicely So I'm gonna use all sorts of shades of that same color to drive our theme here Which which makes things so much easier for me And finally the faded color and There we go. I think we have a pretty good dark theme and now I can use that toggle right there To toggle the class on and off very easily and this works for pre-existing classes as well on any element To preview what we have so that's the color picker and the building actions. Thank you Now let's talk about animations Now in the best sense animations are not just flashy things, but they will add They will for instance visualize a state transition in a in a really nice way And if you like most of most of you and and me You don't usually if you create a complex animation. It's not just one dumb element, but it's a set of dumb elements So we thought long and hard what we can do here and how we can develop a solution that Works well for an animation workflow Now I'm gonna switch to a different demo here for a moment because we don't have a lot of animations on the weather on the app This is actually a pretty cool demo because this is a a web prototype that actually is built from the chrome team by the chrome team and and Is a UI prototype for the actual system UI so we actually used that to build our system UI in Chrome So let's take a look first first thing I'm gonna take take a look at the earl bar and it's gonna bring up the keyboard But the keyboard doesn't ease really nicely I think the easing is pretty off. So I'm gonna click on the keyboard I'm gonna bring up the new bezier curve editor So the better bezier curve editor allows you to quickly switch to any kind of easing curve that works So you can see we just improved it quite a lot by choosing a different easing curve But again, this is a complex animation that consists of a group of elements So I'm gonna use the new animation inspector to capture those groups of animations It's actually smart enough to figure out that what you're looking at is a complex animation that consists of various DOM elements So now we can scrub in that animation And go back and forth and look exactly at what I'm look check out exactly how it looks like I can slow it down to give a give me an even better preview But only in that this is not just a preview. I can shift things around I can add a delay to the keyboard and Make it appear later Here we go And now this there's a bunch of other animations in here back to full speed I'm just gonna click around a little and this there's even more here as you can see all of that is captured in groups Those groups even have screenshots that are animated little gifts that we capture and and so you can go to any of them and then click on it and just Check out what I just recorded and scrub back and forth So we think that's a really nice improvement on working with animations and that's animations All right, so I already showed you quite a bit in a relative short time But when you want to feature when you want to find a new feature in deaf to us And I didn't detail every step to enable those features If you're like me you sometimes lost and you you kind of search in the settings you showed someone else the deaf to is our fairly complex product and Sometimes it's just not super easy to find something so we have a solution to that too we think and we were inspired by the blind text here and A few other editors and what we added is command shift P to bring up a command menu So that command menu can really easily allow you to switch to any action any panel right on the fly Just on your keyboard for instance here showing the dark theme or I could go offline right in the command menu without actually clicking anything and I can also just for instance Yeah, go back online or Show media queries in a device mode. So almost every category within deaf tools is supported here and It includes over 60 actions more coming And we think it's a really nice way to to jump around things and discover things Now I'm going to call up Paul. I wish to talk about something. That's brand new so new that we need his computer to demo it Thank you, right so we We were hearing Well, yeah first. My name is Paul. I work on the Chrome DevTools Gonna show you it's a little bit more stuff Paul was showing you a bit about how we work with styles and some of the new tools to manipulate them And I want to dive into that a little bit more because there's this gap between Kind of the styles that we see in the dev tools and then kind of like how we write them And we always have to kind of mentally map between things and kind of work it out And it's always a little bit rough. We've been thinking about how to kind of smooth that over All right, so I'm gonna switch screens over here bring this up. So I'm looking at the weather wonder app Now I'm gonna make a change to my styles here I'm looking at just this header across the top and it looks like we got this color Which looks Pretty nice. I'm gonna make a change We'll switch it over to golden rod because I am like totally into golden rod these days That looks good now one thing that we've always actually done is Being able to map what you're doing here in elements panel and then show you over in sources kind of what it maps to so if I click over here We actually have the golden rod kind of just carrying over right here So it kind of it already keeps track of things, but let's say I want to make a few more changes I'm gonna get rid of this z-index And I'm gonna tweak the font size just a tad and I think that looks good Now one thing I want to make sure is just make sure that over here in my settings I got everything I need to make this look as sharp as it should All right without out of the way We should be able to click in and make just a few more Modifications that seems nice. Yeah. Yeah. All right. We'll tweak that back again. I'm feeling good about this feeling good Yeah, all right so Things are looking good to me so far Any more things? Yeah, bottom border border bottom one pixel solid any color recommendations? Papaya whip is that a coral coral? Is that a coral? Oh, that is nice. Yeah Wow, yeah, we'll give that yeah, so nice. All right. I'm into that All right So I'm a drop over here and one thing that you'll notice not only are the changes there But we're also making sure that we've annotated alongside the changes to show you a little diff you of what is new Down here and what has been changed? So this just keeps track of all the changes that you've done and even if I wanted to say for instance get rid of something I'm gonna add a little bit of space up there and turns out. I actually don't need a background No, I don't need these guys at all like we'll just wipe them out We keep track of deletions modifications additions. So this is the nice way that we can kind of Keep accounting for all the things that have happened in the page All right, so got those changes underway But it is true that I'm like switching back and forth between these you see it kind of mess me up a little bit You kind of want to have that understanding be here without switching contexts So we're like maybe we could just bring that information over into this view I'll show you a new new panel very very new And it's down here near the console now you can click these little dots To reveal it, but I'm gonna use a command menu because I'm just feeling it So I type in quick source so quick source is just like the sources panel but with a little bit less and Now I have the exact same thing over there just in line here the nice thing about having this here is that as I click around in my positions in the styles and It's also going to make sure that it's jumping to those locations Down in this area. So as I move around I can kind of keep track of My position between the two files So this is giving me a lot more context for how what I'm doing in the elements pane matches with my original source file and so that I can like take these changes and then carry them back very easily To what the work that I was doing. So I feel good about this stuff. I like it but There's another thing that I want to show off Because like I'm showing this with CSS right There's a lot of great tooling in here for CSS But what we're authoring in and our projects is not necessarily CSS It's usually something that compiles down to CSS right and so that's another kind of mapping that we have to make in Our heads of like, okay, I made this over here But I'm gonna copy paste and then I need to put it here and here and and it's a little bit of work And so this has always been something that we wanted to kind of ease the transition for so that we can keep things a little bit in sync So you might have say for instance Used CSS source maps before so I'm gonna flip those on because I had just turned them off for this part I'm just gonna reload the page make sure that I'm Looking good That is nice, that is a nice, but I'm gonna get rid of those golden rod changes just for the moment Okay, so We'll bring this back and Good, so I've turned on CSS source maps right and if you've done this before you might have noticed that over here on the side It says loader CSS looks that CSS right and so that's good because I can Click over and see like where is this selector? Where is this rule over in the source and so yeah Okay, I guess it's over there and this is my sass file like I have variables and mix-ins Okay, so this has been something that is that we've had for a little while Now just to ease things. I'll bring back quick source. I'm gonna go a little bit quicker here now Okay, so I'm making some changes and Let's see. Yeah, so One new thing is that now that I have quick source and My map in place not only can I Just follow around the position of yes background is there and position is there But you can see as I click on the value for this color it jumps up immediately here So I get instantly get the feedback that these are actually coming from variables Whereas these are properties in this rule. I Like this a lot because it gives me the context for like what what am I looking at here? Is this from a mix-in these guys are from a mix-in? Okay. Good. Okay. Good now This is all right. This is okay But like our job is not just to look at the relationship between these things like we got to do work We got to like, you know change how it looks get some more golden rod in there, you know, so Let's change something. I'm gonna go in and this background color again Tweak it needs to be a bit more green open up my color picker switch it over So what we just did right here is this color Green we actually didn't just change it for the header We changed the original color value here and switched to red to make that a little bit more clear check this out So not only did we change it for the variable value? But you can see we update all the places that are using that color So not only the header, but you see that the footer too is using a Variable for the same thing so we're keeping it all in sync and we think this is really really cool What do you think you like it? I'm gonna show you a few more things here. So Now that it's okay red is red is a bit too much. I think the green was a better choice Yeah, like a there. That's good. All right so So we got the We got our changes on variables and that's working out nice I'm gonna make a little bit more of a complicated change we're gonna go in here and it looks like this These icons right? These icons we have with height 32 pixels and it looks like I left a comment for myself I really wanted to update those to use a proper variable as well just like this larger one So I'm gonna go in and I'm just gonna make the changes directly in here because it's not really something that I can do up in the styles So we'll just update those this becomes 32 and we drop in those guys right there, right? And we can get rid of this Now nice my my diff keeps up with me keeps track of what I did now Change my my sass file. I want to make sure that we can bring it into the project now what I Could do is I could kind of copy it out of the page I could also right-click and just save this to disk But I have set up the workspace functionality already so I can just hit command s Now before I do that I want to point out I just have a gulp task sitting behind the browser window just like a typical gulp task It's just compiling when I save to disk. So when I save this file, it should kick in And we should be good. So command s Yeah, cool. Okay, so no visual changes so far, but let me just check one thing when I click in back on to the icon and We're looking like 32 up here Yeah, okay, so as I click on the 32 up here. It is mapping to this variable value So does that mean that I can just update this guy? We'll go like to 60 pixels and you see not only does it update this but also that all uses so we're keeping it all in sync All right. Yeah One other thing because we have not only the bidirectionality between CSS and the originally authored Styles we also have this direct bidirectionality between my dev tools here and my editor so I'm gonna come over here and look for that icon size and Looks like it's here. Everything looks to be in place and I'll tweak that and bring it back down to let's see Shrink it down a lot 10 pixels. Now as it's hit save the sass should kick in and there we go So this is nice. I can edit up in this up in that styles pane up here I can make changes in here or just come back in my editor. We're gonna keep it all in sync All right Just so you guys know that this is real. This is the repository for my project and I was gonna hit get diff and we're looking here at The diff of my sass with my green and I wiped out that thing and so all these changes are now in my project looking good Cool, so there's a bit of magic to pull this off like we're kind of keeping track of things in different places, right? To make this work What's actually happening? I just want to kind of explain it's gonna get a little nerdy This right here is a visualization of a source map now source maps is the same thing from JavaScript and CSS now So what I have on the left is CSS and on the right is a sass file So this border color for instance, you see these margin border color It's just highlighting on the right-hand side what that maps to what the source map knows about it But you can see that the variable value over here is Actually mapping whoops, excuse me Is mapping right there So here you can kind of see what's happening the mapping already kind of Helps us identify the different strings and how they they fit to the other file And so we're in the dev tools just using these this information to allow us to kind of update What would make sense? All right So I should put out a disclaimer or two This is really cool functionality and we're working on it still It works great with sass with all the things that you would expect it to and variables and mix-ins and nesting and things like this We're talking with the teams behind auto pre fixer post CSS and sass. I'm sorry and less To make sure that things are working great with them because we want we want to make sure that everybody has this kind of best-in-class Styles editing experience So you can play with this now, and we're making sure that it's going to be even more robust regardless of how complex your your style tool toolchain becomes cool All right, so with that out of the way I'm gonna switch back here because I'm gonna move on and kind of shift gears I'm gonna talk a little bit about application development and specifically progressive web app development I mean we're working hard in the DevTools to kind of bring some new Functionality that makes things a little bit more clear because these things can get hairy Now one of the things that we like to do in the DevTools is change things like just change things You thought it was over there. We moved it down there like that's like what we're going for right? And we thought you know it might be nice if we Just you like change like kind of remove one of the panels that you've been using just it make it disappear completely Well, all right. We didn't totally remove it But you'll notice there's no Resources panel up at the top resources panel is now application. Okay, so let me give you a quick preview of what application Looks like so there's still everything that we didn't move anything everything still here Storage and your application cache and cache storage and frames so you can still navigate that but up at the top We've done some new things so this right here is a visual representation of your manifest of your web app manifest So everything this is the actual JSON as it was received But we kind of parsed it out visually to make it a little bit more clear so you can see your colors your icons and If you want to test what it looks like when chrome prompts the user to see if they want to add this to their home screen You can do that here So it just would trigger the same thing that chrome would be doing and it looks like actually this one's not gonna work because Something about the display property and my manifest Isn't what it needs to be so I'm getting that feedback Here about any errors and warnings that we're discovering far before I realized it just doesn't work on my phone All right, so that's what it looks like for manifest But when it comes to service workers, we want to make sure that you're getting the information that you want So there's been some functionality in here before but it's been a little bit confusing So we want to make sure that it's very clear how things work. So here. I'm investigating my service workers and I Want to make a Few changes, but I also just want to see what's happening so I we have here a listing of The service worker that is attached to the page looks like it's up and running I'm really attracted this checkbox around offline at the top. I'm gonna click it now. I'm gonna reload the page and Looks like it it went offline that makes sense, but I thought I had a I thought I would like was it was Everything was offline everything was cached. I'm really sure let me make sure that things are up and running Yeah, seems good Pretty good. I mean roughly good now I'm gonna check that offline again reload Yes, okay. We'll just ignore this down there So the I reloaded the page the page is still up This is what I expect because this is a progressive web app without errors and it is supposed to work offline, right? but if I On the right hand side if I unregister the service worker and I reload the page, I would expect to see our dinosaur friend Yes, good offline. No service worker. We're done So this offline checkbox is the exact same thing that you're used to over here With the network throttling and it's just here conveniently for offline development. So I'm gonna try out some more things so I'm gonna switch over in my editor to my service worker and It looks like I have some logs coming in for my service worker in a nice golden rod Yellow. Mmm. It's so good. So what I've done is use some styled console logs some quality quality stuff And I want to change the color. So I'm gonna change it to blue and a reload and I See a little bit of it. I see Some blue and actually so I have the the one with the blue text is here It's waiting to activate but the golden rod is still there and I'm like, okay, cool, but I want blue It's important. So I'm gonna skip waiting. I mean I force it to be the active one And so that's all good, but maybe I wanted to make another change and so as I'm iterating on my service worker It works, but then there's continuing to be waiting to activate because this is kind of the workflow in the lifecycle of how they work Because this gets a little annoying the update on reload checkbox Allows me to basically always update the service worker definition whenever I reload the page So that way I don't have to go through and click this skip waiting every single time. So as I change this And save it and reload. It's just instantly pulling that one in and I'm running the latest So this is great for doing service worker development for literally editing the service worker code but there's other times when you have a page and you're Playing around with the plate pages styles or its functionality and you kind of want to just pretend like it's not being cached So that is what this bypass for network checkbox is. It's pretty much the disable cache of The service worker generation. It's like just service worker Don't attempt to like overtake these these requests and like provide one from the cache Just ignore the service worker for all the network requests and this allows me to make any changes For the page and just see it directly all right sometimes you get in kind of interesting situations and You just want to you know clear it all away. So the brand new clear storage Pain allows you to just take all of the service workers the storage the cache and just wipe it It wipes it just for this one domain So you're pretty good. You're able to clear it out and kind of like start from fresh All right, so Feels good Some I wanted to show you one other thing While you have this information available to you kind of real-time in manual debugging you sometimes want a Little bit more information to help you guide you and make sure that you're hitting all the things that you need to and we've been thinking about how to bring this functionality and we started a Project that allows you to investigate kind of what is the checklist of items that you need to build a successful progressive web app And so So this is a project that we're calling lighthouse So lighthouse is a standalone validator that allows you to identify what is necessary to build a progressive web app And so what it does is it investigates all the things in the page looks at your service worker and your manifest and all sorts of things To identify one of the things that you haven't yet done so I'm gonna show you a quick demo and I just have up this page. This is a fire fox's page where they communicate about what they what features that they have But it's a progressive web app and so I get to try it out So I'm gonna kick off the lighthouse chrome extension and Generator a port so what this is doing is it is? Emulating a mobile device. It's actually throttling the network condition because it so it can get more accurate network performance data it is Reloading the page and doing a lot of tests to understand About the how secure the page is What is cached if it redirects from HTTP to HTTPS kind of all these things It's running kind of a battery of test and it takes a few page loads to really get it right, but when it's done Okay, good. Yes. All right. So this is the report that you get so this report gives you an idea of Where you're hitting the mark and some places where there's opportunities So it gives you information on If the page is successfully cashed offline if it has everything that it needs so that chrome can prompt Repeat users to add it to their home screen is it gonna launch off the home screen with a splash screen things like that and even gets into things like Accessibility security other UX issues. So it kind of tests a whole battery of things Now this is available here. We've prototyped Exposing this functionality through a Chrome extension But it's also available on the command line. So over here This is just a command line module written in Node.js and you can see this is the same kind of report just Here so this is nice We can also out port as Jason in case you want to run this in a continuous integration environment and make sure that There's no regressions across any of these variables So this is a really exciting thing and we're happy to kind of move it forward It's still early days and you can imagine have seen this thing and all sorts of different places in your development life cycle Whether you want to see it in the Chrome dev tools or available in in continuous integration So we're working hard to find out the right places for it to live So if this is of interest to you, it's just on github and feel free to come by get involved in the community We're looking to expand the coverage start getting into more testing in security and success ability gathering performance metrics So I encourage you to drop by and check it out. All right. I was a lot, but Seth is gonna help us out and took over the next part And I think he's gonna tell us a little bit about JavaScript debugging good stuff like that Cool Okay, hi everybody Let's see I think we're all set up here Okay, my name is Seth Thompson and I'm a product manager on Chrome I work on the DevTools team, but I also work on the V8 team now V8 is Chrome's JavaScript engine And today I'm gonna tell you about a project which spans both of these teams So Chrome DevTools is great for debugging your application But normally when we talk about using Chrome DevTools, we're talking about debugging the front end of your application But many of you are web developers that are full-stack engineers And you're not just debugging a front end, you know You're also interacting with the back end which maybe exposes API is that the app interacts with So how many of you have seen this? This is so so so much of a hassle to get when you're in DevTools on the front end It's a status code that shows that there's an error in the back end which is returning a request to Chrome and the front end and What's tough about this is When you see something like this you often have to completely change mental context in your workflow You have to leave Chrome DevTools working on the front end You have to often go over to another code base where your back end is running. You've probably got to kill your app Start up a debugger for the back end Make some changes there try to identify what the problem is Restart your back-end service and then switch back to Chrome DevTools to continue working from the front end with a fixed API call But let me ask you another question. How many of you guys are Node.js developers? Okay, maybe have worked on some Node.js applications. Well on Chrome We love Node.js and so many web developers use both of these technologies together so, you know Node.js is powered by the v8 JavaScript engine and DevTools can introspect and debug v8 when it's running in Chrome So we thought why isn't it easier for DevTools to debug v8 in a JavaScript context and note? Well, I'm really happy to announce that the As of this week, we've submitted a pull request to node core to integrate proper Out-of-the-box DevTools debugging of Node.js So this is a this is a big deal and it's been a collaboration of the Google cloud platform node.js team The Chrome DevTools team and the Chrome v8 team Allowing you to use the binary that you're using to run your Node.js app and hook it up to Chrome DevTools So the reason this is different. Yes, it's a it's a really big it's gonna be cool Now you may have you may be familiar with other similar tools There do exist UI tools for debugging Node.js some of them even based on on on parts of DevTools But the difference about this is when this if and hopefully if this pull request is submitted into node core You will be able to use the exact same node binary that you're using to run your app already And you'll also be able to use DevTools in any Chrome window So This allows you to it takes away all of the machinery between the node server and DevTools And allows you to pick up immediately when either node or DevTools adds new features New debugging context new ways to introspect your app. So enough talk. Let me give you a quick demo here I'm gonna switch over to the same screen. You've been looking at before and And I'm also working on some changes to the weather wonder app. It's actually a it's a pretty complex app And we need three three people working on it with a bunch of different branches. It's gonna be good when it's done But you can see here. I'm actually Working on adding a feature that humanizes the date I think in the version Paul was working on you've got this long time stamp there So I want to humanize that and say put relative time Now weather wonder is architected right now as a progressive web app on the front end that makes An API call to the back end to query for the updated weather content and that back end is a node.js app So let me quickly show you that Right here on the left side. I've got a gulp task running the front-end progressive web app And on the right side, I've just got this simple node service running a quick back end that You know requests the forecast data and and responds with it so What I want to do though is is I notice that there's an error here And it says that my app was most recently updated 46 years ago, which is definitely not the case None of these technologies were around 46 years ago so there's definitely an error and When I would when I would be using dev tools normally in the past and and highlighting this trying to figure out Where that number is coming from I Would hit run into this this place where you know I query for the query for the response here and actually I'm going to make one One mention of something that came up earlier here because I'm debugging the back end and the front end I don't care as much about the caching behavior of the progressive web app So I'm going to come into the application panel and toggle bypass for network This means that every time I refresh the page it should hit the back end again with a new response and request So now when I come to the network panel I can come in and see my new york.json on Let's see. This was a request to local host. That's where my node application is running and I noticed in the preview here that the time is actually responding with the improper relative time from the back end and Previously this would be the point where I've reached the boundary of dev tools I have to switch into this other code base this other job this other JavaScript debugging context different tools To try to track that down But with this change with this pull request and I have a specially built Version of that pull request, but hopefully if it's accepted it would be the same binary you're using normally My special build is called node 2. I just pass a command line flag. That's it inspect and After I do that the exact same app Gives me back a simple URL paste this in to dev tools or excuse me to any chrome window It's just a new window here and Now I have a context which is showing me my node application. This is so cool This is totally new and it's right available in Chrome right now Yes, it's it's great and Just to prove it to you so I'll quickly show you what we've got here We've got all of the features you usually use in DevTools You've got a console to prove that this is actually node.js I've got my global node object and on it and you might have done this to feature test what version of node you're using and go to process environment and Version oh, no, I think that's I guess we can test the v8 version What's on here? Well, this is the other fun part you get to see what this object has Where is it? version, that's it V 7.0.0 that is the most recent version of node. So this is really cool It's actually a node environment that you're debugging here. It says node.js main context We've also got the sources panel so the sources panel is where you're probably used to debugging front-end JavaScript and DevTools has added a bunch of new features to this recently You have things like async call stacks to be able to traverse the control flow of your application across Asynchronous boundaries like a set timeout You've got proper support for ES6. I think I've got an arrow function in here somewhere Maybe not We also add inline values. You'll see that a second when we step over things. So all of these features I just want to reiterate all of these features that we add to DevTools on the front-end Immediately work out of the box with node.js when you're debugging on the back end So as you can see here, I've set a break point for Actually, let me let me go back up one more time That Java the JSON I showed you was coming from this route here And I've added a break point on my back end where I have the logic for that route city.json and just that I actually it already happened when I tried to request that JSON object it hit my break point that I set earlier and You can see here that what I really want to figure out is why my Moment.js conversion isn't working So stepping works like normal. You see that data dot currently dot time which is coming from this forecast API that does have a timestamp and I pass it through this conversion using the moment node library to turn it into a relative time But something's messing up there Well, you know what I really need here because this data object that's coming back from the forecast API Has so much stuff on it. I really want an interactive environment to see what's on that object and the The console here actually updates and gives me the context of where my break point is set So if I type in moment, I've got my moment library and if I type in data I've got the response that was came back from the forecast API on my back end here So let's quickly figure out. What was the issue here? Data dot currently dot time does indeed give me the wrong thing Actually, that's because it already went through the step here Let me set the break point one more time and hit it before I Reach the conversion Okay I'll let me set it a little bit earlier here. How about up there? great continue that one and Reload my response Okay, did that go? Nope Great, so hit this break point here I'm gonna continue or just gonna step over that error and now I've this is the data object as it was returned by the forecast API data dot currently dot time has Nope currently I spelled wrong Has a time stamp. Okay. Now here's example of something that's usually really difficult to debug I think the issue here is something around the fact that the time stamp coming back from my back end is different than a time stamp that the moment JavaScript library expects Normally if I had to figure this out, you know, why is my back end time stamp different than my front end time stamp? It would be so hard, but because this is the same dev tools JavaScript counsel I can just check and say okay. Well date dot now returns It's under Returns a slightly longer time stamp I think what's going on here is the back end is returning a Unix time stamp Which is in seconds and the front end is returning a JavaScript time stamp, which is in milliseconds That makes sense. That would mean that the relative time is older than expected. The fix is actually pretty easy It's just multiplying the time stamp the Unix time stamp by a thousand to convert it from seconds to milliseconds Now you'll see I did one other thing here DevTools has live edit this thing updates on the fly and it actually hot reloads the function that I'm editing in DevTools Into the node process. I don't have to kill my node server and restart it again Multiply by a thousand. I think that should do it. I'm just gonna hit save I'm gonna remove my breakpoint continue that execution and I'm gonna move back over to my front end Hit refresh cross our fingers. It fixed it a few seconds ago. Yeah So As you can see it's just it's just so much faster to debug both of these environments with this combined and Integrated support so I'd like to thank all the teams who help work on this You can get access to it on a special build if you choose now But we're crossing our fingers that the pull request is accepted by node and this works out of the box And now I'll invite Paul Bacchus back up at the stage to give it outro. Thank you Very brief wrap up so we talk about offering application and JavaScript and To make this really quick device mode command shift P colors or variables real-time sass and authoring Take a photo if you want to All right Yeah, we need to move on sorry manifest service workers in storage and And we hopefully you can see the recording afterwards and also node and inline various ES6 black boxing There's a couple things we haven't shown but that's about it What's next check out our documentation follow us on Twitter on chrome dev tools and enjoy the show. Thank you