搜尋
首頁開發工具VSCodevscode debug怎麼用
vscode debug怎麼用Nov 07, 2019 pm 02:38 PM
debugvscode

vscode debug怎麼用

Visual Studio Code(以下簡稱vscode)是一個很強大的編輯器,相對而言比較輕量。 vscode支援windows,OS X和Linux三種環境,並且可以安裝擴充插件,因而可以滿足絕大多數人的要求,以下介紹vscode如何使用debug功能,以node程式碼為例,希望能對大家有所幫助。

vscode介面

vscode debug怎麼用

#左上角依序是專案目錄,搜索,版本管理git相關(​​左下角為目前分支),調試,其他擴充插件,其他的均為中文標註,不解釋,都是咱們必要的,這幾個如果沒有的建議調出來這都是調試很必要的幾個東西,可以去到菜單欄的查看中逐一調出

調試前置條件:launch.json配置

#點擊圖中左數第四個按鈕,也就是調試,然後點擊圖中紅框即可開啟launch.json

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

type和request不用改,預設就可以,request為launch時用F5直接可以啟動調試,request為attach按照官網解釋是關聯到已經運行的一個程序,但是這裡可以不管,我們就用vscode自備的調試器進行調試就好。

program這個參數是指定要執行的js入口文件,其中${workspaceFolder}為目前開啟的專案目錄,.vscode目錄會自動產生在此目錄下,launch.json也在此目錄下

args也是個比較重要的,例如該例,我執行指令gettext-extract --output output.pot input.vm 那麼args的作用其實就是傳入指令後面的參數,每個空格之間要分開,寫成args的某個子元素

sourceMaps對於編寫es5程式碼來說這個參數沒有什麼用,但是對於寫es6,TypeScript等就十分有必要了,這個參數的值為true時會利用編譯過程產生的map來進行原始碼和編譯後的程式碼對應,這樣在源碼打斷點,就可以愉快的進行我們的調試了

outDir是用來標註編譯後代碼的生成目錄的,幫助vscode進行查找

下面討論下關於編譯前後的對應關係這件事

我這邊是用的babel來進行編譯的,經過嘗試,program參數如果直接指向編譯後的文件,vscode奇蹟般的可以自己去尋找到源碼文件,這對於我們的調試是最簡單的方式瞭如果program指向你編寫的文件,那麼需要提供一個outDir參數,只要配置到編譯生成目錄就好了。其他:目測不需要sourceMaps還有編譯成成.js.map如果你調試遇到了問題請嘗試將sourceMaps設為true並讓編譯工具產生map檔

##調試程式碼

只要在你調試的程式碼左邊點擊一下,只要是紅色的,說明此處斷點可行,如圖所示


vscode debug怎麼用

直接按F5即可開始調試,會在介面上出現類似chrome的那幾個單步跳過,單步調試等等,使用方法類似chrome,只是快捷鍵稍有不同

然後點擊左側上面介紹的偵錯按鈕,會看到運行到某一步的變量,還有呼叫堆疊情況,如圖所示


vscode debug怎麼用

其他

捎帶介紹一下本文使用的babel和命令列入口相關的知識

#打開package.json,會發現有一個bin的配置,這麼配置再npm install的時候就會將這兩個指令加入到node_modules/.bin當中,然後就可以用做指令行了 

  "bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

babel執行指令時可以加--source-maps true來產生map文件,如果遇到我上面說到問題的才會用到這個,估計其他的編譯工具也會有;另外,我們修改原始檔之後,想立即重啟調試來進行驗證,每次都自己執行命令很麻煩,那麼babel自身支持-- watch參數,可以監控文件變化,這樣我們就可以實現簡單的自動化babel或者其他的命令行命令寫的很長,不容易記住,那麼我們就可以將其寫在package.json當中,如下就是講babel編譯寫在其中,可以執行npm run prepublish即可


  "scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

相關推薦:《

vscode使用教學》 #

以上是vscode debug怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
手把手带你会习VSCode debug,不信你还不会!手把手带你会习VSCode debug,不信你还不会!Mar 31, 2022 pm 08:45 PM

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

浅析VSCode怎么关闭自动更新浅析VSCode怎么关闭自动更新Jun 02, 2022 pm 12:56 PM

VSCode怎么关闭自动更新?下面本篇文章给大家介绍一下VSCode关闭自动更新的方法,希望对大家有所帮助!

手把手带你在VSCode中配置 Geant4 和 Root手把手带你在VSCode中配置 Geant4 和 RootApr 25, 2022 pm 08:57 PM

本篇是VSCode配置文章,手把手教大家怎么在VSCode​中配置使用 Geant4 和 Root,希望对大家有所帮助!

23个提高开发效率的前端VSCode插件(快来收藏)23个提高开发效率的前端VSCode插件(快来收藏)Jul 25, 2022 pm 08:06 PM

本篇文章给大家分享23个前端VSCode插件,助你提高开发效率,让你事半功倍,快来收藏吧!

扒一扒vscode Prettier选项中的16个实用属性,让代码变美!扒一扒vscode Prettier选项中的16个实用属性,让代码变美!May 03, 2022 am 10:00 AM

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

总结分享12个好玩有趣的 VSCODE 插件总结分享12个好玩有趣的 VSCODE 插件May 27, 2022 am 11:06 AM

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

手把手教你在VScode中配置C/C++环境(Win下)手把手教你在VScode中配置C/C++环境(Win下)Oct 10, 2022 pm 06:52 PM

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版