vscode 調(diào)試幫助你快遞開發(fā)

Jinkey 發(fā)布于2019-08-26 10:39 / 1899人閱讀

摘要：前端不只是只能在瀏覽器調(diào)試，現(xiàn)在越來越多單頁面，在編輯器里面進(jìn)行調(diào)試將大大提高你的開發(fā)效率調(diào)試開發(fā)環(huán)境需要打開方便調(diào)試為根路徑在中配置為你啟動項目的端口然后按就會啟動一個的頁面在編輯器里就可以打斷點了調(diào)試環(huán)境下某個文件此為數(shù)組可以寫多個調(diào)

前端不只是只能在瀏覽器調(diào)試，現(xiàn)在越來越多單頁面，在編輯器里面進(jìn)行調(diào)試將大大提高你的開發(fā)效率~~

1、調(diào)試vue 開發(fā)環(huán)境需要打開 source-map 方便調(diào)試 workspaceRoot 為根路徑

在 launch.json 中配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8087",  // 8087 為你啟動vue項目的端口
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
  ]
}

然后按 F5 就會啟動一個google 的頁面在編輯器里就可以打斷點了

2、調(diào)試 node 環(huán)境下某個 js 文件

{
  "version": "0.2.0",
  "configurations": [
    // 此為數(shù)組可以寫多個
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/build/creat.js"  
    },
  ]
}

3、調(diào)試 node 后臺項目注意：自己寫node時候一般是 node ./bin/www 啟動一個服務(wù)，調(diào)試時候不需要啟動直接按 F5 啟動調(diào)試即可(會自動啟動服務(wù)) 否則會導(dǎo)致端口沖突調(diào)試失敗

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}inwww"
    }
  ]
}

GPU云服務(wù)器云服務(wù)器幫助你快遞api接口開發(fā) php開發(fā)幫助文檔一個教你開發(fā)小程序的小程序

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106548.html

相關(guān)文章

利用vscode調(diào)試nodejs代碼實踐總結(jié)

摘要：支持，和三種環(huán)境，并且可以安裝擴(kuò)展插件，因而可以滿足絕大多數(shù)人的要求，安裝配置非本文所要講述的內(nèi)容，請自行查找，本文著重討論如何用更好的調(diào)試代碼，希望能對大家有所幫助。 2018.5.12更新最近在用vscode 1.23版本的時候發(fā)現(xiàn)outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開sourceMaps，同時在babel編譯的時候自己搞--watc...

chenatu 2019-08-21 17:42 評論0 收藏0
提高 JavaScript 開發(fā)效率的高級 VSCode 擴(kuò)展之二！

摘要：將這些命令綁定到鍵盤快捷鍵是有幫助的，例如向上箭頭用于平衡向外，而向下箭頭用于平衡向內(nèi)。是和的快速原型開發(fā)平臺。本系列的第一篇可以在這里看到：提高 JavaScript 開發(fā)效率的高級 VSCode 擴(kuò)展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)...

cyrils 2019-08-23 14:48 評論0 收藏0
VS Code上手與超實用插件安利

摘要：軟件跨平臺支持以及，運(yùn)行流暢，可謂是微軟的良心之作微軟有這個宇宙最強(qiáng)，自然也不會弱宇宙最強(qiáng)編輯器說到代碼編輯器，我們有必要提一提還有。原文鏈接：VS Code上手與超實用插件安利工欲善其事必先利其器 Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號...

miracledan 2019-08-21 17:46 評論0 收藏0
用webpack寫個現(xiàn)代的JavaScript包

摘要：這里我們可以嘗試運(yùn)行一下命令嘗試能否構(gòu)建成功，成功的情況下在目錄下會生成的文件。在添加調(diào)試代碼打開調(diào)試面板在下拉選項中選擇添加配置或者直接創(chuàng)建并打開文件使用了解相關(guān)屬性。 webpack 作為目前主流的構(gòu)建工具，其較快的版本迭代和復(fù)雜的配置方式，使得每次開發(fā)前不得不規(guī)劃相當(dāng)部分時間來調(diào)試。這里將記錄整個環(huán)境的搭建過程，為新手提供基礎(chǔ)思路。就像我在開發(fā)vue-sitemap時一樣，構(gòu)建...

yhaolpz 2019-08-23 13:42 評論0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應(yīng)標(biāo)記，目前已經(jīng)內(nèi)置，所以不用配置了。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網(wǎng)等眾多品牌企業(yè)。摘要：你所不知道的系列。原文：提高 JavaScript 開發(fā)效率的高級 VSCode 擴(kuò)展之二！作者：前端小智 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。作為一名業(yè)余愛好者、專業(yè)人員，甚至是每月只有一次編...

Near_Li 2019-05-22 12:00 評論0 收藏0