FREELessons: 9Length: 48 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 After Making Changes With VisBug

VisBug’s changes are, at the moment, not permanent. However, that doesn’t mean all your modifications need to be lost when you’re done. In the last lesson of this course, we’ll look at four different ways to handle working with the changes you make using VisBug.

2.6 After Making Changes With VisBug

Hey, welcome to the last lesson in VisBug Quick Start. One of the most significant limitations of VisBug at the moment is it doesn't have any kind of a save button. The developers are working on creating the ability to keep ahold of your changes, but is not available in the extension just yet. So in this video, we're gonna talk about four ways that you can keep ahold of the changes that you've made using VisBug. Which one you wanna use kind of depends on the reason you're using VizBug. The simplest method, and this is gonna seem a bit obvious, but I'm gonna mention it anyway, is just to take a screenshot of the changes that you've made. And this might be all that you're gonna need if you are working with a developer or a designer and you just need to make a couple of little changes and then communicate those changes to the developer. So for example here, I've just changed up the alignment of these flex box elements that we were looking at before. And I've just changed the color a little bit here. And for that, the screenshot is gonna do the job perfectly fine. It's probably worth looking at a screen capture plugin like this one here. So that if you have a website that's much, much longer or taller than the view port, you can capture the whole thing like you can see in this image here. So a screenshot like that is gonna get everything that's on your page, everything that you've changed. The next way is one that we've already mentioned, and that is to copy from pined meta tips. So if you grab the Inspect tool and then you hover over the element that you've changed, you can see here it's showing the change background color. Then you just hold down Alt + click, and that's gonna make that box stay here. And then you'll be able to copy this code and transplant it back into the style sheet that you're working on. And you can see here it actually specifies local modifications. It tells you which of the CSS that's currently applied to this element has come from VisBug versus what was in here by default, which is at the top. And this is a good solution for you if you are a coder and you're not making major changes to a design, you're just making little tweaks and adjustments where it's not really a problem just to copy and paste in a couple of lines of CSS. What if you've made much much more extensive changes? You might have completely modified a section of text, you might have dropped in some images that you definitely want to keep in place exactly where they are. You might have done a whole bunch of stuff and copy and posting lines one at a time is just not going to cut it. In that case, one solution is to use dev tools, because if we inspect one of these modified elements, we can see in here that all the changes that have added in by VisBug are actually inline styles. And if changes have been made to text, I'll just add in a quick change here. Then those changes show up here too. So what you can actually do, this is kind of a quick and dirty method, but it gets the job done. You can go up to the HTML element here, right-click, and choose Copy > Copy Element. And if you then paste all of that code into an HTML document, you'll have everything that's showing up in your page that was changed by VisBug. So you can see here, we have the inline styling that's controlling the change background color of this element here. And we also have this modified text that we changed up here. This is not a perfect way to do things for a couple of reasons. One is that you're gonna have this element here that's been injected by VisBug, so you'll have to delete that manually. And also if you're working on a site locally, then you have to run it on some type of emulated server. So you can see up here, I'm running this on a local hist which is just been operated by a plug in that am using inside VScode. And that has also added in a little bit of its code to this as well, which you will also need to manually delete. But if you can sort of get past, Those extra couple of steps, and what you end up with is a bunch of code that contains all of the changes that you made. Now, this is a good solution if you're working with a developer, and you can then save this document out, send that to them. They can then open it up in a browser, and they can see exactly what properties need to be carried into the actual production code. They can see exactly what text needs to go in. What alignment needs to go in. What colors need to go in. Everything that has been changed in VisBug is gonna be there for them and then the only step they need to take is properly implementing those changes. So things like taking this inline styling out of the HTML and putting it into a style sheet. But that is gonna make their job a lot easier if there are a lot of changes than just working with a screenshot. The fourth thing that we're going to talk about is using work spaces in dev tools. So if you go into the Sources tab and then you go into File System, you can actually add the folder that you're working on. So I'm just go ahead and do that really quickly, I'll just fast forward. So I've just added the folder that contains the files that I've been showing you in the browser here. And I'm gonna give Chrome permission to access that directory. And now it's showing me all of the HTML files that I've been working on. The one I have open right now is modifying layout.html. I can open that up by double clicking it, and now I can actually make direct edits to that HTML file right inside this window. So what I can do is the same thing I just talked about, and go into the Elements tab, right-click, Copy the element. Go back into my sources and now I can just paste over the top, Of the code that I already had, have to remove that live server code like I mentioned before. And also remove the VisBug tool pallet. But now if I save that file, that's actually overriding the original file. So now, if I refresh, VisBug is gone but those changes are still there. So this can actually be a way that you can make permanent changes to a site. Say for example you purchase a static HTML template, you use VisBug to make a heap of changes to it, completely modify the way it looks, modify its content, the whole thing. Then you can use that method with Workspaces to edit and overwrite that HTML. Then all you need to do is send that modified HTML off to a developer where he can properly implement those changes. You give them the original template, you give them the modified version that you changed using VisBug. And they'll have an incredibly clear list of things to do to take that original template and turn it into the version that you created using VisBug. And as I mentioned, they'll just be doing things like taking that inline CSS out, properly implementing it into a style sheet. If you've dragged and dropped in images, they'll be in there inline as Base64 code, but you can provide the developer with the actual images to put into the site properly. So then that whole process of taking an existing design, changing it, and working with a developer to implement those changes, could be made much clearer. The communication between you and the developer can be a lot clearer because they'll see exactly what you want to have changed. And on the flip side, if you were just working on a small project, you don't necessarily need to have everything implemented perfectly by the book, where perhaps it's okay for styling to be inline, then you might not even need somebody to fully implement those changes. This might be perfectly good as it is if it's a lightweight, small project. So that covers four different ways that you can preserve the changes that you've made to a site, using VisBug. Screenshots, copying from pinned meta tips, copying HTML from the Element tab in dev tools and pasting it into a document. Or using workspaces so that you can directly copy and past code into your source files and save them purely using dev tools, so you never even have to leave the browser. So that brings us to the end of the last lesson of VisBug Quick Start. We just have one more video. We'll just quickly recap the key points of what we've covered in the course. I'll see you there.

Back to the top