久草资源热线免费看,1本道中文宇av无码,亚洲综合一区无码精品

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

深入講解VsCode各場景高級調(diào)試與使用技巧

VsCode自從誕生以來，以其各自優(yōu)異的特性迅速走紅。尤其是對于前端開發(fā)小伙伴來說，幾乎成為必不可少的開發(fā)工具。所以，熟練掌握VsCode的各自使用技巧與調(diào)試技巧會讓你的日常開發(fā)工作效率倍增。

本文將會以大量圖文的方式，從下面幾個方面詳細介紹VsCode的各種技巧：

第一部分主要介紹VsCode的基本技巧，比如常用快捷鍵、輔助標尺等。熟悉此部分的可以直接跳過。
第二部分主要各種斷點（比如日志斷點、內(nèi)聯(lián)斷點、表達式斷點等等）、數(shù)據(jù)面板等等。
第三部分主要講解各種項目的調(diào)試實戰(zhàn)，比如Node程序、TS程序、Vue程序、Electron程序、Html等的調(diào)試實戰(zhàn)。
最后一部分將會講解其他有用的技巧，比如代碼片段、重構(gòu)、Emmet等等。

基本技巧

快速啟動

VsCode安裝后，會自動寫入環(huán)境變量，終端輸入code即可喚起VsCode應用程序。

常用快捷鍵

ctrl + p快速搜索文件并跳轉(zhuǎn)，添加:可以跳轉(zhuǎn)到指定行。

ctrl + shift + p 根據(jù)您當前的上下文訪問所有可用命令。
ctrl + shift + c在外部打開終端并定位到當前項目路徑。
ctrl + 按鍵1左邊的符號顯示隱藏終端面板。
Ctrl+B 切換側(cè)邊欄。
Ctrl+\ 快速拆分文件編輯。
alt + 單機左鍵添加多處光標。
alt + shift + 單擊左鍵同一列所有位置添加光標。
alt + shift + 鼠標選擇選擇相同開始和結(jié)束的區(qū)域。

alt + 上鍵或下鍵將當前行或者選中的區(qū)域上移/下移一行。

垂直標尺

在配置文件中添加如下配置，可以增加字符數(shù)標尺輔助線。

"editor.rulers": [40, 80, 100]

進階技巧

斷點的基本使用

下面以在VsCode中快速調(diào)試一個Node項目為例，演示斷點的基本使用。后文會繼續(xù)結(jié)束各種高級斷點。

創(chuàng)建一個基本的node項目為Nodejs。
打開左側(cè)調(diào)試面板，選擇你要調(diào)試的node項目名稱，添加調(diào)試配置。

選擇調(diào)試的項目類型為Node.js

打開生成的.vscode/launch.json文件，指定程序入口文件

program字段用于指定你的程序入口文件，${workspaceFolder}表示當前項目根路徑。

在程序中添加斷點，只需要點擊左側(cè)的邊欄即可添加斷點

按F5開始調(diào)試，成功調(diào)試會有浮窗操作欄

浮窗的操作按鈕功能依次為：

繼續(xù)(F5)、
調(diào)試下一步(F10)、
單步跳入(F11)、
單步跳出(Shift F11)、
重新調(diào)試(Ctrl + Shift + F5)、
結(jié)束調(diào)試(Shift + F5)

日志斷點

日志斷點是普通斷點的一種變體，區(qū)別在于不會中斷調(diào)試，而是可以把信息記錄到控制臺。日志斷點對于調(diào)試無法暫?；蛲Ｖ沟姆諘r特別有用。步驟如下:

添加日志斷點的步驟

輸入要日志斷點的信息，點擊回車添加完成

可以使用{}使用變量，比如在此處添加日志斷點，b的值為$

日志斷點添加成功后會有是一個菱形圖標

按F5運行查看調(diào)試結(jié)果

表達式條件斷點

條件斷點是表達式結(jié)果為true時才會進行斷點，步驟如下:

在代碼行左側(cè)右擊，也可以添加斷點，此處選擇添加條件斷點。

填寫表達式，按回車鍵

添加成功的小圖標如下

按F5調(diào)試，條件成立所以進行了斷點

命中計數(shù)斷點

只有該行代碼命中了指定次數(shù)，才會進行斷點。步驟如下:

選擇條件斷點，切換為命中次數(shù)選項，填寫命中次數(shù)

填寫成功如下圖所示

按F5調(diào)試，如圖所示，index為9時才中斷

內(nèi)聯(lián)斷點

