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

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

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

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

1、調試vue 開發(fā)環(huán)境需要打開 source-map 方便調試 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、調試 node 環(huán)境下某個 js 文件

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

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/106548.html

利用vscode調試nodejs代碼實踐總結

摘要：支持，和三種環(huán)境，并且可以安裝擴展插件，因而可以滿足絕大多數(shù)人的要求，安裝配置非本文所要講述的內容，請自行查找，本文著重討論如何用更好的調試代碼，希望能對大家有所幫助。 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 擴展之二！

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

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

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

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

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

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

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

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