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)文章
淺談vue-cli5關(guān)于yarn的一個(gè)小坑
本文主要介紹了vue-cli5關(guān)于yarn的一個(gè)小坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實(shí)現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
vue-cli開發(fā)環(huán)境實(shí)現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實(shí)現(xiàn)跨域請求的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vue子組件中使用window.onresize()只執(zhí)行一次問題
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vuex的官方解釋是一個(gè)專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要為大家介紹了Vuex的具體用法，希望對大家深入了解Vuex有一定的幫助2023-06-06
vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案,需要的朋友可以參考下2022-12-12
Win11&Win10配置vue開發(fā)環(huán)境詳細(xì)圖文教程
目前前端三大框架(vue、react、angular)中vue是前端工程師經(jīng)常使用的,在使用之前需要搭建vue開發(fā)環(huán)境,這篇文章主要給大家介紹了關(guān)于Win11&Win10配置vue開發(fā)環(huán)境的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue3(vite)設(shè)置代理封裝axios api解耦功能
這篇文章主要介紹了vue3（vite）設(shè)置代理封裝axios api解耦,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3?使用v-model實(shí)現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實(shí)現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06