 Hmm, can I edit and save changes in DevTools just like in my code editor? Well, with Workspace, you can. It does require a few steps to set it up and you'll be ready to go. Hi, I'm Jeseline. Let's dive into the Workspace. Here is my simple website. I have three files, an index.html, a JavaScript, and a CSS file. First, let's initiate a local web server to host our project. You can use whichever server you prefer. Personally, I use the Node.js HTTP server for simple projects, or parser which supports hot reload. In this example, we use parser and we run this npx command to launch a server. Then, we launch the URL in Chrome. By default, any changes you made in DevTools are not safe. These changes will go after a page is reloaded. However, with Workspace, we can change that. We can start setting up a workspace by dragging the source folder into the Sources panel. Alternatively, we can add it in the File System tab. Click Allow in the Chrome to give DevTools permission to read and write to the directory. Alright, let's try to make some changes in the index.html and save it with the Command-S or Control-S shortcuts. These changes will reflect immediately in the page thanks to hot reload. Next, change the color in CSS to Rebecca Purple and edit the log message in our script. Click on the grid button to check our new log. All the changes we just did in DevTools work in the browser even after the page load because these changes are safe in our source code. You could even open your code editor to double-check. Great, now we have everything up and running. I want to share a few tips and gotchas when working with Workspace. Tip number one, you should add only the source directory into Workspace instead of the whole project. In our example, our project folder has other files as well. For instance, this folder contains auto-generated minified files. We don't want to edit these files. In fact, including them in Workspace might cause side effects in our edits due to how source maps work. Here is another project built with View. When we add yet another source folder into Workspace, DevTools will show the folder name accordingly. For folders that are not relevant to the current page, DevTools graze them out by default. Tip number two, always edit files from the File System tab. Avoid editing files from the Pages tab or the Styles pane. First of all, edits that are made to the DOM tree and the Element.Style section don't work. This is intentional. Use this area for temporarily designed experimentation. The page revert to its original state when you reload the page. Depending on your locker server setup, editing styles that are linked to a CSS file may or may not work. For example, here is the page hosted with two different servers, Parcel and HTTP server. As you can see, the way that process the CSS files are different. With HTTP server, it serves the CSS files as they are. When you hover over the file name, the file URL is straightforward. In this case, at least in the Styles pane works, the changes are safe. On the other hand, Parcel optimizes the CSS files before displaying them. What you see in the Styles panes is not the original CSS files but the result of the source map. When you hover over the file name, you will notice the URL is more complex. In this case, edits in the Styles pane won't be safe. To make sure the edits are always safe, click on the link, do your changes in the file system tab and save it. The same concept applies to the page tab. Take note that edits in those auto-generated files won't be safe. Tip number three, use keyboard shortcuts to locate the files quicker. Regardless which panel you are in, use the Command O or Command P shortcut to open the file search dialog and quickly jump to the file. Tip number four is for the pros. Use the QuickSource tab to edit any source files while you are in another panel. Click the three-dot menu, select run command and open the QuickSource tab. Apply our previous tip. Use the Command O or Command P shortcut to open the file. However, instead of opening the file in the sources panel, it is shown in the QuickSource tab. Make your edits here, save it and refresh the page. This is great. It is nice to be able to make edits without switching to another panel. While the workspace feature is useful, there is definitely room for improvement. Tell us in the comments what you enjoyed about it and what you think could be improved. Lastly, go to google.gear-dev2-workspace to find out more about workspace. Thanks for watching. See you for the next two tips. Ciao!