This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.

Check out a free preview of the full Mastering Chrome Developer Tools course:
The "Sources Panel & Workspaces" Lesson is part of the full, Mastering Chrome Developer Tools course featured in this preview video. Here's what you'd learn in this lesson:

The Sources panel displays every source file loaded on the page and organizes them based on the domain where they originated. These files are editable and the changes are immediately reflected in the browser. In order to persist the changes, Jon demonstrates how to create a Workspace which maps the network resources to their corresponding files in a directory on your local computer.

Get Unlimited Access Now

Transcript from the "Sources Panel & Workspaces" Lesson

>> [MUSIC]

>> Jon Kuperman: Moving into the sources tab now so I'm gonna go ahead I'm going to drag them next to each other so we've got them over here. Like I said we're gonna worry about this right panel in the next section, debugging. For now, we're just gonna kind of shrink that and look at the two things going on here.

[00:00:18] So this is like this top down, it'll show you a couple of different things. One, it'll show you every host name that it's receiving files from. So this is really helpful like, I don't have much going on here, but for example I happen to know I've got this profiling page over here.

[00:00:35] So this receives stuff from local host and it's also getting stuff from all these wonky other hosts which are like YouTube embeds, CDNs that have fonts and things like that. So you can see every single host that's delivering assets to you basically. I'm gonna go back to my main page here and then from there you can kind of click through and see what actual files are coming down so two CSS files are coming down here I've got bootstrap.css.

[00:01:00] I've got my own style sheet, you can see what fonts are being sent down. You can see JavaScript and you can see the document. So this is a pretty cool. Keep in mind you can always pretty print things so for web performance it's good to minify and bundle all of your assets together but when you actually take a look at them,you can click pretty print over here and it'll expand them out pretty nicely.

[00:01:24] So yes, so basically again from in here you're kind of dropped into this editing mode where you can you know do things that you want like you could go ahead and like add some more style rules or whatever and it's like very, very similar with you know changes that you make like background, blue, or whatever will immediately show up in the background here.

[00:01:47] So this is just another way of kind of real time editing the site they are on. But where it gets really interesting is this concept of work spaces so work spaces are what allow you to persist your changes that you're making in developer tools to disk so you can actually start using it as your you know your primary editor.

[00:02:07] So basically how we start here, I did want to give like a little bit of a Warning here that work spaces are they're not necessarily glitchy but they're a little bit particular and so we're going to cover some of the edge cases but sometimes they're like sometimes it's smart enough to guess file mapping sometimes it's not things like that and there are some certain rules so we will cover all that stuff.

[00:02:29] So let me go ahead and shrink this so we just have you know the tree collapsed them. And then when I go ahead and open my finder and I'm gonna go to the folder of mastering Chrome Dev tools and I'm just gonna take that folder and I'm just gonna drag and drop it into the sources panel.

[00:02:48] And it needs is one of the things that chrome needs access to your file system so be sure to click allow.
>> Speaker 2: Can I ask a quick question that came up a little while ago? For those who are using the node version can you talk about
>> Jon Kuperman: This is the one you won't be able to do on that yeah.

[00:03:05] So workspaces only is good for editing files on your local file system. So this is the one thing you won't be able to do but you can try it with any project at home like you can make and index.html in a style.css and you can drag that folder into a work space and get the same effect but that's this is the one part that they won't be able to do.

[00:03:27] Cool, so now we've got two different things right. We've got our our local host which is sending down all the stuff and we've also got this folder over here which is if you look in the public folder setting down the same stuff. So now what we wanna do, now we've got kind of both of these in our editor we want to map them to each other so we got to tell Chrome like hey when I edit you know the style.css I need you to update you know my local style.css.

[00:03:49] So for example let's go ahead and open style.css and here's where it is finicky, so like okay so this time it was smart enough. And it's like hey would you like me to map this network resource to your local resource? So I can click on more and I can't yet totally establish that mapping that's great.

[00:04:10] And so you can map kind of any file to any other file. Sometimes it doesn't pop up that way and you'll just wanna go on to the not network one, I'm sorry to the network one and you want to right click on any file like you can go like here and now it says remove network mapping if it wasn't mapped it would say add network mapping so you would like go to your style that CSS right click on it.

[00:04:33] Add network mapping and then add it to your style that CSS or mapping you know a network resource to a local resource. So now what we can do that we have those map together is we can actually let me go ahead and open my text editor here.
>> Speaker 2: Before we get further into this, one question from Marcos is how all this is going to work with transpires.

>> Jon Kuperman: Yes that's great. Okay that's a great question. So this is like a little bit of the finicking this because of this. So a couple of things, all of this workspace stuff persisting changes to disk works only with JavaScript and CSS not the document because the document usually doesn't have like this one the one mapping.

