在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
調(diào)試js代碼，每次都在要在代碼中寫debugger，或者在chrome中打斷點(diǎn)，而且chrome的斷點(diǎn)信息不人性化。偶然發(fā)現(xiàn)idea竟然有這個(gè)功能，簡直神器啊。研究了半天終于搞定了，哈哈，開心。下面是詳細(xì)步驟：
1.下載瀏覽器插件
在chrome應(yīng)用商店搜索"jetbrains ide support"插件，可能需要FQ（不會(huì)百度，老D google host），如下圖，這里是我安裝好的。這里我試過找下載好的插件，安裝但是沒有連接成功，總是提示錯(cuò)誤，下文會(huì)提到。所以別偷懶，老老實(shí)實(shí)下載。
安裝成功后如右上角會(huì)出現(xiàn)此圖標(biāo)
需要注意的是，不要找下載好的插件安裝，一是安裝后不起作用，二是chrome不信任未知來源的插件，重啟后會(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)訪問了
到此這篇關(guān)于在IDEA中Debug調(diào)試VUE前端項(xiàng)目的方法的文章就介紹到這了,更多相關(guān)idea調(diào)試vue項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 阿里云k8s集群使用ingress配置時(shí)間超時(shí)的參數(shù)
- idea快捷鍵生成getter和setter,有構(gòu)造參數(shù),無構(gòu)造參數(shù),重寫toString方式
- Idea設(shè)置spring boot應(yīng)用配置參數(shù)的兩種方式
- idea為java程序添加啟動(dòng)參數(shù)的問題解析(program?arguments，vm?arguments，Environment?variable)并在程序中獲取使用
- IntelliJ?IDEA設(shè)置JVM運(yùn)行參數(shù)的圖文介紹
- IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步
- idea 無法debug調(diào)試的解決方案
- Intellij IDEA Debug調(diào)試技巧(小結(jié))
- 你不知道的 IDEA Debug調(diào)試小技巧(小結(jié))
- k8s部署的java服務(wù)添加idea調(diào)試參數(shù)的方法
相關(guān)文章
vue3組件化開發(fā)之可復(fù)用性的應(yīng)用實(shí)例詳解
不斷把公共的、可以獨(dú)立拆分出來的抽出來作為一個(gè)獨(dú)立可復(fù)用的組件來向上提供調(diào)用,這樣讓我們的代碼更加方便組織和管理,并且擴(kuò)展性也更強(qiáng),下面這篇文章主要給大家介紹了關(guān)于vue3組件化開發(fā)之可復(fù)用性應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案
這篇文章主要介紹了vue router動(dòng)態(tài)路由下讓每個(gè)子路由都是獨(dú)立組件的解決方案,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
Vue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猇ue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
element UI 中的 el-tree 實(shí)現(xiàn) checkbox&n
在日常項(xiàng)目開發(fā)中，會(huì)經(jīng)常遇到，樹形結(jié)構(gòu)的查詢方式，為了快速方便開發(fā)，常常會(huì)使用到快捷的ui組件去快速搭樹形結(jié)構(gòu)，這里我用的是 element ui 中的 el-tree，對(duì)element UI 中的 el-tree 實(shí)現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧2022-09-09
vue watch偵聽器有無immediate的運(yùn)行順序問題
這篇文章主要介紹了vue watch偵聽器有無immediate的運(yùn)行順序問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue使用less報(bào)錯(cuò):Inline JavaScript is not ena
這篇文章主要介紹了vue使用less報(bào)錯(cuò):Inline JavaScript is not enabled問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例
這篇文章主要為大家介紹了Mixin混入分發(fā)Vue組件可復(fù)用功能基礎(chǔ)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-08-08
這篇文章主要介紹了vue-cli3中配置alias和打包加hash值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09