Chrome Development Tools Guide-saving changes through workspaces

Brief Introduction

The Chrome Devtools allows you to make changes to the page or CSS and to view the changes in real time. But if you need to copy the changes in the external editor and paste them into the devtools, what's more important to you. Workspaces allow these changes to be temporarily stored on your hard disk without having to leave the Chrome Devtools interface.

With the workspace, you can edit any type of source file in the Sources panel and save the changes to your hard disk. And you can map the resources from the local server to the files on the disk, and when you modify the file and save it, they can run as usual. Also, if you set the mapping correctly, your modifications to the Elements panel will automatically be stored on the disk as well. put an item into the workspace (Workspace)

To edit the local source file in the Sources panel, right-click the left part of the Sources panel and select Add Folder to Workspace. This action launches a file selection box, where you can select the folder you want to add to your workspace (this does not add the currently highlighted folder to your workspace).

When the yellow tip "Devtools requests full acess to [path to your folder]" appears at the top of Chrome, select *allow.

In Chrome, you can edit any files and subfolders in the folder. In this case, the source file is just HTML, CSS, and JavaScript, which refers to any type of file, including Markdown and JSON. Map Network resources

What really works for a workspace is that it can map a local file to a URL (or a network resource). When Chrome loads a mapped URL, the contents of the network folder are replaced by the workspace folder. It's as if the files were on the Web, but you can modify the local files and save them by Devtools.

Map your site to a local workspace folder: In the Sources panel, right-click or hold control and click on the file on the site. Select the Map to File System Resource. Select the appropriate file in the list that appears (you can enter a filename or keyword to find the file you want). Reload the page in Chrome.

The Source panel now displays the folder for the local workspace, not the content on the server.

You can use this functionality elsewhere, such as mapping a workspace folder to a URL, or mapping a network resource. Note that not all network resources mapped locally will be loaded into the browser, but your local files must all be mapped to URLs. Mapping a file in the workspace should map the file to most sites in that workspace. Attention Matters

The workspace makes many of your work easier, and you don't have to switch between the Chrome and the external editor. However, there are some things you should be aware of: only the styles changed in Elements will be saved. Changes made to the DOM document are not saved. The styles that are changed in the Elements panel are saved immediately, just as the CSS file is mapped to a local backup file (that is, changes originating from the Elements panel do not need to be saved manually). If you map files from a remote server to the local, when you refresh the page, Chrome loads the file again from the remote server. The changes you make are saved on your hard disk and will take effect when you continue to edit the files in your workspace. file Management for workspace

When working with workspaces, you can add or remove files from your local directory in addition to editing existing files. Add Files

Right-click the folder on the left and select New File.

Deleting Files

Right-click the file on the left and select Delete files.

You can also select Duplicate file to copy files. The new file appears in the Sources panel, and you can enter a new name for it (by default, "Copy of Mufile.txt"). Refresh

Now that you have created (deleted) files directly in the workspace, the source directory will automatically refresh and display the new files. If not, you can right-click a folder and choose Refresh.

This method can help you refresh the file in the Devtools when you make changes to the file and save it in another editor. In general, Devtools will refresh automatically, even if the file is saved in an external editor, but if you need to recompile HTML or CSS files, you need to refresh them manually. Search for Files

If you want to search for files in Devtools, press CTRL + O (or use CMD + O on your Mac) to open a File search option box. You can do this in the workspace, but it searches for files that are remotely loaded in the workspace, in addition to searching for local files.

There are a number of ways to search for files, so you can search for files in your workspace, or you can search for other files that are loaded into devtools. You can even search by a string or a regular expression, and Chrome will find any files or pages that match.

To search for text through multiple files in the work range: Press ESC to open the console, and then select the Search tab next to the console to open the searching window. or press Ctrl + Shift + f (use cmd + Opt + F on the Mac) to open the Search window. Enter the content you want to search in the search box, and then press ENTER. If you are querying a regular or case sensitive content, check the box.

The

Workspace is a new feature of Devtools, so this article may not be able to cover all of its features, please refer to the development documentation HTTPS://GITHUB.COM/GOOGLECHROME/DEVTOOLS-DOCS/ISSUES/30 for details about the workspace.