[00:05:16] Transpilars add a lot of complication to it so in its simplest form Chrome is adding support for SAS pre-processing. So if you're using SAS since it's just like this one engine you will be able to edit your CSS. And this is not released yet it is an experiment which we will look at and it will save back to the SAS file.

[00:05:40] That being said if you're using transpires for like a bundler that's a different story. So if you have a your like style.css and style2.css and you're bundling those together and sending build.css down to the client you. Won't be able to map that, so what you should do with your hopefully doing anyway though is your development version should be serving all of those files individually right not bundling.

[00:06:03] Your bundling should only happen for your production version. So that's like two pieces of it and then the third piece of you're doing like Java Script transpiring with Babel or something like that there is no support for that. So work spaces will not work for that it does seem like something Chrome is actively pursuing.

[00:06:19] I've heard rumors that they gonna add mustache support. So you can be able to get it documents and it'll find the mustache. I don't know if that's coming. So this is such a cool feature, a few years ago when you were serving down your raw assets. I still use it a lot when I can get away with it.

[00:06:37] But for sure, if you have a complicated build process, it's not gonna be super useful. Although, a lot of places that I've worked are still able to send down style sheets or still able to send down on process JavaScript that you can edit but it's a really good question.

[00:06:52] Okay cool, so we've got it added now so we've got style that CSS mapped and then I just open up in a text editor the style that CSS just so we can kind of take a look at how this is working. So it's pretty cool is if I go in now and I add like you know background.

[00:07:09] Blue, I keep doing that I know it's like horrible visually, just the only color I'm thinking of and I hit command S, you can see like just like a text editor there's an asterisk here, I mean it's not saved. So I hit command S to save it and I pop back here and immediately, it's persisted to disk and what's even cooler than that is you can go back into your elements panel and now, any of these little changes that you start making like background pink, that's much better, immediately saving to disk here.

[00:07:37] So now you can throw away the editor if you're lucky enough to be in this situation, you can do all your, so like the biggest thing win for me is I can't tell you how many times I've like been in Dev tools and tweaking all my styles and I get everything looking perfect and then I'm like I've been making changes for three hours I have no idea what all I've changed and then I refresh and it's back to bad and I try to start again.

[00:08:00] So like this way you can really start tweaking all of these different things and they all save immediately to disk and that is true also with the JavaScript. So if you open up a JavaScript file in the sources made some changes to command us it will also save immediately to disk.

[00:08:14] So if this fits your use case really really really awesome. You can also do things in the sources tab like. You can create new files basically just have everything that you expect out of an editor. So you can create new files you can rename stuff you can you know map them together, edit them all, that kind of stuff so I had about six months ago I did an experiment where I had only front end tickets and I did nothing but Chrome Dev tools for like a week as my entire editor for everything.

[00:08:42] And there were some things I really missed but it's cool.
>> Speaker 3: Is there an undue?
>> Jon Kuperman: Yeah, so if you still have access to Command Z or Ctrl+Z But as far as like as you start making a bunch of different changes, hopefully version control can be your savior there.

[00:09:00] They're really good because especially like you're making changes in the elements tab is like so fast and easy right. You like adding all these things or whatever. So hopefully version control is kind of the answer but you do in sources you have undo and redo just like a text editor.

>> Speaker 4: What happened to local host because when we got the style sheets know it's early. I know all the files and local host.
>> Jon Kuperman: I think it's only because for every file in local host I was able to find a mapping that it It's, that it's gotten rid of local host.

[00:09:29] Because normally,
>> Speaker 4: It says under one relationship.
>> Jon Kuperman: Yeah and more robust apps, I usually still see local host which will have some unmapped files in them or whatever, yeah.
>> Speaker 4: And then if you compile it like you're SAS using grunt or something like that would it be smart enough to know that the changes have occurred when you save them?

>> Jon Kuperman: Yeah, so grant so if you're using a build tool like that, it will because the save all update the file system and that it's like I notify or whatever will notify grant. I don't know, like everybody's build is different levels of complicated. I know that the SAS support is very beta right now, and I'm not sure how complex it can handle.

[00:10:12] You know what I mean, so as far as it will send the signal to your file system that something's update, so we're doing a gulp watch or grant watch, that, you're going to go there. I'm not saying that it's gonna be a great experience with SAS right now cuz it's so early with all the stages.

>> Jon Kuperman: Cool, so there's Camelot you can play around with there again like if it happens to work with your workflow it's like such a great experience especially as we get to the next part of debugging being able to debug and then edit immediately is really nice but there's definitely as build processes get more and more complicated.

[00:10:48] This is less and less viable but I do you think it's pretty awesome.