2.2 Sources and CSS

Hi, everyone. Welcome back. We're gonna take a look at the sources panel. But the sources panel is really feature rich and because of that we're gonna split out the content into a few lessons. In this first lesson we'll take a look at the CSS, and in the next lesson we'll take a look at the JavaScript. Because we're only focusing on CSS, I've also hidden this right sidebar, which primarily used for JavaScript. First, I wanna show you how we can go from the Elements panel Styles pane directly to the Sources panel. So here I've got a h1 and it's got a padding of 10 pixels. Let's say I want to find where that's defined. Well, I can Cmd + Click on the property or value. So right now, I'm holding the Cmd key, and letters of the value is currently highlighted. So if I command click I get it taken straight to where it's highlighted with the cursor in the right position. To also demo source maps support, I've actually used a CSS preprocessor here and in this case, assess, you can also use less. And what you'll find is because my CSS file has this little comment at the bottom, with a corresponding map file, dev tools is able to map between the two, and show me the file which I actually authored, which is really useful. But what's really nice, is going to the exact position in the source code, so for example, my paragraph type has a color of black. If I Cmd click on the black, I'm actually taken to the variable initialization, where as if I Cmd click on the color property, I'm taking to where the color property is actually defined. Let's look at editing code. If I change this 2% into a 20% well nothing will happen, but it doesn't have to be that way, we can actually make dev tools understand the mapping between this Sass file and the corresponding CSS file. To do that, we use a feature called workspaces. So I'll right click here and select, Add a folder to workspace. I've selected the folder I want from the finder and It's asking me if it can had write access, which is completely understandable since we're going to be gaining save to disc ability. So, select allow. And now It's showing me two versions of the file, which is. Kinda confusing, I've got like stars.css here and stars.css there. Well what dev has actually done is, it's presenting to me the files as they are in the file system and that's this one. I have a folder called sources panel, and it's presenting to me the files that served via the web server, I've actually got a simple python HTTP server. What we need to do is teach dev tools about the mapping between these two and in particular, I'll choose the CSS file. I'll right click and select Map to File System Resource. It's already selected the correct file for me, based on the file name, I assume. So, I'll hit Enter and it's just asking if devtools can restart. Great, the first thing we will notice is that localhost 8880 has disappeared. Don't get me wrong, I'm still on that domain, the point is, is dev tools is able to hide from view, the files coming down the web server. Let's take a look at [UNKNOWN], say you want to change the color from black to green. I'll come here and I'll change up black into green. Hit Cmd+S, and as you see, it changes instantly. And the reason that works is a few things. One, is if I go to Settings and Auto-reload generated CSS, you'll see that's enabled. So, what dev tools is doing, is it's noticing that the compiled CSS is changing, and it's reloading from it without a page refresh, which is very powerful. How is it doing that? While if I go to my terminal you'll see I've got, that you got gulp running. And gulp can be used for many sort of built systems and, and in this case, I've got a watch task. But one thing I'd like you to take note is when I change that color from black to green this also reflected in my code data. And this is by directional so I can change that green into a red, Cmd S. Go to Chrome, refresh, and the change is applied immediately. I'm going to change that back to black. I want to show you a few nice features of this editor, this is actually based off of the code mirror editor, which is open source. Then selector the transform variable and hit Cmd D. By hitting Cmd D it selects multiple occurrences of the selections. So, I'm going change that variable to rotate, hit escape, Cmd S and that just works. Now, if I go to the compiled CSS, which is styles.s, I can see things are just as they should be. By the way to bring up that dialog box, I use Cmd+P. And what you find is we've got a lot of files that we don't really care about such as a node modules folder. I want to show you another way that this can bite us. I'm gonna close these two and do a project-wide search for the color black cuz I know I've defined it somewhere. Do a search and there is a lot of files which have the word black, of course, my files do match, but I don't particularly care for these node modules files. So what we can do is right-click on node modules and select Exclude Folder, OK. And just like that, projectwide searches now exclude the folders that you've set to exclude. Also this file open dialogue will take my exclusion folders into account. When you have done a project wide search, you can actually click here and it will take you straight to the line of code where, our text match is made. Another cool thing is we can see all the changes that we've been making by right clicking on the file and selecting local modifications. That will show you the changes that you've been making and you have the option to revert, we can just use the Cmd E shortcut while in the editor. One next step is, while editing numerical based values, is you can hold the Alt key so, right now i'm holding Alt.and i'm going to use up or down. And as you can see, the values increment or decrement by one quite nicely. But I Cmd S to save and that changes the plate immediately. And, of course, if I go back to sublime text I see that change up dated in my editor. So let us take a recap of what we've learned about CSS and the sources panel. You have full life and disabilities and this isn't limited to just compart CSS files but also CSS preprocessor files like Sass or less. If you want to get save to disk abilities what you really want to do is create workspaces. I did that originally by right clicking here and selecting Add Folder to Workspace, but you can also do it another way by clicking on the Settings code going to Workspace. And seeing all the folders you've already added to your workspace while adding new ones. If I select this one and go to Edit I can also see the folders that I get excluded. So you might find it useful to exclude from node modules or [UNKNOWN] components. We saw a few code editing tricks like using Cmd D to select the next current. You can use alt and up to increment by one, and there's a nice integration in the stars pane and the sources panel in a sense that, you can always command click a value and get taken straight to that point in your code. If you want an overview for the changes you've been making you can right click and select Local Modifications. And to actually really embrace this workflow you might having a simple gob file, or grunt file, which watches for changes to files and then compiles new versions of them. That's all for now. I'll see you in the next lesson.