Debugging The Web (Chrome Dev Summit 2016)

Key Takeaways

[Music] all right so today I want to talk about debugging the web and really this is about I want to share with you some of the work that we've been doing in the Chrome developer tools uh we've been working hard on a lot of stuff and um want to share with you today and just to step back for a moment I just want to point out that that really our goal here with the Chrome Dev tools is that we want to maximize your productivity as a developer we want to make sure that you are as effective at developing experiences for the web as you want to be not just that like I think we all enjoy web development because we get to craft the S the experience that users consume and we get to like bring them joy and we want on the dev tools team to make sure that you have kind of that Joy too so we want to maximize your Delight as a developer so I'm going to be sharing with you a few things today some big features that I'm really excited about also some smaller things that just are smaller subtle changes but all targeting your experience and your workflow as a developer so we're go going to go through a few things from debugging and authoring Progressive web apps and then some auditing stuff and we're got a lot to go get through so let's get right into it debugging uh I'm talking about JavaScript debugging and so JavaScript debugging is how we understand the execution flow of our code and it's how we remove all the bugs that we added to our code by accident so it's a really important thing and we spent a lot of time doing it so we want to make sure that it's good so let's start out small this is the call stack it's the humble call stack uh this is what it uh looked like about six months ago and we spend so much time here that we want to make sure that uh it's as good as possible so we've done a little bit of UI refresh here on the right hand side is new call stack some small changes uh just a little bit more clean not as much zebra striping the asynchronous Hops are a little bit more obvious uh the wear execution sits is very clear and up at the top of course you'll see exactly why you're paused and this is called out very clearly because sometimes you're not really sure also sometimes you're just paus on a breakpoint it's kind of clear but other times you're paused on an exception so it tells you exactly what the exception message is right up there at the top so you don't have to go and figure out and open up the console or you're in a promise rejection you're on an xhr breakpoint a Dom breakpoint whatever the reason we want to make sure it's very clear to you on why you're sitting there paused on execution so some changes there but also uh on the call stack are some other things now here I have the dev tools uh fairly let me bring that back uh yep uhuh uhuh it's good it's great um the dev Tools in this case are pretty big you know like not it's not all the time that we have the dev tools maximized on the screen um and sometimes it's over there squished to the window but we still want to be effective so this is what the call stack looked like a while ago uh as you kind of reduce the size of the call stack everything get shrink down my function names like I can't even read them anymore so navigating between the call frames when I'm debugging is kind of rough uh we decided we could make this a little bit better so this is the experience now so just as you have less screen real estate we go in we kind of Stack the function name and the location and when we run out of space we just elide the location and take the text away from that so making sure that whatever the screen orientation and you know we're always changing it uh it's going to be readable and usable for you so uh so again these are small changes but important now a lot of us are authoring not just in kind of PL old JavaScript but we're using JavaScript next ex es6 es 2016 whatever and we might be using tools like Babel or typescript to transpile them down to code that can be deployed across a variety of run times and I just want to point out that the dev tools works great with all these new language features in fact we use them ourselves uh this is the dev tools inspecting the dev tools uh using the black Dev tools to view the other one and this is just some of our code and some of our layer profiler uh we use a lot of these new language features ourselves in our JavaScript uh in here is a bunch of stuff there's promises and arrow functions uh template literals the new array methods uh good stuff and this allows us to make sure that the experience of working with these new language features whether it's debugging or in the console is great uh great for everyone who uses them so the console itself is actually a really nice thing so if you're like using a babble or something to transpile if you're like what exactly is happening here just come on over to the console and try it out um in place here works great with all the new features and constant let here in the screenshot we can see uh I'm using the async A8 uh this stuff is great you can toss in a little debugger statement right there and understand exactly how it's moving um this is a lot of fun so uh while we're talking about the console spend a little bit more time here and talk about the console read line now the console read line is how did I do this yeah I you know okay coming on over here so opening up uh Dev tool on my favorite site example.com it's a good one uh the console read line is this thing here that we type on um and so usually we type things that you know are just uh like fairly like just on liners but not all the time sometimes you actually want to you have a few more than just one line that you want to type out and this has been kind of a pain before you have to hold like shift enter to avoid to write in new lines it's been kind of tough so I'm going to write out just top of a function and as I hit enter now we just immediately say oh actually I don't think you're done here now this uh some folks call this smart return in fact Safari kind of paved the way on this one they had this this feature and and we're uh we really like it it's fantastic so now let me just finish the rest of this guy I'm just going to log out my arcs I enter again we still knows that we're not done yet had a brace and it's like oh yeah I'll reind Dent that for you back there and I'll hit enter again and it's like yeah you're done we'll execute that cool so yeah so uh as I had that too you'll see that um we're we we are matching the braces too so very clear brace matching and in fact this is now syntax highlighted whereas that is uh pretty new even things like multiple cursors and uh uh select next match all these features that you and these keyboard shortcuts that you use in Sublime Text or whatever they also work here too um so nice upgrades to the console read line um now the other thing is that we use the console as a way to inspect objects and kind of understand what's going on with them so actually having the completions as we type and explore things is really important so on this site uh let's see document. it's yeah document. head and I'm just going to look at child nodes real quick um so as I open up the uh square bracket uh I do actually see immediately all the indices that I can use in child nodes so I know that there's 11 child nodes and that's kind of cool I'm going to choose one um and one pain Point that's happened in the console before is that anytime that you have an array and you grab something from the array and then you hit Dot and you're like am I not seeing any I I can't what is I there and I want those completions and it didn't work anyways it works now so we're all happy [Music] so um in addition to that uh you kind of want a little bit more power and you've only been able to see what starts with what you typed and so now like if I want to see what the content is of this child node I might type content and then oh text content yeah actually that's the text content so substring completions uh work now too in fact the substring completions work not just here but also in elements panel so in case uh you forget uh something like border color uh you can type color and you'll eventually see where it is all right so some nice improvements there on the console again small things but nice all right sometimes you're writing some code and to be honest like three lines of code isn't cutting it you want a little bit more room um and you could go over to something like JS bin and that's great for sharing but sometimes you just want to play around the snippet inside of sources it's just kind of place where you can Noodle around try out a few lines of code put break points try things out execute it um these are persisted into your Chrome profile um in this case I was just playing with the the battery API um seeing how much battery I was discharging and how much time is left it's cool stuff just save it there's a few things like little debug helpers that I keep around um and if you Google Dev tool Snippets you'll actually find a bunch of great like debug helpers and performance monitors that people have written just take them save them throw into your Snippets it's good stuff all right now one more thing to kind of finish up debugging uh yeah so this line of code that we're looking at here uh a synchronous code we got promises and some vs uh this is actually a really tough thing to debug currently um in fact if I place this break point here on line 16 uh I paused like before any of this but there's really no way for me to like pause inside of my error functions and see like what's happening inside of them and if I try and pause here because this is Chained it just doesn't work that that's not great we want to make sure that debugging asynchronous code is as easy as debugging uh synchronous code so we've been working on this and thinking that there must be kind of a better way so let's see I'm going to open up a snippet that I have here and yeah yeah okay this is good um so we would thinking about this and working let me bring that back here here we go uh working with the V8 team uh to see if we can improve this experience so what I have here is um some code and we are going to ask the GitHub API for some data we're going to fetch it and then you know turn into Jason and then get some stuff and hopefully log it out and let me just try this real quick um okay well looks like there's a problem uh not really okay yep great problems are good um now before it's been pretty hard to understand what's going on because again I could only pause on the very first line of this but so now what I want to do is I'm going to place a break point here in addition to that we've also found all the candidates along that line of code where you can place inline break points [Music] all right yeah nice so um now that we have that let's see uh I'm GNA run this again so what just happened is I ran it again right now we're paused right here at this first guy but I'll let that continue all right now cool we're paused halfway down the line uh right after Jason now I do see that this response up here uh is there for forbidden that's going to be fun to figure out and I even see the return value This Promise This is actually the return value of this call right here now I think I can go for yeah okay yeah go for it again and um well to be honest it looks like data yeah is coming back so problem with this demo is that I'm hitting the GitHub API and turns out that for whatever reason RP in this building has already ex exceeded its rate limit which like kind breaks the demo so thanks for the people that are using the GitHub API unauthenticated right now luckily I have a backup piece of Jason this is you know what the payload was uh that's just sitting there so let me just uh you [Music] know okay how we looking let's clear off these guys uh uh uh uh uh Uno m okay okay great so run that again uh I do have a problem and we can inspect exactly what is going on I kind of think I know we go forward it was asking for data Avatar doesn't exist Avatar URL yeah that makes sense let me finish this off so that we don't have to worry about it anymore and uh momento all right here we go out our URL enter really what did I do no guys I really there we go yeah uh so yeah console image a little known uh thing you know just tosses an image into your console uh why not okay to be honest the implementation is down here and it's some some cool stuff but yeah all right uh anyways in line break points uh I'm really excited about this really introducing a much better development experience for asynchronous code and all sorts of code really break anywhere you need to all right moving on to authoring and we're going to start with the front end and I'm going to head back into the browser uh over here we have a pwa um that me and Sam Sone have worked on it's called Cal train schedule as you can imagine it shows um the schedule for the Cal train and now we've been developing this um and uh there always times when you want to make changes now a typical way of making changes like uh we can try out some new colors and if we like them you know usually the method is shift uh uh selection and copy paste over in your editor now we don't really like this this workflow and we think it can be better and in previous talks you might have heard us talk about features like workspaces and workspaces allows you to bind your local development folder with the actual site that you're looking at in the browser allowing you to save to disk the things that you're working on and and this is some powerful stuff but to be honest there's been some configuration about it getting it set up if you've tried it like you know it's kind of like is it working I don't know so we wanted to make sure it's really straightforward and simple so I'm going to come back over to sources and clear this out of the way and so in source is we see okay yeah this is the code I have a service worker here and some uh JavaScript and CSS great um but I want to be able to persists to dis so the new experience now is a lot easier so I'm going to take actually just my development folder this is my Cal train schedule folder locally just going to drag and drop it here and say yeah you can access that and then immediately you see a little like green uh check marks light up and it says oh yeah the CSS of the file yeah that's I know where that is that's right on disk and over here I'm going to show you on the the file system here's the entire folder like my editor config and things my service work worker but everything that is coming in from the network has a little check mark to it so this a nice thing because we automatically find out for you how things map in fact it's not just uh uh just the basics but if you have a more complex setup like you're transpiling your JavaScript or you're compiling sass to CSS that should work too without configuration so we've like I could explain how we you know made it I to be honest I don't it's like magic um so things like you know this typescript we were able to map it uh back and forth as long as you have a source map for the actual uh compiled code we will figure out where it goes and map it so that any changes you make persist so let's make a change or so this title could afford to be bigger that's nice it's a little too strong I'm going to change the foreground color a little bit dial it back get in the gray that's good need some Shadow I'm going to use the new Shadow editor little too black but if we lighten it up o that is some classy stuff yeah I'm liking that now one thing that you might see right here this green check it knows that this CSS uh is actually the one on disk and if I click through um to view it back in sources we have the diff saying oh yeah I know you actually changed these lines right here and if I come back over to uh see my editor or my my my terminal and I just check my diff oh yeah that's the diff with the changes that I made so automatically persist the diff cool so uh I CSS is looking good but actually talking about CSS so uh the original styles of this site Sam Actually was like pretty responsible for and but I don't even know if we like there's like a lot of styles here and I don't even know if we're using all of them like I imagine that we've all been in this situation you're shipping an app and you're just like are we even using these these one like I'm not I'm not going to try and remove them because that's crazy but I would like to know this is hard uh the browser kind of knows right we're like maybe we should H so actually yeah as of uh yeah today in a canary near you you might find uh this little checkbox up here called CSS coverage now I'm going to try it out and just hit record and in fact just that's it it's kind of done I'm going to head back to sources and now in uh the CSS we mark on the left hand side if these styles were never used um yeah so actually this is pretty good so down here at the bottom looks like there's all this animation stuff that wasn't used and I just want to like verify that like you know this is good the animation is like actually these little bars that animate out looks like there's just two here wonder if I can yeah I'll try and Trigger all of them let's just switch this over there yeah that's a few animations and come back and yeah okay so we are using all those not that but yeah CS is looking pretty good so excited about this because it gives us much better tools to understand like what of the code that we're shipping are we actually using uh yeah some good stuff okay okay coming back now talked about authoring in the browser a lot of us are fullsack developers we write JavaScript for the back end too and at Google IO we showed some work that we've been doing to bring profiling and and inspection and debugging to node.js we've been excited about this and uh but there's always more work to do um so let's show a little bit of that uh so coming back to this Cal train schedule um I've actually been working on a small little feature to get like the live position of every single train um there's like an API for right now I could get the live location so you can see down here at the bottom of my JavaScript is uh I'm asking my my local server for the position of a train and I'm just like polling for it I've just started the feature I'm very early on this one okay so uh let's kick off the node right uh so we'll come over here this guy and uh what we can do is we can hit node-- inspect and the app and ignore that for a moment we get this URL right here and this is URL and we can just actually copy paste it into our browser and start debugging but in this case it's kind of awkward because you know I already have a tab open with Dev tools debuging the front end it'd be nice to be able to like look at the back end too so I'm actually yeah just GNA allow this to run but I'm going to come back over to the sources panel and now when I open this up in addition to the main thread and the service worker down here is node and it's like oh yeah you're running node aren't you do do you want to like you want to debug that too yeah yeah actually I'd be done with that okay good so now we're connected to node um and I know this because if I switch over here and I'm looking at just the node context that error that I was getting you know over over here is still also exploding my screen over here so that's great um okay train is not defined apparently so let's see what's up uh all right so coming down there's my app.js this is my my node code and apparently there's an error let's just pause on on on exceptions it just paused right here train is undefined right yes good and train train train ID yes mistake my bad train ID is just train now I'm just going to hit control s and uh I think that takes care of it and we'll know if we see sending API request uh um it's paused who said that they get like an like two extra points in the quiz okay paused all right yeah yeah good sending API yes okay um and in fact coming back to my uh other context my page um I went from a bunch of yeah 500s internal service errors to 200s and that's what you like to see oh good okay so we're really excited about this because this allows us yeah sure [Music] yeah they got to clap on the 200s uh we're excited about this because this allows us to use a single Dev tools and speak to both the front end and the back end at the same time keeping your attention in one place while managing multiple contexts it's just good all right moving on heard a bit about Progressive web apps today and there's some nice tools in the dev tools to tackle that and briefly just review some of them over in the application panel there's some great stuff first up the Manifest view will tell you what's in your manifest and in fact if if the browser finds anything that's like not so sure and it it issues a warning or an error you'll see them shouted out right up here at the top then the service worker pane tells you everything the state allows you to manipulate your service workers and then I really like this the clear storage pane allows you to not only unregister your service worker one with one click but take care of your cash storage your appach your any of your local storage just wipe it out and kind of start fresh I use that all the time I do want to spend a little bit more time on the service worker panel itself and there's two things that I want to point out for you really helpful tips when you're doing this debugging up at the top are some checkboxes the checkbox in the middle update on reload this is a super helpful guy you can think of it kind of as like um a disable cach but for the service worker JavaScript itself like it's great for when you're working on sw. JS the service worker. JS and you're just making changes to it you want to make sure that you load in the new version every time it'll just make sure that as you reload it pulls in the new version you don't have to worry about some of the cash and stuff the other checkbox bypass for Network basically says hey uh service worker I re you love to like intercept requests and like server from the cach and all this stuff but like I'm working on my site right now and like upd dating my Styles and my pages JavaScript and so I really don't want to like you to be serving things from the cache and intercepting so it's just like just chill with the network stuff so this allows you to just iterate on your pages uh content your Styles and javascripts without the service worker getting in the way so definitely check those out and as you keep on uh as you work with these tools um and and and find things that are like making you question stuff feel free to just holler at us and and ask us if there's a better way that the tools can represent what's going on because we'd love to make sure we can help now there's a lot of things in doing Progressive web apps that you kind of have to keep track of and especially if it's your first time just getting your your manifesting your service workers set up the right way is a little tricky and so we've thought of been working on uh better ways for us to understand how if we're hitting all the right marks and if there's anything else that we can do to make sure that what we're building is great A lot of that work in that investment has gone into a project called Lighthouse and Lighthouse is a is a guide book for helping you turn a web app into a great Progressive web app and and more than that it it analyzes you know any web page and any website and uh not only collects performance metrics but helps identify all sorts of developer best practices that you could be doing and making things better so like as an example it audits for a number of different things as far as um Can the user be prompted to add it to home screen uh does it have a custom splash screen but other things like are you using event passive event listeners when you should are you avoiding mutation events and document WR uh and over 40 different audits checking for just developer Excellence on the other side it also does a great job of having uh performance metrics that capture kind of the user perceived performance in the most accurate way possible so you've heard a little bit about first meaningful paint and time to interactive and Lighthouse uh measures those and helps give helps illuminate what is actually happening when things are slow so Lighthouse is available as a Chrome extension you can see a little bit of it here uh let see over here uh yeah I can run it from the command line it'll just kick off a new version of Chrome itself um and just run all of its tests the same tests there um and this works well Lighthouse is just a node module and in fact a number of other tools are already using Lighthouse and building on top of it so feel free to to check it out like that it works well uh with a headless Chrome in a continuous integration environment so if you want to set up progression tests for performance or audits you can definitely do that um and the other thing is that the we've really been happy with how uh doing these checks to see like this along the right path this has been working out for us so we want to make sure that it's even more available so I want to show you another new thing thing I'm going to come over to our calr schedule and I'm here in the Dove tools and we were like maybe we should have it available not just uh here as a Chrome extension but what if let open this up in more tools and we have a new audits 2.0 so this audits 2.0 is powered by Lighthouse so as I I'll just make this temp yep there we go so I'm just going to go ahead and this is using the same Lighthouse that is in the extension the command Line running all the same checks um so it's looking for um things like usage of document right uh usage of uh blocking stylesheets um and helping you understand what's going on so pretty soon it'll give me a report I'll be able to browse that and yeah okay looks pretty good fast site is fast good job Sam okay but scrolling down this was this is interesting check this out uh site opens external uh links using real no and in fact there's we have two links on the site which are external opening new window and not using this guy you'll have to read about this and this like I saw this and I was like honestly we really need to do this so this is super yeah so I'm GNA fix that like right after I get off stage um but yeah I encourage you to check this out and the nice thing here is that um because this is using Lighthouse uh Lighthouse is just sitting on GitHub it's a bunch of JavaScript so if there's anything that you're interested in auditing for or just want to check just please come by drop by we've had a bunch of people collaborating on the project so far um so come check it out talk to us if you have any ideas we just love to to work on it with you so what do we see here today uh few things we walked through looking at stronger debugging with modern JavaScript and I got to show the inline break points love it the parallel debugging with no JS and the Brows at the same time single window uh the persistence saving to dis really painless automatical mapping between everything uh the CSS coverage to find what CSS you are not using um and new auditing functionality available in all the right places uh if you're not follow us on Twitter our docs are there and just yeah please grab Canary um turn on some of the dev tools experiments if you want and if anything you know bugs certainly but even just feedback or ideas go to crbg it'll be like do you want to report a bug file feature requests but just ignore that and just like file a feature request or just like hey guys what about you know what do you think that's fine we'd love to hear from you uh that's it for me thank you very much [Music]