做項(xiàng)目過(guò)程難免會(huì)碰到一些bug、樣式等各種各樣的問(wèn)題。下面就寫(xiě)一些個(gè)人在碰到問(wèn)題時(shí)的解決思路。

　　也許你已經(jīng)熟練掌握，那讓我們一起來(lái)溫習(xí)，也許你初入前端尚不知如何調(diào)試，希望能給你幫助。

如下解決方法，均以Chrome瀏覽器為例。

1、頁(yè)面樣式問(wèn)題

　　如果要對(duì)面頁(yè)面樣式進(jìn)行微調(diào)，打開(kāi)瀏覽器的開(kāi)發(fā)者工具，選中需要調(diào)整的模塊，調(diào)出想要的樣式，記錄下數(shù)據(jù)，對(duì)代碼修改即可。

2、js bug

　　在出現(xiàn)bug的js部分，使用console.log調(diào)試。當(dāng)不確定具體位置或js解析順序時(shí)，可在代碼的不同位置添加console，在根據(jù)打印出的內(nèi)容，判斷bug位置或得出函數(shù)的解析順序。

3、非 js bug

　　如果是前端代碼的問(wèn)題，因?yàn)橐恍┢婀值脑驔](méi)找到問(wèn)題源頭（比如一個(gè)字母寫(xiě)錯(cuò)了），那么將HTML的代碼全部注釋掉，然后一點(diǎn)一點(diǎn)放出，測(cè)試有無(wú)bug，直至找出問(wèn)題原因。

4、數(shù)據(jù)展示bug

　　有時(shí)候頁(yè)面出現(xiàn)數(shù)據(jù)無(wú)法展示問(wèn)題，或者展示的數(shù)據(jù)跟預(yù)期不一樣，當(dāng)你。只需在瀏覽器上輸入 后臺(tái)給的接口 + 要傳的參數(shù)，看返回出的內(nèi)容，即可判斷出是后臺(tái)接口問(wèn)題，還是前端出錯(cuò)了。

5、form表單慎用button

　　form表單內(nèi)部慎用button按鈕，這可能導(dǎo)致提交、click事件點(diǎn)擊時(shí)出現(xiàn)bug。

6、Chrome奇怪的緩存機(jī)制

　　當(dāng)你感覺(jué)代碼沒(méi)有問(wèn)題但瀏覽器顯示就是不對(duì)，此時(shí)你可以先嘗試清理一下瀏覽器緩存，沒(méi)準(zhǔn)你需要的效果就出來(lái)了，如果還是不對(duì)，就在嘗試其他的方法吧。（CSS和JS都會(huì)出現(xiàn)緩存問(wèn)題）；

7、js邏輯問(wèn)題

　　先根據(jù)個(gè)人經(jīng)驗(yàn)判斷問(wèn)題所在，之后在嘗試Chrome的斷點(diǎn)調(diào)試，另起一章。待續(xù)。。

轉(zhuǎn)載于:https://www.cnblogs.com/intangible/p/6734871.html

總結(jié)

以上是生活随笔為你收集整理的前端入门--解决问题的一些方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。