IDEA中Debug調(diào)試VUE前端項目調(diào)試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的這個前端調(diào)試工具非常好用,卻沒有得到很好的普及,網(wǎng)上搜到的那種方式大多是安裝一個IDEA的瀏覽器插件配合使用,相比來說,博主發(fā)現(xiàn)的這個調(diào)試工具簡直太好用了,而且注意哦,此法不僅可以調(diào)試VUE的項目,而是適合所有的前端項目
以上就是IDEA中Debug調(diào)試VUE前端項目調(diào)試JS只需兩步的詳細內(nèi)容,更多關于Debug前端VUE項目調(diào)試JS的資料請關注腳本之家其它相關文章!
相關文章
vue-router實現(xiàn)tab標簽頁(單頁面)詳解
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)tab標簽頁的相關方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個響應式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-105個可以加速開發(fā)的VueUse函數(shù)庫(小結)
VueUse為Vue開發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實用程序函數(shù)。具有一定的參考價值,感興趣的可以了解一下2021-11-11vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue中選項卡點擊切換且能滑動切換功能的實現(xiàn)代碼
本文通過實例代碼給大家介紹了vue中選項卡點擊切換且能滑動切換功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下2018-11-11