淺談vue+webpack項(xiàng)目調(diào)試方法步驟
題外話:這幾個(gè)月用vue寫(xiě)了三個(gè)項(xiàng)目了,從絆手絆腳開(kāi)始慢慢熟悉,嬸嬸的感到語(yǔ)言這東西還是得有點(diǎn)框框架架,太自由了容易亂搞,特別人多的時(shí)候。
從webpack開(kāi)始
直接進(jìn)入正題。有人覺(jué)得vue項(xiàng)目難調(diào)試,是因?yàn)橛昧藈ebpack。所有代碼揉在了一起,還加了很多框架代碼,根本不知道怎么下手。所以vue+webpack調(diào)試要從webpack入手。我們先從一般情況開(kāi)始說(shuō)。
-sourcemap
webpack配置提供了devtool這個(gè)選項(xiàng),如果設(shè)置為 ‘#source-map',則可以生成.map文件,在chrome瀏覽器中調(diào)試的時(shí)候可以顯示源代碼。
devtool: '#source-map'
然而這個(gè)設(shè)置實(shí)際上沒(méi)這么簡(jiǎn)單。webpack官方給出了7個(gè)配置項(xiàng)供選擇: 戳這里
這里不同的配置有些不同的效果,比如是否保留注釋、保留行信息等,具體每一條什么意思這里不詳解釋,有興趣的童鞋可以參考這篇文章
官方默認(rèn)的是用 ‘#cheap-module-eval-source-map'
devtool: '#cheap-module-eval-source-map'
設(shè)置好之后,在vue項(xiàng)目調(diào)試的時(shí)候,代碼里面標(biāo)注debugger的時(shí)候就能看到對(duì)應(yīng)的代碼了,非常方便。
或者,直接找到對(duì)應(yīng)的文件。在chrome用 'ctrl(command) + p‘,輸入文件名,可以找到對(duì)應(yīng)的源代碼。
打斷點(diǎn):
需要注意的是,這里斷點(diǎn)會(huì)打在下一行。同時(shí)一行代碼運(yùn)行在它的下一行才算執(zhí)行。
-vue-cli
vue家的項(xiàng)目腳手架,推薦使用。vue-cli老家在這里
vue-cli可以幫我們自動(dòng)搭建項(xiàng)目,首先npm全局安裝
npm install -g vue-cli
然后創(chuàng)建一個(gè)新的項(xiàng)目
vue init webpack my-project
一路回車(chē),搞定。(更多配置項(xiàng)請(qǐng)參考上面給出的vue-cli鏈接)
這里從網(wǎng)上下載了一個(gè)帶webpack的vue項(xiàng)目(跑之前記得npm install一下)
從bulid文件夾里面就大概能看出:
- webpack.dev.conf: 開(kāi)發(fā)模式用
- webpack.prod.conf: 生產(chǎn)模式用
其中,開(kāi)發(fā)模式提供了devtool為'#cheap-module-eval-source-map',生產(chǎn)模式根據(jù)config文件夾下的productionSourceMap變量控制是否使用。
若為true,則devtool為'#source-map'
其他使用方法一致。非常方便。
線上調(diào)試
平時(shí)開(kāi)發(fā)的時(shí)候,我們用webpack的熱加載,可以省去掛載調(diào)試的步驟,非常方便。但是發(fā)布后部署到服務(wù)器上,就失去了這個(gè)本地優(yōu)勢(shì)。
如果使用掛載文件方式會(huì)比較麻煩。由于webpack打出來(lái)的文件有版本號(hào)這些信息,而且發(fā)布一個(gè)包看代碼量可能需要等待不等,這個(gè)方案不實(shí)際。但是如果掛載的是熱加載到端口下的文件的話,這個(gè)問(wèn)題就很好辦了。
-熱加載
在此之前,先來(lái)分析一下webpack的熱加載原理。
對(duì)項(xiàng)目抓包可以發(fā)現(xiàn)這么一個(gè)文件:__webpack_hmr
這是webpack熱加載的服務(wù)器推送事件,eventsource類(lèi)型,功能和websocket有點(diǎn)類(lèi)似。大致作用是建立一個(gè)不會(huì)停止的stream流鏈接,服務(wù)器發(fā)送更新數(shù)據(jù)回來(lái)append到流的末端,前端讀取最新append的數(shù)據(jù),然后動(dòng)態(tài)的更新頁(yè)面上的東西。
接下來(lái)我們觀察下上文提到的更新數(shù)據(jù)有哪些。隨便更新一個(gè)文件,觸發(fā)熱加載,再抓個(gè)包,發(fā)現(xiàn)有兩個(gè).hot-update.json和一個(gè).hot-update.js文件
這些具體做了些啥我不知道,這里就不深究了。應(yīng)該是根據(jù)json里面的數(shù)據(jù),達(dá)到一個(gè)準(zhǔn)確更新的效果。
所以熱更新其實(shí)就是監(jiān)聽(tīng)服務(wù)器上的數(shù)據(jù),有修改的話服務(wù)器發(fā)送數(shù)據(jù)過(guò)來(lái),前端把數(shù)據(jù)拿來(lái)后替換到頁(yè)面上這么一個(gè)過(guò)程。
-AutoResponder
接下來(lái)談?wù)劸€上掛載測(cè)試,這里推薦一款軟件:fiddler
fiddler有一個(gè)功能叫做AutoResponder,它可以將一個(gè)地址指向另一個(gè)地址。之所以用這個(gè)軟件,是因?yàn)樗芷ヅ湔齽t,非常方便。
上一節(jié)說(shuō)到,webpack熱加載用到了這幾類(lèi)文件
- __webpack_hmr
- xxxxxxxxxxx.hot-update.json
- xxxxxxxxxxx.hot-update.js
和.html以及其他.js文件一起,我們就可以把這幾個(gè)類(lèi)型的文件掛載上去,達(dá)到一個(gè)遠(yuǎn)程熱更新的效果,設(shè)置如下:
假設(shè):
線上地址:http://192.168.9.189
本地服務(wù)器地址:http://localhost:8080/
為了照顧到接口,不能用*全匹配(上圖fiddler里最后一條灰色的)
request matches | respond with |
---|---|
EXACT:http://192.168.9.189/index.html | http://localhost:8080/ |
EXACT:http://192.168.9.189/__webpack_hmr | http://localhost:8080/__webpack_hmr |
regex:http://192.168.9.189/([^.]+).js$ | http://localhost:8080/$1.js |
regex:http://192.168.9.189/(.+).hot-update.json$ | http://localhost:8080/$1.hot-update.json |
regex:http://192.168.9.189/(.+).hot-update.js$ | http://localhost:8080/$1.hot-update.js |
打開(kāi)debugger就能發(fā)現(xiàn)vue的devtools出來(lái)了
wap端-技巧分享
手機(jī)上調(diào)試也沒(méi)那么麻煩。和電腦一樣在同一個(gè)局域網(wǎng)下,輸入地址就能看到效果了。最近在做一個(gè)wap端的vue項(xiàng)目,這里談?wù)勔恍┳约河玫降囊恍┬〖记伞?/p>
- iphone可以用safari來(lái)檢查元素;android可以用chrome遠(yuǎn)程調(diào)試
- wifi下的http代理可以轉(zhuǎn)發(fā)手機(jī)的網(wǎng)絡(luò)請(qǐng)求,掛到本機(jī)上可以抓包數(shù)據(jù)
手機(jī)加載慢的時(shí)候,同樣可以使用http代理轉(zhuǎn)發(fā)到主機(jī)上,再訪問(wèn)速度就比較快了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 通過(guò)實(shí)例解析vuejs如何實(shí)現(xiàn)調(diào)試代碼
- Vue3.x源碼調(diào)試的實(shí)現(xiàn)方法
- Vue程序調(diào)試的方法
- vue調(diào)試工具vue-devtools安裝及使用方法
- webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
- 淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
- Vue調(diào)試神器vue-devtools安裝方法
- Vue DevTools調(diào)試工具的使用
- 如何使用Webstorm和Chrome來(lái)調(diào)試Vue項(xiàng)目
相關(guān)文章
vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式
這篇文章主要介紹了vite+vue3代碼風(fēng)格校驗(yàn)及格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue.js?element-plus使用圖標(biāo)不顯示問(wèn)題的解決方式
近期在學(xué)習(xí)Vue時(shí)用elementUI時(shí)發(fā)現(xiàn)圖標(biāo)在頁(yè)面上顯示不出來(lái),所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標(biāo)不顯示問(wèn)題的解決方式,需要的朋友可以參考下2022-09-09使用Vant如何實(shí)現(xiàn)數(shù)據(jù)分頁(yè),下拉加載
這篇文章主要介紹了使用Vant實(shí)現(xiàn)數(shù)據(jù)分頁(yè)及下拉加載方式。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue?ElementUI級(jí)聯(lián)選擇器回顯問(wèn)題解決
這篇文章主要介紹了vue?ElementUI級(jí)聯(lián)選擇器回顯問(wèn)題解決,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue3接口數(shù)據(jù)賦值對(duì)象,渲染報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09VUE配置proxy代理的開(kāi)發(fā)測(cè)試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟
最近想實(shí)現(xiàn)個(gè)項(xiàng)目,需要配置全局less,本文主要介紹了vite項(xiàng)目配置less全局樣式的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04