在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
調(diào)試js代碼,每次都在要在代碼中寫debugger,或者在chrome中打斷點(diǎn),而且chrome的斷點(diǎn)信息不人性化。偶然發(fā)現(xiàn)idea竟然有這個(gè)功能,簡(jiǎn)直神器啊。研究了半天終于搞定了,哈哈,開心。下面是詳細(xì)步驟:
1.下載瀏覽器插件
在chrome應(yīng)用商店搜索"jetbrains ide support"插件,可能需要FQ(不會(huì)百度,老D google host),如下圖,這里是我安裝好的。這里我試過(guò)找下載好的插件,安裝但是沒(méi)有連接成功,總是提示錯(cuò)誤,下文會(huì)提到。所以別偷懶,老老實(shí)實(shí)下載。
安裝成功后如右上角會(huì)出現(xiàn)此圖標(biāo)
需要注意的是,不要找下載好的插件安裝,一是安裝后不起作用,二是chrome不信任未知來(lái)源的插件,重啟后會(huì)自動(dòng)停用插件。如果不能在線安裝的話,還有一個(gè)辦法:將下載后的插件后綴名改為rar,解壓縮到文件夾里,使用瀏覽器的插件開發(fā)者模式,將文件夾加載為插件,也可安裝。
還有在插件圖標(biāo)上右鍵,選項(xiàng),如下圖,可以配置端口,這里要和idea里的一致才行;
2.配置IDEA
idea中配置如下
這兩步配置好以后,運(yùn)行剛創(chuàng)建的JavaScript Debug 就可以debug啟動(dòng),打斷點(diǎn)訪問(wèn)了
到此這篇關(guān)于在IDEA中Debug調(diào)試VUE前端項(xiàng)目的方法的文章就介紹到這了,更多相關(guān)idea調(diào)試vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 阿里云k8s集群使用ingress配置時(shí)間超時(shí)的參數(shù)
- idea快捷鍵生成getter和setter,有構(gòu)造參數(shù),無(wú)構(gòu)造參數(shù),重寫toString方式
- Idea設(shè)置spring boot應(yīng)用配置參數(shù)的兩種方式
- idea為java程序添加啟動(dòng)參數(shù)的問(wèn)題解析(program?arguments,vm?arguments,Environment?variable)并在程序中獲取使用
- IntelliJ?IDEA設(shè)置JVM運(yùn)行參數(shù)的圖文介紹
- IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步
- idea 無(wú)法debug調(diào)試的解決方案
- Intellij IDEA Debug調(diào)試技巧(小結(jié))
- 你不知道的 IDEA Debug調(diào)試小技巧(小結(jié))
- k8s部署的java服務(wù)添加idea調(diào)試參數(shù)的方法
相關(guān)文章
echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑的操作代碼
這篇文章主要介紹了vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑,需要我們創(chuàng)建一個(gè)靜態(tài)資源里的外部文件來(lái)實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼
Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋,本文就詳細(xì)的介紹一下Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2022-04-04Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式
這篇文章主要介紹了Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09