DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)

Key Takeaways

let's talk about dev tools and what the team has been up to in the last couple months so first I'm Paul Backhouse one of the poles and I'm the advocacy lead for dev tools so i give my voice to dev tools collect input and feedback and tweet and do whatever else and the other stage and i also do the outreach for amp the x-rated mobile pages project now we've been talking about the forwards a lot in the last couple years we've did we've done a lot of performance improvements are we're going to continue to do so lots of the front end up story really to improve the speed of your pages but today this talk is not about performance this talk is about something we discovered makes more sense in this context which is actually building websites you know this is the thing that people do with dev tools as well actually building websites and turns out one of the audience's that just add in particularly our designers so designers we didn't really focus on designers when building the dev tools before but it makes a lot of sense because they've been doing more and more CSS and a couple of service that we seen recently showed us that the most of the design work most of the prototype work often happens in devtools which was surprising to us and because we thought that most web developers would do change the nature mail etc but not so much the designers but it's actually really powerful tool but it mostly stay lean ailments panel and we want to want to make sure that the devtools worked at work for them work for the crowd so what we've also discovered is that a lot of the UI was really cluttered if you if you look at it from a design perspective we thought we could do better than that and so the first thing I want to show you is a couple of improvements that we did in the UI and dev tools so three things I'm going to talk about first is how will making dev tools a joy to use I will making it really simple and easier the second one is how authoring becomes a big story in devtools and how we make that fast intuitive and really fun and then finally something for the debuggers and javascript evolved us with us is more JavaScript control more tools to make your debugging flow much better so let's start with how we're making however improving the I so if you if you do if you do work on a product that grows and grows and grows and you put in more stuff and more stuff more stuff dev tools are quite complex now as with a lot of magic lots of good tools in it but sometimes a user interface can they come auh which stands for user interface and we don't really want that right that's not what we're trying to do so in order to prevent that we hired max max is our new full-time designer for the first time in history we have a full-time designer working on dev tools and improving everything around dev tools and you can also already see the fruits of his labor in many different places so let's go through some of them but first let me show you how far we've got so we have two thousand nine on one side with 2050 on the other and there's a dramatic amount of small improvements smaller powerful improvements that went to the dev tools so few of them well one thing that is new you might have seen is the new main menu we don't clutter the UI that much anymore but we we have jockin now in a new main menu much easier access all than before and much simpler than having a long press we have all the important tools that you only use sometimes like inspect devices network conditions sensors and settings and help all in there for you to access whatever you needed and then we also made it possible to reorder taps that's been a feature that's been long requested and we finally got it not only that but we only we also reordered the taps by default so we brought them into the position they make sense where they use the most we discovered that the console tab is used is on second place in usage after the element panel so we put it in its second place which just made a lot of sense and then we also added an overflow menu to the area the drawer where a lot of the overflew context of free content citizens events the view do a global search we put that into the drawer next to the console because as a closeable term because it's not something you want to have around all the time now we add it we put more and more stuff into it we make the story more consistent and we added an overflow menu to always come back to what you wanted and then we also improved the context menus in a few places for instance this is the new context menu when you right-click on a dumb panel elements and it gives you a lot easier control over what you want to do copy outer HTML phones and something we didn't have before just copy the note you don't need to do any special magic for that anymore you can immediately trigger the active state of focus state right from there we still have the other place in this title but this is a lot simpler than it was before so we get that even with those improvements and we continue doing them there are still times where you will be completely lost right there are times where you will think okay what did I talk about what just happened and that's okay right we're here to help and if you've seen the main menu already you've seen that there's a new help icon and I help icon leads to our new home page that new homepage is not just a facelift to the old home page but in fact it is it is heavily rewritten so it becomes action-oriented so a lot of the guides and tutorials you find out site are specific to a problem trying to solve the performance problem sure here's a couple of guides for that so that's really how we build up that page and then also if all hope is lost if you really can't find anything and you don't to dig through page you can still always get in touch with us we started tweeting a few months ago on the chrome dev tool title and it's becoming really successful because people realize that we actually answer and reply and we also tweet a lot about the latest achievements in Canary and and what the team is up to as soon as they come in there so that's that that's some of the UI improvements recently those were just over the last couple weeks but there's been a direct tremendous amount of you I improvement the last couple of months some of them you probably don't notice every day because well a lot of it is changing every day but about this quite something quite a focus for the team let's move on with how we're making authoring fast intuitive and fun now here's a page I've been working on recently in my spare time and I wouldn't prove it I actually want to create a dark version of it I thought it would be nice to do play with the ambient light sensor and make a dog version so what did i do well i have to pick colors and i don't know about you but i'm not terribly confident picking colors out of blue maybe some designers are that are very familiar with color theory but i'm not so usually what I do is I go to website I search for palette that looks nice and I don't really often find what I'm looking for I mean oh I go to some color wheel or whatever but I thought we could do better than that so what we did here is first of all we made it really really easy to add in color if there wasn't one already so you don't have to type in background color red and then click on the color picker anymore to open it we added two buttons that immediate foreground and background colour and now you're seeing the new color picker that we've worked on and what this new color picker includes is not just a way to pick random colors well because that's not what I wanted but instead phone since it also allows us to pick something from the page so hey I see some color that I found in the header that I really like okay I pick it right there this was a feature that people a lot of people didn't discover because we didn't have that little eyedropper icon before and ironically I mean it was always on but people didn't discover it because it was always on because they did click on it first so that's one way but then you can also do so with a new color palette we've added the material design the palate to the color picker to allow you to choose from colors that designers have chosen and I'm really glad that some designers that spend lots of lots of weeks going through every little color and tweak it spend more time on that than I do make that choice with me now we didn't just we didn't just trip with the base colors that you see here those base colors are nice but they don't work in every context in the case of my background on the page they don't work I want to have a very light a very dark color so instead we also ship with the shades and the shades come up if you long press on one of the colors so you can long press on the colors and pick whatever you need to in this case this color I think works really work for me so finally I obviously also have to change a few other colors and since the header here and to do that we make it we made it really easy to discover what I need to change so if I now hover over this dis electro rule in the style panel all of the colors and all of the other elements that would apply it at the selector I actually highlighted and now it can choose the color with confidence that I'm picking the right selector ok I think this works again and finally the text color right before where I actually just had to for contrast reasons i just had to measure what what i thought was right but now we have this new line that you're seeing on the color picker still an experiment it's coming up relatively soon but this new line is a color contrast line and and gives you an idea what contrast works best for accessibility reasons this is really powerful because because I I before like had no idea what what color is a good color 11 when you know my eyesight isn't that strong so this is a really great way to make this happen so that's color let's move in to mobile so I was in that situation quite a lot right I feel that before so you basically you work in a product you work on it for many many months obviously you develop and desktop computers because they have your build system whatever and it makes it really easy but then your boss one day before lounge asks you if you if you test it on mobile I like maybe mm well we did an improvement here last year which is the new device mode device mode comes up if you click at the icon next to the inspect element icon and it brings up mobile emulation so from here you have a UI that that you can select the device from so that network throttling and emulate a lot of the characteristics of a mobile phone so that was a good start we also have media queries in there zoom a lot of interesting things a good start but there was one thing that I just couldn't pinpoint I was wrong with it and we finally could pimp on it which is it sort of backwards why are we starting with the desktop website when all the traffic comes from mobile in the first place when most people discover your page and mobile first and then maybe use the desktop afterwards it's not kind of backwards shouldn't we be building mobile first and then go up well it turns out that's not a new thing in the responsive design world that's been you know the thing that they've been they've been preaching for a long time just focus on the mobile website first use progressive enhancement and then scale up and use media crees to actually build the desktop side out that's a not a new story but somehow our workflow was stuck in the past the chrome devtools were still heavily focused on desktop and had an opt-in mode if you wanted to debug for mobile now I'm very pleased to announce that this is changing we are building a new device mode for a new mobile first world so well I mean you could freak out now like are you freaking kidding me I use traveling that you I in my face and have it always on is that really what you're doing because then I'm gonna leave okay so this is not what we're doing right that would be a supreme amount of trolling and we're not going there now instead we dramatically simplified the story what we have here is a new device as on my own page right now but as you can see it's just one line that extends to the main menu and it gives you control over responsive design which is start on desktop now we're in responsive mode but we can also emulate a certain device that we want to so in this case once this nexus 5x and edit any and add any custom devices to it if you want to so in addition to that we now have chrome within the device so now you can emulate how it look like on the keyboard as well as in landscape on the keyboard and with the actual chrome of the device and all it is centered so it's really focused on the responsive design story and if your work if your work in a patron has a lot of media queries you can also enable media queries like in the old mode in a much lighter way and focus on them click on them to actually preview how it look like a different media queries so as you can see the device mode icon is not in the inspect element area anymore it's not there anymore because mobile is now the default in devtools now what does that mean in other places well first of all for throttling for instance you haven't seen sporting in here and there's a reason for that because we thought okay in this new world everything in devtools is focus on mobile so why shouldn't we put it where it's makes most sense and it made most sense to us in the network panel so because it's always important to test how your site looks like on slow connections fine sense if you're working the serviceworker so we put folding my dinner and the network folding profiles can be configured in the settings panel so now I had to slide up last year at Google i/o I'm going to bring it up again mobile emulation is not the same as an actual phone it's important right we made the story pretty powerful in my opinion but still not the same if you're debugging something like performance we still can really emulate that on on the actual desktop immolation so for that previously you had to go through chrome inspect which was a completely different window and gives you access to remote debugging to actually remote debug your pages on a phone now we thought we could do better than that and actually integrate that into the rest of dev tools as well so now we have an experiment going that actually does that so as you can see already in a new main menu we have inspect devices and now brings up a dialog with in devtools you don't have to go to another page anymore you can continue to stay on page now it's pending authorization i click on it on my phone say yes I want to agree and now it's connected and I can debug any of the pages i have opened my phone right there so we think this new mode makes it a lot easier to work with actual devices alright moving on from the vice mode let's talk about something else here's a rule of thumb pie came up with the rule of thumb goes a visual design practice is out of fashion when browser vendors have added a way to do it in CSS that sounds a bit abstruse but it's sort of true I mean if you look at border radius CSS gradients right as soon as soon as we got CSS gradients Sun prefixed and and basically expect in every browser you know there was flat design like people were like well it's not that cool anymore and border radius was the same thing I mean as soon as we had border radius everyone's like off it and and trend was already moving on so what's the point in doing new stuff if everyone is not using anymore well the good news is that this time we feel faster then trend which is great finally this feels good so what I'm talking about is animations but when the developers think about animations they often think about those guides of animations your animations that really do not improve the experience a lot I mean sure it makes stuff wiggle but I'm not really getting how would that improve how amusing my page that's how about you but there's probably some some purpose but I haven't thought it yet um but if you do animations correctly they they actually they focus the state of change right so they make you focus make the user focus on an actual change that's happening on the page and that's really really powerful the transition that you're animating and as well as actually hiding from the fact that something's loading like a loading animation or you could do both at the same time like we did on the on the old google i/o website where you can see now if you click on another link right it's it's both the transition that changes the state but it also hides the fact that is loading more stuff that's the best-case scenario so what did we do here well we added a new animation inspection mode this is running no here we go should be running and now it's running so this is actually this is very interesting site because this is the actual spec that's used it's the motion spec that that the chrome team created to to work out the animations in chrome for mobile and and now what you get fear is if you inspect an element in this keyboard like didn't really work well so now I inspected the keyboard and I want to change the easing I bring up this new cubic easing editor and I change it to any kind of value and default I can change the lines as you could to see and I can make sure that easing works much better so now if I click back to that animation you can see that the keyboard eases in much nicer but as you can see in this demo there's a lot of complex animations like this one like the menu animation or the animation where I open the taps those are composite animations so how do you focus on those composite animations well that is where the new animation inspection comes in and comes free and nicely so you can see once I go through those pages it constructs groups sort of tab groups in the animation panel and if I click on them it replaced the animation that is just captured yes thank you and now we can scrub on that animation but again it's a composite animation right so we we kind of realize that you want to look at that in context of your page so you can scrub you can make it slower you can drag around you can debug any any state right and one thing that's upcoming that's really cool we're putting some more work into this and that's completely ready but it's the actual ability to change things in this mode so now I can actually change things around I can move the delay i can move i can change the duration of the animation i can obviously change the easing in the Styles panel because i click on stuff and now as you can see i changed it in real time right there on the page thanks so what I haven't got for offering we've got a new improved user experience we get animation inspection and we get the new device mode that's always on ok so one one thing that I have to mention is that some of the features are so new that you should be using Chrome Canary now some some features like the UI are already in there you can use them the work but features like the animation inspection are still behind an experiment now it's really easy to enable those experiments just go to Chrome flags enable devtools experiments click that relaunch your browser and then you have in your dev tool settings a new tab called experiments where you can toggle any kind of experiments that we're currently working on and it would be great if you could do that and actually give us feedback if we should do something better so that was all good and great if you're building website with devtools but what if you're doing front-end ops what if you're sitting in a control center and and focus on performance improvements etc or actually debugging JavaScript where we have some stuff for you too we have a few new JavaScript things that are really really nice one thing we've added is in line variables while debugging so we now show what gets evaluated on every line once you're stepping through the code which is really handy otherwise you would have to hover over the variable first dig in there see what it is but now you always see the context you're in and the current valuable value in the debugging flow we also added proactive compilation so now if you do a change while debugging to see okay maybe this loop works this way we actually show you that you did a semicolon error and and there's a buck in the passing of your code without you having to to continue running it and just discover it afterwards it's just a nice little improvement and then we also added something that makes the working with a lot of stacks in frameworks a lot easier so you see there's a lot of stuff here from amber now if I click on black boxing in the settings I can black box the library that I working with and and now the stack frames are hidden but I can focus exclusively on the coat I don't want to look at so in this case ones that I did not I did not kill jquery because I want to see the jaqua code but I could obviously remove Jake we as well and in addition to that we also made it easy to do so with the events so now if I if you see I click on an event in here but it really didn't go to the right code now I add framework event listeners as a checkbox and it goes directly to the line I specified my event in and then we get something for more advanced usage which is object vomitus object vomitus allow you to D to do this so it allows you if you if you have custom objects of any kind of sword in your framework in your in your transpiler you can make them look differently in devtools now you can make them look a lot nicer than before so before you have to top which is how it would have looked like before but now you can style them and map them up in a way that they lock in a really nice way to the console that's object vomitus and now finally I mean Jake will probably come up here and I was like well isn't this a service worker conference what's the deal okay well yes we have something with service work as well so this was this was service working before this is how you was what I we're working with Serbs work at this old world you went to service work internals same as with inspect devices it opens a new page and its really disconnected from the dev tools and also it it is focusing on all of the things that are happening across your browser not just the current service workers that you want to inspect instead of that we actually moved it into rich resources panel so now if you click on resources you have this new tab called service workers in there and it's a lot easier to work with them right there on your page and it's only showing you the service workers that are relevant to you allowing you to do a few cool things like forcing an update simulate push inspecting the worker right there there's still some UI two weeks that we can make to that thing i'm pretty sure but i think is a great step forward so now we've got making offering a joy to use we we made diffuse fun to use and we gave more power to javascript developers but it's actually one more thing there's one thing that is not quite ready for prime time but i don't want to talk about we rarely do this to give a sneak peek of something but i'm just so uncomfortably excited about it that i wanted to show it to you guys and that's the layout mode at the layout mode is that what you see is what you get editor for dev tools and if you if you like me you might cringe a little and that's okay right because you remember this kind of scenario where what you see is what you get is like sort of a maybe maybe I get what I see and that was the scenario with many of the tools that I grow up with that generate a lot of garbage code in the background and you have no idea what's happening so what was really important for us with a couple of design iterations that made this different first one was if you look at the classical what you see is what you get you get hide and whit controls but how often when you're doing a website do change the height and weight of something where you can change it on an image sure but mostly you change paddings and margins so we spend hundreds and hundreds of iterations to come up with a model that actually works for paddings and margins this is not the model at we're using but it's just design iteration that we're playing with we also want to make sure there's no black magic going on so we're not generating garbage code in the background and we always have you look at what's generated right there so with that being said here's a preview of the layout mode so i have this new little icon i click on it it becomes sort of a select and it can click on anything on the page and it brings up controls to change the padding and margin now as you can see when i hover hovering over it you get these little stops the walls that signal in which direction you can drag and which on you can't because everything on the website is highly dynamic so you want to change the direction right way now all of this matches up so if there's scroll wheel I can change the actual rule I can change the rule that I want to edit and it changes all at the same time as you could see the menu now and same thing here I click on the paragraph i take the margin or padding handle i change the rule by using the mouse wheel it flashes up in a style panel and i change it right there and it changes the one below as well so it's a really really simple way to change what you have in a page it saves it directly back to the style to you that you're having your page you can then take that style to bring it back to your editor whatever you want and the handles look very very different than what you're used to i'm sure and the reason for that is simply that we want you to focus on the content we didn't want to have a bunch of handles on top of your content so we moved them outside so this is just a preview of the layer mode there's a lot more to come we're still working on this quite a lot and what we're looking for your feedback and now next talk is going to be followers and paul irish afterwards talking about what we did in devtools when it comes to performance so not all is lost if you were so we're looking forward to performance thank you