IDEA中Debug調試VUE前端項目調試JS只需兩步
前言
有一個禮拜沒發(fā)quarku+graalvm相關的內(nèi)容了，因為博主在忙一個新的前端項目去了，從element-ui切換到antdv,也有很多新的東西需要一邊啃文檔一邊輸出，程序出現(xiàn)bug自是在所難免的，所以需要開發(fā)工具可以非常方便的debug程序。
在java開發(fā)中，debug就是一個debug啟動按鈕解決的事情，而在前端開發(fā)中，IDEA這個開發(fā)工具也提供了非常好用的jsdebug工具，博主的這個用法不是網(wǎng)上介紹的那種需要安裝插件才能用的方式，免安裝瀏覽器插件可以直接用，只需兩步。
第一步，找到jsdebug運行時
在Run/Debug Configurations中，找到JavaScript Debug運行時，新建一個JavaScript Debug運行項，界面如下圖所示：
序號1、輸入jsdebug啟動項目的名稱
序號2、復制前端項目瀏覽地址到這里
這里需要說明下，jsdebug并不是幫你啟動了一個前端項目，前端項目該怎么啟動還怎么啟動
序號3、選擇一個你本地安裝好的瀏覽器，我這里選擇的就是360極速瀏覽器
第二步、打斷點、運行jsdubg項
給需要的代碼打上斷點，運行剛剛第一步創(chuàng)建好的jsdebg項，IDEA會幫你在新的瀏覽器窗口里打開剛剛設置的URL地址，現(xiàn)在你可以在這個新打開的窗口里操作，當遇到你打斷點的代碼，IDEA的斷點就會激活，這個時候就可以愉快的Debug起來了，效果如下圖：
結語
IDEA的這個前端調試工具非常好用，卻沒有得到很好的普及，網(wǎng)上搜到的那種方式大多是安裝一個IDEA的瀏覽器插件配合使用，相比來說，博主發(fā)現(xiàn)的這個調試工具簡直太好用了，而且注意哦，此法不僅可以調試VUE的項目，而是適合所有的前端項目
以上就是IDEA中Debug調試VUE前端項目調試JS只需兩步的詳細內(nèi)容，更多關于Debug前端VUE項目調試JS的資料請關注腳本之家其它相關文章！
相關文章
本文主要介紹了vue-cli5關于yarn的一個小坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
在Vue3中使用CSS Modules實現(xiàn)樣式隔離
隨著構建現(xiàn)代前端應用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應運而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法
本篇文章主要介紹了vue-cli開發(fā)環(huán)境實現(xiàn)跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue子組件中使用window.onresize()只執(zhí)行一次問題
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vuex的官方解釋是一個專為vue.js應用程序開發(fā)的狀態(tài)管理模式，這篇文章主要為大家介紹了Vuex的具體用法，希望對大家深入了解Vuex有一定的幫助2023-06-06
根據(jù)Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案,需要的朋友可以參考下2022-12-12
Win11&Win10配置vue開發(fā)環(huán)境詳細圖文教程
目前前端三大框架(vue、react、angular)中vue是前端工程師經(jīng)常使用的,在使用之前需要搭建vue開發(fā)環(huán)境,這篇文章主要給大家介紹了關于Win11&Win10配置vue開發(fā)環(huán)境的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue3（vite）設置代理封裝axios api解耦,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue調取電腦攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06