僅當執(zhí)行到達與內(nèi)聯(lián)斷點關(guān)聯(lián)的列時，才會命中內(nèi)聯(lián)斷點。這在調(diào)試在一行中包含多個語句的縮小代碼時特別有用。比如for循環(huán)，短路運算符等一行代碼包含多個表達式時會特別有用。步驟如下:

在指定位置按Shift + F9

調(diào)試之后，每次運行到該內(nèi)聯(lián)處的代碼都會中斷

補充知識點：數(shù)據(jù)面板介紹

數(shù)據(jù)面板可以查看所有變量

在變量上點擊右鍵，可以設(shè)置變量值、復制變量值等操作

聚焦于數(shù)據(jù)面板時，可以通過鍵入值來搜索過濾。點擊下圖所示按鈕可以控制是否篩選。

補充知識點：監(jiān)聽面板介紹

可以將變量添加到監(jiān)聽面板，實時觀察變量的變化。

在變量面板通過右鍵選擇“添加到監(jiān)視”將變量添加到監(jiān)聽面板

也可以直接在監(jiān)聽面板選擇添加按鈕進行變量添加

添加變量后就可以實時監(jiān)聽變量的變化

補充知識點：調(diào)試服務器時打開一個URI

開發(fā) Web 程序通常需要在 Web 瀏覽器中打開特定 URL，以便在調(diào)試器中訪問服務器代碼。VS Code 有一個內(nèi)置功能“ serverReadyAction ”來自動化這個任務。

一段簡單的server代碼

var express = require('express');
var app = express();
app.get('/', function(req, res) {
 res.send('Hello World!');
});
app.listen(3000, function() {
 console.log('Example app listening on port 3000!');
});

配置launch.json，以支持打開URI

{
 "type": "node",
 "request": "launch",
 "name": "Launch Program",
 "program": "${workspaceFolder}/app.js",
 "serverReadyAction": {
   "pattern": "listening on port ([0-9]+)",
   "uriFormat": "http://localhost:%s",
   "action": "openExternally"
 }
}

pattern是設(shè)置匹配的程度端口號，端口號放在小括號內(nèi)，即作為一個正則的捕獲組使用。uriFormat映射為URI，其中%s使用pattern中的第一個捕獲組替換。最后使用該URI作為外部程序打開的URI。

按F5調(diào)試，會自動打開瀏覽器，且會在下圖所示處中斷，當繼續(xù)執(zhí)行后，瀏覽器才能看到輸出了server的內(nèi)容。

終局：各場景調(diào)試實戰(zhàn)

調(diào)試NodeJS項目

關(guān)于NodeJs項目的調(diào)試方法，已經(jīng)在上述的斷點的基本使用部分做了介紹，可以網(wǎng)上滾動翻閱。

調(diào)試Typescript項目

調(diào)試TS項目前，先創(chuàng)建一個TS項目

先初始化一個ts程序，生成默認的tsconfig.json文件

# 終端運行
tsc --init

打開tsconfig.json文件，開啟sourceMap選項和指定編譯后輸出的路徑。

VS Code 內(nèi)置了對 Ts 調(diào)試的支持。為了支持調(diào)試 Ts 與正在執(zhí)行的 Js 代碼相結(jié)合，VS Code 依賴于調(diào)試器的source map在 Ts 源代碼和正在運行的 Js 之間進行映射，所以需要需要開啟sourceMap選項。

{
"sourceMap": true,
"outDir": "./out"
}

新建index.ts文件，寫一個基本的ts代碼

const num: number = 123;
console.log(num);
function fn(arg: string): void {
 console.log('fn', arg);
}
fn("Hello");

手動編譯調(diào)試TS

在上述的ts基本項目中：

終端執(zhí)行ts的編譯命令tsc

此時可以看到生成了out文件夾，里面包含一個index.js和一個index.js.map文件

在index.ts中隨意添加一個斷點

按F5或者運行 -> 啟動調(diào)試，此時可以看到可以正常debug調(diào)試

通過構(gòu)建任務構(gòu)建調(diào)試TS

按Ctrl+Shift+B或選擇終端 -> 運行生成任務，此時會彈出一個下拉菜單

選擇tsc構(gòu)建選項，此時可以看到自動生成了編譯文件

注意，如果你使用的是其他終端(比如cmder)的話，有可能會生成不了，如下圖所示，使用默認的powershell即可：

調(diào)試的話和上述步驟一樣，在有了編譯后的文件后，按F5即可
監(jiān)視改變并實時編譯

按Ctrl + Shift + B選擇監(jiān)視選項，可以實時監(jiān)視文件內(nèi)容發(fā)生變化，重新編譯

