Google Chrome modifies CSS and js and saves them to files synchronously. Google css

Google Chrome modifies CSS and js and saves them to files synchronously. Google css

Title of this article: Google Chrome modifies CSS and js and saves them to files simultaneously.

Text by: konjac Bell.

Google Chrome DevTools source map for Google Chrome DevTools is getting better and better at http://www.stephen saw.me/google-chrome-devtools-source-maps/google, especially their quick Blink and V8 performance, and they make DevTools better. Recently, I found that the correct way to edit the source code is to map the source code to Chrome DevTools. Source Maps

To verifySource MapGo to DevTools to set the gear icon, and then verifySource MapSelect.

(Press F12 and click the gear icon .)

 

Set Workspace

After this feature is enabled, we need to setWork ZoneIs the folder where our source code is located (or the script on our local server ).

Open from menuDeveloper Tools, Shortcut F12 or check any elements on the page, click set in the pop-up Setting Dialog Box in the lower right cornerGearIcon, clickWork ZoneOn the left-side panel, browse the folder where our source location is, and allow Chrome to request permission.

Now, our Chrome browser is mapped to the local folder correctly. Now, we can mount our page from the folder in the Chrome browser (note that we can use the browsing local IP address.

Let's say I have a name namedIndex.htmlHTML page,A JavaScript fileApp. js,AApp.cssCSS file,It looks like this

I have two items (why not? I like it's big), one of which has an ID, which will be used to display some text when the button is clicked. I put a button on the page, which will be connected to a click event. In my JavaScript function, my CSS simply changes the color and background color.

Edit JavaScript

Now, we canSourcesThe development tools in the tab access the source code from Chrome, and then find our JavaScript file on the panel.

If the folder I do not add is in the workspace, I will not be able to seeChromeDevFolder.

Sometimes the folder where I encountered a problem is displayed, but DevTools does not know which File to Map to, so I must right-click to do it. I want to Map the code and select Map to File System Resource (Map File System Resources ).

Then, I will select what I need in the list of matched file names.

So far, there has been nothing to do with the button. Let's directly add the function in DevTools.SayWhat. Once the code is edited, a small * label is displayed, and some modifications are made and are not saved.

Therefore, simply press Cmd + S or Ctrl + S to save the code. In this case, we do not need to reload our page or code. We click this button again and it will work. From my experience, even if we debug JavaScript works with very powerful functions, it is equally effective.

After that, we are happy to return to our local folder with all the changes, and we will be glad that the changes we made in DevTools continue to return to our source code.

Adjustment

Wait! If I want to retrieve some code and modify it, but the development tool overwrites my source code disk, what should I do?

No problem. DevTools helps us keep our code modified. Just, right-click the file we are processing and select Local Modifications (Local modification ).

Our change history will show and restore to a specific revision.

Although DevTools provides a convenient way for us to track changes, I still like to work in a copy, just in case.

These are just what DevTools can do a little bit. I'm sure the Chrome team will continue to add more functional tools.