Use of chrome development tool Workspace)

In front-end development, we often need to make some detailed adjustments in the browser, such as fine-tuning CSS. The fastest way is to adjust them directly in Chrome's developer tools, but the problem is that we need to write the correct values in the CSS source code again in the console, which reduces the efficiency. Chrome's workspace tool can help us automatically save the modified content in the debugging tool to the corresponding file. The method is quite simple. The following uses debugging a CSS file as an example:

Open the page for debugging, enable the debugging tool (F12, ALT + command + I), switch to the sources tab, right-click the CSS resource, and choose add folder to workspace 』

Then you will be asked to select the Save path and select the corresponding development directory. After you select the path, the development tool will ask you to obtain the directory permission and click "allow.

Right-click the CSS resource again and select "map to file system resource 』

Double-click a file and click OK:

Now that the workspace is set, we can modify the CSS to see the effect. Here, I deleted a line of background style:

Then, the corresponding CSS is commented out in the Editor:

Finally, you can go to the workspace panel to modify the configuration:

In this way, debugging is very convenient. You can also debug the JS file, so we will not describe it here.

 

Reference: http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/