如下圖所示，會實時編譯

補充知識點：tasks配置文件的創(chuàng)建方式

方法1：點擊終端 -> 配置任務 -> 選擇任務可以生成對應的tasks.json配置

方法2：點擊終端 -> 運行生成任務 -> 點擊設(shè)置圖標也可以生成對應的tasks.json配置

補充知識點：每次調(diào)試時重新編譯

按上述的操作已經(jīng)生成了task.json配置文件

{
"version": "2.0.0",
"tasks": [
   {
     "type": "typescript",
     "tsconfig": "tsconfig.json",
     "problemMatcher": [
       "$tsc"
     ],
     "group": "build",
     "label": "tsc: 構(gòu)建 - tsconfig.json"
   }
 ]
}

點擊運行 -> 添加配置 -> 選擇nodejs

在生成的launch.json文件中，添加preLaunchTask字段，值是tasks.json的label值，一定要相同，注意大小寫。該字段的作用是在執(zhí)行命令前先執(zhí)行改task任務。

注意，如果編譯后的js文件不在相應的位置，通過圖中的outFiles字段可以指定ts編譯后的js路徑。

在index.ts文件中按F5啟動調(diào)試，可以看到調(diào)試前已經(jīng)生成了編譯文件，而后就可以正常調(diào)試了。

補充知識點：VsCode的TS版本說明

vscode本身內(nèi)置了對ts的支持
vscode內(nèi)置的ts版本（即工作區(qū)版本），僅僅用于IntelliSense（代碼提示），工作區(qū)ts版本與用于編譯的ts版本無任何關(guān)系。

修改工作區(qū)ts版本的方法：

在狀態(tài)欄選擇typescript的圖標，選擇版本切換

選擇你需要的版本即可

調(diào)試html項目

學會了上述ts的調(diào)試后，我們嘗試調(diào)試html文件，并且html文件中引入ts文件:

創(chuàng)建html，引入ts編譯后的js文件




 
 
 
 Document


 Hello

ts源文件如下：

const num: number =  1221;
console.log(num);
function fn(arg: string): void {
 console.log('fn', arg);
}
document.body.append('World')
fn("he");

打debug

launch.json啟動命令配置

{
  // 使用 IntelliSense 了解相關(guān)屬性。  
 // 懸停以查看現(xiàn)有屬性的描述。
 // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
   {
     "type": "pwa-chrome",
     "request": "launch",
     "name": "Launch Chrome",
     "url": "file:///E:/demo/vscode/debug/ts/index.html",
     "preLaunchTask": "tsc: 構(gòu)建 - tsconfig.json",
     "webRoot": "${workspaceFolder}"
   }
 ]
}

選擇我們的啟動命令

按F5可以正常喚起chrome瀏覽器，并在vscode的ts源碼處會有debug效果

調(diào)試Vue項目的兩種方式

下面介紹兩種調(diào)試vue2項目的3種方法，其他框架的調(diào)試也類似：

不使用vscode插件Debugger for chrome的方法

初始化vue項目，配置vue.config.js，指定要生成sourceMaps資源

module.exports = {
 configureWebpack: {
   // 生成sourceMaps
   devtool: "source-map"
 }
};

根目錄下創(chuàng)建./vscode/launch.json文件或者選擇運行 -> 添加配置 -> Chrome

{
 "version": "0.2.0",
 "configurations": [
   {
     "type": "chrome",
     "request": "launch",
     "name": "vuejs: chrome",
     "url": "http://localhost:8080",
     "webRoot": "${workspaceFolder}",
     "breakOnLoad": true,
     "pathMapping": {
       "/_karma_webpack_": "${workspaceFolder}"
     },
     "sourceMapPathOverrides": {
       "webpack:/*": "${webRoot}/*",
       "/./*": "${webRoot}/*",
       "/src/*": "${webRoot}/*",
       "/*": "*",
       "/./~/*": "${webRoot}/node_modules/*"
     },
     "preLaunchTask": "serve"
   }
 ]
}

添加任務腳本

{
 "version": "2.0.0",
 "tasks": [
   {
     "label": "serve",
     "type": "npm",
     "script": "serve",
     "isBackground": true,
     "problemMatcher": [
       {
         "base": "$tsc-watch",
         "background": {
           "activeOnStart": true,
           "beginsPattern": "Starting development server",
           "endsPattern": "Compiled successfully"
         }
       }
     ],
     "group": {
       "kind": "build",
       "isDefault": true
     }
   }
 ]
}

