Style script localization development method ① [front-end development skills], development methods development skills

Style script localization development method ① [front-end development skills], development methods development skills

Do you often need to modify css and js Code during front-end development?

When debugging code. Is the code repository constantly modified? How many operations are performed on the same script style file? Various cache cleanup operations are required for mobile debugging ......

These problems will cause various inconveniences for front-end development. Therefore, a local development method is required: Modify the debugging code locally, and then run the test on PC or mobile. In this way, debugging code is much simpler and easier. This helps improve work efficiency. (Why is it selective? For example, the method described below. This method is also limited. For example, if you access the page from an ip address outside the local area network, you cannot load styles and scripts, unless your local server supports Wan. Therefore, after local debugging, you must upload the code to the server. Therefore, this method is generally only applicable to new requirements. New Code is suitable for this method, and the old requirements code is modified, it is not easy to use locally .)

 

Here are two methods: one is to use a local server, and the other is to use youdao cloud notes. The second method will be discussed in the next section.

 

Now let's talk about how to use this style script to localize the front-end code.

1. Download the local server (a common php server is provided here)

: Http://pan.baidu.com/s/1qXDljgK (du Niang disk)

Installation: you can install it on any disk you like.

After the installation is complete, three shortcuts will appear on the desktop:

The PHP server is a server startup program.

Phpwww is the front-end file storage space (here we can store the css js files to be debugged)

Mysqldata is the mysql local database space (we don't need it here)

2. Create a local LAN server

Start the PHP server first.

1. Here we choose to disable

2. Click here to start

 

3. Generally, we recommend that you use the third "Start & access" link to create a local LAN server. Currently, the home page is automatically opened as the home page of the local server.

In other words, index. php In the phpwww directory is the home page of the current server.

For example, my current address is: http: // 192.168.0.101: 50080/

3. Create a LAN linear style script file

Create a directory in the phpwww directory, such as js

Enter the js directory to create a js file, such as new. js.

Then save the code.

The absolute path of the current script is: http: // 192.168.0.101: 50080/js/new. js

4. Introduce the local debugging style script file in the Network Project

Here we will try to introduce this local script

Add code to the proper location on your server page:

<script src="http://192.168.0.101:50080/js/new.js"></script>

Page code:

When you execute the network page you set up. The browser will load the file you just added

Execution result:

List of documents loaded by the browser

5. debug the style script

If you think there is a problem with the style script, you can directly change it in the local file. After the change, press Ctrl + S to save it. Refresh the page.

Note: If you want to debug resources on the mobile terminal. Your computer uses a Wi-Fi network, and your mobile phone is connected to the same network. The Code debugging on the mobile phone is also very simple.