Google Chrome modifies CSS and js and saves them to files simultaneously (translation)_html/css_WEB-ITnose

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

Text author: Konjac Ling.

Original English text: http://www.stephensaw.me/google-chrome-devtools-source-maps/

Google’s Chrome DevTools source map

Google’s Chrome DevTools are getting better and better, especially with their fast Blink and V8 performance, and they are making DevTools better. Recently I discovered that the correct way to edit source code is to use source-mapped Chrome DevTools.

Source Maps

To verify that source maps are turned on, go to the DevTools Settings gear icon and verify that the Source Maps option is selected.

(Press F12 and click the gear icon.)

Set up workspace

After enabling this feature, we need to set A workspace is the folder where our source code is located (or scripts on our local server).

Open Developer Tools from the menu, shortcut F12 or inspect any element on the page, click the settings gear icon in the lower right corner to pop up the settings dialog box, click on the left panel of the workspace, browse for folders There we have the source location and allow Chrome to ask for permission.

Now, our Chrome browser is mapped to the local folder correctly. Now we can load our page from the folder in Chrome (note we can use the browse local IP).

Let's say I have an HTML page called index.html, a JavaScript file called app.js, and a CSS file called app.css, and it looks like this

I have 2 items (why not, I like it big), one of them 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 and in my JavaScript function my CSS simply changes the color and background color.

Editing JavaScript

Now we can access the source code from Chrome by going to the Sources tab in the Developer Tools and then finding our JavaScript file from the panel.

If I don't add the folder in the workspace, I won't be able to see the ChromeDev folder over there.

Sometimes I have problems with the folder showing up, but DevTools doesn't know which file is mapped to, so I have to do it by right clicking on the code I want to map and selecting Map to File System Resource( file system resources).

After that, I will select the one I need from the list of matching file names.

So far the button there does nothing, let's add the function sayWhat directly inside DevTools. Once we edit the code, a small * tag will appear indicating that we made some changes and did not save them.

So, simply press Cmd S or Ctrl S to save the code. In this case, we don't need to reload our page, reload the code, we click the button again and it will work. From my experience, even when we debug JavaScript, it works very powerfully and it's just as effective.

After we are happy with all the changes, back to our local folder, we will be happy with the changes we made in DevTools persisting back to our source code.

Adjustment

Wait a minute! What if I want to get back some code that I modified, but the development tools overwrite my source code?

No problem, DevTools helps us keep our code subject to modifications. Just right-click the file we're working on and select Local Modifications.

Our change history will be displayed with the ability to revert to a specific revision.

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

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

Tags: chrome, devtools, javascript, source maps