該腳本的作用是運行npm run serve編譯命令。

按F5啟動調(diào)試即可

注意：此方式的主要點在于launch.json配置文件中，通過preLaunchTask字段指定調(diào)試前先運行一個任務腳本，preLaunchTask的值對應tasks.json文件中的label值。

更多詳細內(nèi)容，大家可以點擊這里的參考文檔查閱。

借助vscode插件Debugger for Chrome在Chrome中調(diào)試

第一步還是初始化vue項目，添加vue.config.js文件配置，指定要生成sourceMaps資源

module.exports = {
 configureWebpack: {
   // 生成sourceMaps
   devtool: "source-map"
 }
};

vscode中擴展中安裝Debugger for Chrome插件，并確保沒有禁用插件

手動啟動項目的運行, 此方式不需要配置tasks.json任務

# 終端執(zhí)行命令，啟動項目
npm run serve

按F5啟動調(diào)試即可

更多詳細內(nèi)容，請點擊這里的參考文檔查閱。

借助vscode插件Debugger for Firfox在Firefox中調(diào)試。

和Debugger for Chrome基本一樣，區(qū)別在于安裝Debugger for Firfox插件，并在launch.json配置中，增加調(diào)試Firefox的配置即可，配置如下:

{
 "version": "0.2.0",
 "configurations": [
   // 省略Chrome的配置...
   // 下面添加的Firefox的配置
   {
     "type": "firefox",
     "request": "launch",
     "reAttach": true,
     "name": "vuejs: firefox",
     "url": "http://localhost:8080",
     "webRoot": "${workspaceFolder}/src",
     "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
   }
 ]
}

調(diào)試時選擇對應的調(diào)試命令即可

Firefox初始啟動時不會觸發(fā)調(diào)試，需要刷新一次

調(diào)試Electron項目

Electron很多人都使用過，主要用于開發(fā)跨平臺的系統(tǒng)桌面應用。那么來看下vue-cli-electron-builder創(chuàng)建的Electron項目怎么調(diào)試。步驟如下：

在初始化項目后，首先修改vue.config.js文件配置，增加sourceMaps配置：

module.exports = {
 configureWebpack: {
   devtool: 'source-map'
 }
}

創(chuàng)建調(diào)試配置.vscode/launch.json

{
 "version": "0.2.0",
 "configurations": [
   {
     "name": "Electron: Main",
     "type": "node",
     "request": "launch",
     "protocol": "inspector",
     "preLaunchTask": "bootstarp-service",
     "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
     "windows": {
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
     },
     "args": ["--remote-debugging-port=9223", "./dist_electron"],
     "outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
   },
   {
     "name": "Electron: Renderer",
     "type": "chrome",
     "request": "attach",
     "port": 9223,
     "urlFilter": "http://localhost:*",
     "timeout": 0,
     "webRoot": "${workspaceFolder}/src",
     "sourceMapPathOverrides": {
       "webpack:///./src/*": "${webRoot}/*"
     }
   },
 ],
 "compounds": [
   {
     "name": "Electron: All",
     "configurations": ["Electron: Main", "Electron: Renderer"]
   }
 ]
}

此處配置了兩個調(diào)試命令: Electron: Main用于調(diào)試主進程，Electron: Renderer用于調(diào)試渲染進程；compounds[].選項用于定義復合調(diào)試選項; configurations定義的復合命令是并行的;

preLaunchTask用于配置命令執(zhí)行前先執(zhí)行的任務腳本，其值對應tasks.json中的label字段; preLaunchTask用在compounds時，用于定義configurations復合任務執(zhí)行前先執(zhí)行的腳本。

創(chuàng)建任務腳本

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
   {
     "label": "bootstarp-service",
     "type": "process",
     "command": "./node_modules/.bin/vue-cli-service",
     "windows": {
       "command": "./node_modules/.bin/vue-cli-service.cmd",
       "options": {
         "env": {
           "VUE_APP_ENV": "dev",
           "VUE_APP_TYPE": "local"
         }
       }
     },
     "isBackground": true,
     "args": [
       "electron:serve", "--debug"
     ],
     "problemMatcher": {
       "owner": "custom",
       "pattern": {
         "regexp": ""
       },
       "background": {
         "beginsPattern": "Starting development server\\.\\.\\.",
         "endsPattern": "Not launching electron as debug argument was passed\\."
       }
     }
   }
 ]
}

啟動調(diào)試

在主進程相關(guān)代碼上打上斷點，然后啟動調(diào)試主進程命令就可以調(diào)試主進程了

