Mastering Chrome Developer Tools Challenge 1: Editing a Page

Transcript from the "Challenge 1: Editing a Page" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Jon Kuperman: So now, the first challenge. And this, everybody'll be able to do, even if you're on the NodeCast site. So if you go to the Editing tab, I just figured we could take maybe 10 or 15 minutes, something like that. And there's a bunch of challenges on here like, can you change the body's background?

[00:00:19] Can you move this into the list? Can you find where the scroll listener is? All these different things that we've kinda covered so far. And all of these, yeah, I think every single one of these has multiple ways you could go about it. So maybe getting a little comfortable opening the style sheet and sources, and you can use it like a text editor.

[00:00:41] Or open it in the Elements tab and just make, snipe those little changes in that way. So for those of you that have it locally, it would be cool if you wanted to set up a workspace, so it all persisted to disk. For those that are accessing it through NodeCast, you won't be able to.

[00:00:56] Anyway, feel free to ask me any questions.
>> Speaker 2: Okay, before we do break, there's a handful of questions online,
>> Jon Kuperman: Cool.
>> Speaker 2: And I'm gonna attempt to phrase them in a way that communicates what they're asking. [LAUGH]
>> Jon Kuperman: Awesome.
>> Speaker 2: The first one is from Stephen, and the question he's asking is, how do you remap back to the server instead the file system?

[00:01:17] So getting, maybe the question is around removing the workspace, or.
>> Jon Kuperman: Yeah, so the workspace will always be identifiable as this orange folder, although that's probably subject to change. But you'll always be able see your workspace, and you can just, let me get in here. You can just right-click it and then remove folder from workspace.

[00:01:40] That'll ask you if you wanna do it, and now you're back to local host just like before. And that's good to do, because workspaces aren't host dependent. So basically it's like a text editor, where you can open up a bunch of different folders. So if you don't remove them, you'll just end up with all of these projects kind of scrolling down your list over here.

[00:02:00] So yeah, you should probably remove them when you're not working on that project anymore.
>> Speaker 2: And then the next question is from Ian H. And I think he's trying to get at, does it save automatically, or do you have to do the Cmd+S?
>> Jon Kuperman: Cmd+S when you're in sources.

[00:02:18] So if you've got a file open, so if we change, I guess it's not. You would still be able to see it, even though I got rid of the workspace. So we change this, and we can immediately see that an asterisk came here, which means it's unsaved. So you'd have to hit Cmd+S to save it.

[00:02:33] No anything but adding when you're in Elements. So any change you make, like if I just changed this to pink, it's done. It's saved to my workspace.
>> Speaker 2: And then from Kedar, is the whole point of this to not even have to open an external editor?
>> Jon Kuperman: It's not, I mean, that's opinion, I like that idea a lot.

[00:02:57] So okay, so I guess a step back on why this matters is, so for anybody that's worked with a language like C++ or Java or something like that, one of the really cool things is that your editor, your IDE, also is the full debug environment. You've got this whole world set up to help you write software.

[00:03:15] We have a big disconnect in JavaScript, because we're working in a very different way, we're authoring files. But then that file just gets like thrown over the wall to the client, right? And they interpret it based on what browser they have. So that makes our job a lot harder, right, because we can't control that environment.

[00:03:32] So the cool thing about this is, it kinda brings you more in line with, you can do your step through debugging. You can look and see if there's errors, you can edit and author files. You can do all that in the same area, which I think is great.

[00:03:45] That being said, I'm not anti-editor. You should definitely still, you know what I mean, do whatever you're comfortable with. But I do like this, because it's like one less application to toggle between, basically. You can do all your authoring right in line. So I feel like that's kind of opinionated, I like that idea.

[00:04:04] I like the idea of just using Chrome DevTools tools as your editor, but.
>> Speaker 2: Okay, one last question, clarification from Ian. He's wondering, if we're viewing a website, can you just save the in-memory data to disk, dump the memory contents directly to disk?
>> Jon Kuperman: Yeah, so there's a couple of different things.

[00:04:24] So as far as memory contents go, when we cover the memory leaks area, so let me back up. We're gonna generate a bunch of different stuff in Chrome DevTools. We're gonna do memory profiles, CPU profiles, all these different things, network profiles. And all three of those do generate a file, and all three of those files can be saved to disk.

[00:04:45] So for a network, it's a H-A-R file, HAR file. And so yeah, all of those can be generated and saved, which is really cool, because I've had this happen before. I've been complaining about something with DevTools. I'm like, it's whatever, and then somebody that works on DevTools is like hey, will you send me an HAR of your network?

[00:05:03] And you save it and email it. And so the same with memory and CPU, so yeah, all three of those we'll be able to save and send around.