Go to chrome workplace

Introduction

I believe everyone knows the workplace in chrome develop tools, which enables editing of local folders under the source panel. Yes, this makes chrome one of our optional editors. However, we found that using this function alone does not show the advantages of workplace. It should be used together with sourcemapping. This allows the browser to directly load and parse local source files (sometimes it can be used together with a proxy, such as fiddler ). To accelerate development.

Use 1> enable source mapping.

Go to settings-> General, and check "enalble JS source maps" and "enable CSS source maps ".

Different Versions of chrome have different forms of expression. You can adjust them by yourself.

2> Add the source file to the workplace.

On the source panel, right-click the file to be mapped (or blank space), select "add folder to workplace", and select the corresponding project (or static resource file) (Here I map the entire project of the document platform). In this way, we add the corresponding source file to Chrome's workplace.

In this case, we choose a file, such as home.css, we will find two home.css, one is remote (from the http://fe.baidu.com), the other is local. As shown in --

Of course, you can select workplace in settings to directly add the source file --

3> Create a ing

Right-click the source file to be mapped (note that this is a file, not a folder) and select "map to network resource ...".

Select the corresponding remote request to complete the ing. Note: Once a file is mapped, all the corresponding source files and the corresponding remote requests are mapped one by one based on the folder arrangement by default.

Mappings.

4> change CSS and JS

After the ing is created, debug the style in the style panel and change the corresponding source file. Changing the style removes the need to retrieve the source file and change the corresponding style again.

The "recompilation and update succeeded." prompt appears in the console for every change to the JS file.

With workplace and sourcemapping, event-driven js code can be seen in real time. You do not need to refresh the page every time you make any changes. Save development time.

Note:

• When the source file you map is not directly parsed and executed, you can use other proxy tools (such as fiddler for proxy) in combination with workplace and sourcemapping.
• When the requested file has parameters (for example, some static resource files are lazily loaded, the timestamp parameter will be added, and the time parameter in each request will change ), in some cases, Chrome's sourcemapping support is not complete. In an attempt to use the mappding regular expression to set the ing, the ing fails because "/" is automatically added after the mapping path is set every time. This place is indeed a pitfall. If you have a solution, communicate with us in a timely manner.

Summary

Combined with workplace and sourcemapping, the main advantage is that CSS and JS changes are directly reflected on the current preview page and source file. To accelerate development.

If there are any imperfections, please feel free to discuss them with me.

 

Go to chrome workplace