注意，這里的options參數(shù)是根據(jù)實際的情況，自定義添加我們運行項目時所需要的參數(shù)，比如我這里因為啟動項目的npm命令是:

"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"

主進程調(diào)試成功

開始調(diào)試渲染進程

切換到渲染進程的調(diào)試選項，在渲染進程的代碼處打上斷點，點擊調(diào)試。注意，此時并不會有斷點終端，需要ctrl+r手動刷新軟件進程才會看到渲染進程的斷點。

刷新渲染進程后的效果，如下圖，已經(jīng)進入了斷點

另一種方式

同時開啟渲染進程和主進程的調(diào)試，只需要切換到調(diào)試全部的選項即可。注意，此種方式因為compounds[].configurations配置是并行執(zhí)行的，并不一定能保證渲染進程調(diào)試一定能附加到主進程調(diào)試成功（估計是時機問題），有些時候會調(diào)試渲染進程不成功。所以，可以采取上面的方式進行調(diào)試。

更多調(diào)試Electron的內(nèi)容，可以點擊參考文檔查閱。

補充：更進一步

VS調(diào)試React app文檔
VS調(diào)試Next.js文檔
更多...

其他技巧

技巧一：代碼片段（snippets）

從擴展商店中安裝snippets

@category:"snippets"

創(chuàng)建全局代碼片段

選擇文件 -> 首選項 -> 用戶片段
選擇新建全局代碼片段文件

添加代碼片段文件的文件名稱，會生成.code-snippets后綴的文件
定義用戶片段

{
 "自動補全console.log": {
   "scope": "javascript,typescript",
     "prefix": "log",
     "body": [
       "console.log('$1');",
       "$2"
     ],
   "description": "輸出console.log('')"
 }
}

關(guān)鍵詞	類型	說明
scope	?`?string?`?	代碼片段生效的作用域，可以是多個語言，比如?`?javascript,typescript?`??表示在js和ts生效，不加?`?scope?`?字段表示對所有文件類型生效
prefix	`string	string[]`
body	?`?string[]?`?	代碼片段內(nèi)容，數(shù)組的每一項會是一行
description	?`?string?`?	?`?IntelliSense?`? 顯示的片段的可選描述
1?n	-	定義光標的位置，光標根據(jù)數(shù)字大小按tab依次跳轉(zhuǎn)；注意?`?$0?`?是特殊值，表示光標退出的位置，是最后的光標位置。

在鍵盤輸入log時效果如下

指定光標處的默認值并選中

"body": [
 "console.log('${1:abc}');"
],

指定光標處的默認值有多個，并提供下拉選擇

用兩個豎線包含多個選擇值，|多個選擇值直接用逗號隔開|

"body": [
 "console.log('${1:abc}');",
 "${2|aaa,bbb,ccc|}"
],

新建當前工作區(qū)的代碼片段

只需要選擇文件 -> 首選項 -> 用戶片段 -> 新建xxx文件夾的代碼片段, 新建后會在當前工作區(qū)生成.vscode/xxx.code-snippets文件

技巧二：Emmet

vscode內(nèi)置了對Emmet的支持，無需額外擴展。例如html的Emmet演示如下:

技巧三：對光標處代碼變量快速重命名

選中或者光標所處的位置，按F2可以對所有的變量重命名

技巧四：代碼重構(gòu)建議

選中要重構(gòu)的代碼，點擊出現(xiàn)的黃色小燈的圖標

選中重構(gòu)的類型

輸入新的變量名

還可以重構(gòu)到函數(shù)

TS中還可以提取接口等等

補充：VsCode擴展插件開發(fā)

VsCode擴展插件可以做什么事情？

定制主題、文件圖標
擴展工作臺功能
創(chuàng)建webView
自定義新的語言提示
支持調(diào)試特定的runtime

基于Yeoman快速開發(fā)VsCode插件，步驟如下:

安裝Yeoman和用于生成模板的插件VS Code Extension Generator

# 終端運行，主要node版本需要12及以上，node10會安裝報錯
npm i -g yo generator-code

運行yo code創(chuàng)建命令，選擇要生成的項目模板。這里演示New extension

根據(jù)提示依次選擇

生成的內(nèi)容如下

按F5生成編譯項目，此時會自動打開一個新窗口
在新窗口按Ctrl+Shfit+P,輸入Hello World命令

此時會彈出一個彈窗的效果

至此，一個最簡單的插件就完成了

新聞標題：深入講解VsCode各場景高級調(diào)試與使用技巧
URL鏈接：http://www.dlmjj.cn/article/dpdgsie.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区