朋友們，是不是在進(jìn)行前端開發(fā)的時候經(jīng)常需要修改css和js代碼呢？

調(diào)試代碼時。代碼存儲庫不斷被修改？同一個腳本樣式文件n多人操作？移動端調(diào)試時需要各種清理緩存……

這些問題將會帶來各種各樣對前端開發(fā)的不便。因此需要有一種本地化開發(fā)的方法：本地直接進(jìn)行修改調(diào)試代碼，然后直接在PC端或移動端測試運行。如此這般，那調(diào)試代碼就簡單快捷多了。有助于“選擇性的”提高工作效率哦。（為什么是有選擇性呢？比如下面說的方法。因為這個方法肯定也是有局限性的。比如：非該局域網(wǎng)下的ip訪問該頁面便加載不了樣式與腳本，除非你的本地服務(wù)器是支持廣域網(wǎng)的。所以你在本地調(diào)試完之后肯定還是要上傳到服務(wù)器上去的，因此一般只新的需求，新的代碼比較適合使用此方法，老的需求代碼都是修改的，就不好使用本地話修改了。）

 

這里說下2種方法：一種是利用本地服務(wù)器，而另一種是利用有道云筆記。下期講第二種方法。

 

好，現(xiàn)在我們就來說說如何使用這種樣式腳本本地化來調(diào)試前端代碼吧。

1.下載本地服務(wù)器（這里提供一個個人常用的php服務(wù)器）

下載地址：http://pan.baidu.com/s/1qXDljgK （度娘盤）

安裝：隨你喜歡安裝在哪個盤都行。

安裝完成后，桌面會出現(xiàn)3個快捷方式：

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

PHP服務(wù)器 是服務(wù)器啟動程序

phpwww 是前端文件存儲空間（這里我們用來存儲需要調(diào)試的css js文件就行）

mysqldata 是mysql本地數(shù)據(jù)庫空間（這里我們就不用它了）

2.創(chuàng)建局域網(wǎng)本地服務(wù)器

首先我們啟動PHP服務(wù)器吧。

1.這里我們選擇關(guān)閉

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

2.這里我們點擊開始

 seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

3.一般推薦使用第三個“開始&訪問”的鏈接，這時便創(chuàng)建了一個本地的局域網(wǎng)服務(wù)器了。當(dāng)前自動打開的主頁就是剛剛搭建起來的本地服務(wù)器主頁。

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

也就是說phpwww目錄中的index.php，就是當(dāng)前服務(wù)器的主頁。

比如：我現(xiàn)在的地址就是：http://192.168.0.101:50080/

3.創(chuàng)建局域網(wǎng)直鏈樣式腳本文件

在phpwww目錄中創(chuàng)建一個目錄，如js 

進(jìn)入js目錄創(chuàng)建一個js文件，如new.js

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

然后保存代碼。

那么當(dāng)前腳本的絕對路徑地址便是：http://192.168.0.101:50080/js/new.js

4.在網(wǎng)絡(luò)項目中引入本地的調(diào)試樣式腳本文件

這里我們就試試引入這個本地腳本

在你的服務(wù)器頁面中的適當(dāng)位置加入代碼：

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

頁面的代碼：

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

當(dāng)你執(zhí)行你搭建的網(wǎng)絡(luò)頁面時。瀏覽器便會載入你剛剛加入的這個文件

執(zhí)行效果：

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

瀏覽器載入的文檔列表

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

5.調(diào)試樣式腳本

如果你覺得樣式腳本有問題，那你可以直接在本地的該文件中直接改，改完后直接Ctrl+S保存。然后刷新頁面即可

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營銷培訓(xùn)

注：該服務(wù)器中的資源如果想在移動端調(diào)試的。需要是你的電腦用的是wifi網(wǎng)絡(luò)，然后你手機也連接同一個網(wǎng)絡(luò)。那么手機上調(diào)試代碼也是很簡單的了。