欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Webstorm調(diào)試Vue代碼詳細(xì)圖文教程

 更新時間：2024年05月03日 09:30:48   作者：riyue666  
WebStorm是一款優(yōu)秀的前端開發(fā)IDE,之前一直可以調(diào)試Vue項目,下面這篇文章主要給大家介紹了關(guān)于使用Webstorm調(diào)試Vue代碼的詳細(xì)圖文教程,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

在我們前端開發(fā)過程中相信很多人都是通過console.log來調(diào)試我們的代碼的，但是當(dāng)代碼復(fù)雜度比較高的時候這個方法就比較雞肋了。

這里我來教大家在Webstorm中如何來調(diào)試自己的代碼,當(dāng)然Webstom只是我常用的開發(fā)工具，用Vs code也是可以的。

1、點擊編輯創(chuàng)建配置項

2、名稱：怎么取都可以，這里我自己命名為PC；URL：填寫需要測試的項目運行起來的地址，我這里是本地的8080，可根據(jù)自己的情況修改，瀏覽器：選擇自己常用的即可。確保在加載腳本時檢測到斷點可開可不開。

3、運行需要調(diào)試的項目 一般是通過：npm run dev 或者npm run serve；成功運行后，會提示項目訪問URL，這個要和前文提到的配置項里面URL保持一致。

4、運行調(diào)試按住快捷鍵ALT+F5或者點擊這里開啟

5、調(diào)試項目，可以在自己需要調(diào)試的代碼之前 加上 debugger開啟斷點，但是測試完畢后記得移除

或者在webstorm點擊右邊代碼行數(shù)可開啟斷點

6、加上這些后可以ctrl+f5重新開啟調(diào)試或者繼續(xù)點擊這里

7、進(jìn)入你需要調(diào)試的代碼后頁面顯示如下

比較重要的就這三項，熟練使用后你的調(diào)試效率會快的飛起

附：解決 WebStorm 調(diào)試 Vue 定位不到源代碼

vue.config.js 中配置

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = "source-map";
    }
  },

總結(jié)

到此這篇關(guān)于使用Webstorm調(diào)試Vue代碼的文章就介紹到這了,更多相關(guān)Webstorm調(diào)試Vue代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論