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

Jon walks through the Editing Exercise demonstrating how to edit through Chrome DevTools. Jon takes questions from students.

Get Unlimited Access Now

Transcript from the "Editing a Page Solution" Lesson

[00:00:00]
>> Jon Kuperman: That was the first exercise. It's always the bumpiest, cuz you have to install a bunch of stuff, and set stuff up, so there's always problems. I'm gonna go over it, kind of from start to finish as much as I can, but also, great time for Q and A.

[00:00:12] So let me kinda just go over the whole process from this editing page here. So the first thing I would do, I have Get, and I have Node installed in my computer already. So I'm gonna go to this, from mastering DevTools, I'm gonna go to this source link and open it.

[00:00:27] And this is just like the GitHub Repo where this project that we're all gonna work on, lives. So there're like clone or download button here, and I'm just gonna copy this to make clipboard, this GitHub link. And then, I'm gonna open up my terminal, which I've got here.

[00:00:42] And I'm just gonna do a get clone of that repo. So it creates this new folder. I had some fake images in there. So if we do an LS or whatever, we can see this folder. So I'm gonna cd into that folder. And then, if we do an LS, we see all My files, and just things like that.

[00:00:59] So then, we'll do an mpm install, this is just gonna install all the dependencies, and mpm comes bundled with nodes, so it should be good. So it installs all that stuff, and then, I'll do an mpm start. And then, that should give you this little message, app listening on this link.

[00:01:15] So click that link, and it opens up local host 3000 with the sites on. I'm gonna close the Mastering DevTools page. I'm gonna close the GetHub link. And now, we should have the site running, cover the exercises, and editing. That's where we're at. Basically, they're just a bunch of different things here that we can do through the DevTools.

[00:01:39] Some of them, right, can be persisted to disk. I think most of the ones at the top can. Some of the ones, like these dom ones we mentioned, we can drag this into the list, but we won't be able to persist it. So the first thing I'll do, is I'll open up the DevTools.

[00:01:53] Just kinda starting from scratch, so I'll go into my Sources, Filesystem, Add folder to workspace. And then, I will go and find my, I think I've got like Front End Masters, Mastering Chrome DevTools. So I'll find my folder, wherever you downloaded it, wherever you're running it from, and click Select on there.

[00:02:12] This little warning will come up at the top, saying, do you wanna give it permission. I'll say allow. Now, I've got this folder in here, which means if I go back to the element panel, I should see these nice green dots by all the style elements. So then, from there, I can kinda scroll down a little bit, set the bodies background to EEE, so I click on the body, I see there's no background color set.

[00:02:35] So I can kinda click here to create a new line. New background, EEE, and that changes. List items have no bullet points. I'm not sure how familiar everybody is with CSS and HTML, so the specifics of these exercises aren't that important. What's important is just kind of diving in, hands on all that stuff, so.

[00:02:54] You can go and do something like I'll use this, I'll click on one of these list items, or maybe the whole list, and I'll do new style, like an inline style. I'll do like list style, none. You could also, if we don't put it here. They're supposed to be, so you can click on any list item, and you can see that they have kind of these selectors here, you can do it here, as well.

[00:03:17] So list-style not on these lists. So I'll go ahead, and list-style, none. So the bullet points go away, H1's have a font size of 50. So we'll go to these H1's, and we'll see the font size is like 2em, so I can change it to 50 pixels, or something like that.

[00:03:35] Find the scroll that's in there. So this one I sort of cover a little earlier from the styles, you can head over to event listeners. And you can see what all event listeners are on this page. I can see that there's one scroll listener on the document. And if I go ahead and I clicked it, takes me into this editing.js page, which says, you found me.

[00:03:54] Convert the background of the body into HSL. So we go back into the styles tab here, and we can see this background that I set to EEE. So I'll hold shift. This one's a little finicky. You gotta click on the box itself, so holding shift, I click on the box.

