The workspace configuration in Chrome has the effect of synchronizing local file changes

In front-end development, we often need to debug in the browser, especially some of the style of modification, if you still first in the browser elements debugging in the copy to the local file, it is really out.

The workspace feature of the Chrome browser can help you make the same changes, but you need some settings. Well, the nonsense is not much to say, first look at the following example:

1. Open the local HTML file in Chrome, F12, open the debugger

2. Select Setting from the Select menu in the upper right corner

3. Select Workspace in the left-hand menu bar and click Add Folder to include the project directory

4. Click Add to add mappings, note that the path matches the bold path above, and a slash is required after

5, set up, back to the elements panel, enjoy debugging your style bar! There will be a miracle Oh!

Style in elements before debugging

Local style files opened in the editor before debugging

After commissioning

With workspace, Mom doesn't have to worry about me going back and forth. Debug style

The workspace configuration in Chrome has the effect of synchronizing local file changes