IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步
前言
有一個(gè)禮拜沒發(fā)quarku+graalvm相關(guān)的內(nèi)容了，因?yàn)椴┲髟诿σ粋€(gè)新的前端項(xiàng)目去了，從element-ui切換到antdv,也有很多新的東西需要一邊啃文檔一邊輸出，程序出現(xiàn)bug自是在所難免的，所以需要開發(fā)工具可以非常方便的debug程序。
在java開發(fā)中，debug就是一個(gè)debug啟動(dòng)按鈕解決的事情，而在前端開發(fā)中，IDEA這個(gè)開發(fā)工具也提供了非常好用的jsdebug工具，博主的這個(gè)用法不是網(wǎng)上介紹的那種需要安裝插件才能用的方式，免安裝瀏覽器插件可以直接用，只需兩步。
第一步，找到j(luò)sdebug運(yùn)行時(shí)
在Run/Debug Configurations中，找到JavaScript Debug運(yùn)行時(shí)，新建一個(gè)JavaScript Debug運(yùn)行項(xiàng)，界面如下圖所示：
序號1、輸入jsdebug啟動(dòng)項(xiàng)目的名稱
序號2、復(fù)制前端項(xiàng)目瀏覽地址到這里
這里需要說明下，jsdebug并不是幫你啟動(dòng)了一個(gè)前端項(xiàng)目，前端項(xiàng)目該怎么啟動(dòng)還怎么啟動(dòng)
序號3、選擇一個(gè)你本地安裝好的瀏覽器，我這里選擇的就是360極速瀏覽器
第二步、打斷點(diǎn)、運(yùn)行jsdubg項(xiàng)
給需要的代碼打上斷點(diǎn)，運(yùn)行剛剛第一步創(chuàng)建好的jsdebg項(xiàng)，IDEA會(huì)幫你在新的瀏覽器窗口里打開剛剛設(shè)置的URL地址，現(xiàn)在你可以在這個(gè)新打開的窗口里操作，當(dāng)遇到你打斷點(diǎn)的代碼，IDEA的斷點(diǎn)就會(huì)激活，這個(gè)時(shí)候就可以愉快的Debug起來了，效果如下圖：
結(jié)語
IDEA的這個(gè)前端調(diào)試工具非常好用，卻沒有得到很好的普及，網(wǎng)上搜到的那種方式大多是安裝一個(gè)IDEA的瀏覽器插件配合使用，相比來說，博主發(fā)現(xiàn)的這個(gè)調(diào)試工具簡直太好用了，而且注意哦，此法不僅可以調(diào)試VUE的項(xiàng)目，而是適合所有的前端項(xiàng)目
以上就是IDEA中Debug調(diào)試VUE前端項(xiàng)目調(diào)試JS只需兩步的詳細(xì)內(nèi)容，更多關(guān)于Debug前端VUE項(xiàng)目調(diào)試JS的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐
在項(xiàng)目開發(fā)中，我們經(jīng)常會(huì)遇到表單保存的功能，本文主要介紹了v-for中動(dòng)態(tài)校驗(yàn)el-form表單項(xiàng)的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05
這篇文章主要介紹了uni-app 的生命周期，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue項(xiàng)目中使用flow做類型檢測的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue-router實(shí)現(xiàn)tab標(biāo)簽頁（單頁面）詳解
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)tab標(biāo)簽頁的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
5個(gè)可以加速開發(fā)的VueUse函數(shù)庫(小結(jié))
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實(shí)用程序函數(shù)。具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js搭建移動(dòng)端購物車界面，重點(diǎn)介紹基本結(jié)構(gòu)和數(shù)據(jù)渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue--Router動(dòng)態(tài)路由的用法示例詳解
這篇文章主要介紹了Vue--Router動(dòng)態(tài)路由的用法,很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件，在?Vue?Router?中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來實(shí)現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動(dòng)態(tài)路由相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了vue中選項(xiàng)卡點(diǎn)擊切換且能滑動(dòng)切換功能，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下2018-11-11