[00:04:09] It goes to RGB. I click again, it goes to HSL. If that's difficult or not working for you, you can just also left-click on the box, which will open up this nice pop over here. And then, you can select from these two arrows here, and you can start switching through all the color modes this way, as well.

[00:04:26] Might be easier. This one is confusing, I apologize for it. So we'll just skip this container 10 columns thing. Figure out what color the link becomes when hovered, so we could cheat. It's yellow, I see that. Or we can go ahead and we could do the selector, we can hover over the link, we could go to this HOV, and we can trigger the hover state, and then, we can see, I was wrong, it's pink.

[00:04:49] I have issues seeing colors, but it is pink. And then, the last one was put me in the list, so we can go down in the elements tab, and we can find that list item. And then, we can just hold to drag it, and put it up here in the list, maybe, below this one.

[00:05:05] And now, it's in the list. Yeah again, the specifics of list style or whatever, not really important, just kinda wanted to get everybody's feet wet. Get in there, open it up, get the workspace working, cuz once you kinda go though that motion, it becomes easier. And then, just start messing around with things, so yeah.

[00:05:23] Any questions on that exercise, yeah?
>> Speaker 2: Is that last one to put the element in the list, supposed to be savable from DevTools, or not?
>> Jon Kuperman: That one is not savable from DevTools.
>> Speaker 3: Can you go over the one you skipped?
>> Jon Kuperman: Yeah, this is just, honestly, my mistake.

[00:05:37] I had a column class that was there, and I was up late working on it. I apologize, I removed the column exercise. I meant to remove that, so that just my mistake. Sorry about that confusion.
>> Jon Kuperman: Cool, this is a really good question, another kinda caveat. So Cody says, any way to add a new selector to file system file from styles tab, ie, not switching the source, and manually writing it?

[00:06:04] No, you're not able to do that, right? So if you think about it, it develops this mapping. And then, yeah, and then, you can edit anything that's there. Actually, let me double-check on that. It's like a pretty cool question. So if we were to add, cuz I know what you can do, is, let me see, so we've got this stuff syncing.

[00:06:27] So if we go to this, and we add a new class, and we call it, yeah, nav.nav. And then, we were to do like color, dark blue. Would that then, if we were in our style.css? It looks like it does not persist. So that makes sense. If we're actually, instead of editing stuff that exists that's mapped.

[00:06:51] And actually, you can see here when I add the class, it says it's adding it to the inspector style sheet, as opposed to adding it to my style file. So does that make sense as another copy out? If you have classes already, you can edit them any which way.

[00:07:04] You can add attributes, properties, change anything. But if you were like, I really wanna grab this body, I need a class on, or whatever. You wouldn't be able to add class from the DevTools, that wouldn't persist. What you could easily do, is you could give the body a selector.

[00:07:22] So if we didn't have one, we could use something like body, now it has an empty selector. Now, we kinda reload, and we can go ahead, and just add things that we want there. Is that make sense? Adding a new class from a DevTools not persisting. What happens if I open a different project.

[00:07:41] A local host 3000. It's smart enough to know it's a different project, and it would require me adding a new folder. So that's a great, great question, too. So like once you have that workspace added there, you'll notice that it stays, right, so if I were to close the tab, and go back to my local host 3000, and open this up, and go to sources, we still have this workspace there.

[00:08:01] So then the question is like, let's say I'm working on two different apps, so I open one up, and I drag it to Workspace, and everything's good, and I close my tab, and then the next day I go and I open the other one up, is it gonna be conflicting like that?

[00:08:12] Yeah, it will be smart enough. Once it maps them, it won't just start mapping over everything else. Anyway, for dark theme for the DevTools, so the DevTools, there is a dark theme. It's in the Chrome Dev Store, and when you find that there's instructions for how to install it, I believe, there's like a setting, yeah, I believe there's a setting so, wait, never mind.

[00:08:32] It's built in now, great. It used to be in the store. So yeah, let's, from the DevTools, you go here, the three dots, you click on settings, and you can go to dark theme, yep.