去评论
dz插件网

VsCode 各场景高级调试技巧!

Crystαl
2023/08/11 06:22:29
VsCode鑷粠璇炵敓浠ユ潵锛屼互鍏跺悇鑷紭寮傜殑鐗规ц繀閫熻蛋绾傚挨鍏舵槸瀵逛簬鍓嶇寮鍙戝皬浼欎即鏉ヨ锛屽嚑涔庢垚涓哄繀涓嶅彲灏戠殑寮鍙戝伐鍏枫
浣滆咃細鎰ｉ敜@https://juejin.cn/post/7071146744339234846

鎵浠ワ紝鐔熺粌鎺屾彙VsCode鐨勫悇鑷娇鐢ㄦ妧宸т笌璋冭瘯鎶宸т細璁╀綘鐨勬棩甯稿紑鍙戝伐浣滄晥鐜囧嶅銆傛湰鏂囧皢浼氫互澶ч噺鍥炬枃鐨勬柟寮忥紝浠庝笅闈㈠嚑涓柟闈㈣缁嗕粙缁峍sCode鐨勫悇绉嶆妧宸э細

鍩烘湰鎶宸

蹇熷惎鍔


VsCode瀹夎鍚庯紝浼氳嚜鍔ㄥ啓鍏ョ幆澧冨彉閲忥紝缁堢杈撳叆code鍗冲彲鍞よ捣VsCode搴旂敤绋嬪簭銆

甯哥敤蹇嵎閿



image.png


image.png

鍨傜洿鏍囧昂


鍦ㄩ厤缃枃浠朵腑娣诲姞濡備笅閰嶇疆锛屽彲浠ュ鍔犲瓧绗︽暟鏍囧昂杈呭姪绾
"editor.rulers": [40, 80, 100]
澶嶅埗浠ｇ爜


image.png

杩涢樁鎶宸

鏂偣鐨勫熀鏈娇鐢


涓嬮潰浠ュ湪VsCode涓揩閫熻皟璇曚竴涓狽ode椤圭洰涓轰緥锛屾紨绀烘柇鐐圭殑鍩烘湰浣跨敤銆傚悗鏂囦細缁х画缁撴潫鍚勭楂樼骇鏂偣銆


image.png


image.png

program瀛楁鐢ㄤ簬鎸囧畾浣犵殑绋嬪簭鍏ュ彛鏂囦欢锛${workspaceFolder}琛ㄧず褰撳墠椤圭洰鏍硅矾寰


image.png


image.png


image.png

娴獥鐨勬搷浣滄寜閽姛鑳戒緷娆′负锛

鏃ュ織鏂偣


鏃ュ織鏂偣鏄櫘閫氭柇鐐圭殑涓绉嶅彉浣擄紝鍖哄埆鍦ㄤ簬涓嶄細涓柇璋冭瘯锛岃屾槸鍙互鎶婁俊鎭褰曞埌鎺у埗鍙般傛棩蹇楁柇鐐瑰浜庤皟璇曟棤娉曟殏鍋滄垨鍋滄鐨勬湇鍔℃椂鐗瑰埆鏈夌敤銆傛楠ゅ涓:


image.png

鍙互浣跨敤{}浣跨敤鍙橀噺锛屾瘮濡鍦ㄦ澶勬坊鍔犳棩蹇楁柇鐐癸紝b鐨勫间负${b}


image.png


image.png


image.png

琛ㄨ揪寮忔潯浠舵柇鐐


鏉′欢鏂偣鏄〃杈惧紡缁撴灉涓true鏃舵墠浼氳繘琛屾柇鐐癸紝姝ラ濡備笅:


image.png


image.png


image.png


image.png

鍛戒腑璁℃暟鏂偣


鍙湁璇ヨ浠ｇ爜鍛戒腑浜嗘寚瀹氭鏁帮紝鎵嶄細杩涜鏂偣銆傛楠ゅ涓:


image.png


image.png


image.png

鍐呰仈鏂偣


浠呭綋鎵ц鍒拌揪涓庡唴鑱旀柇鐐瑰叧鑱旂殑鍒楁椂锛屾墠浼氬懡涓唴鑱旀柇鐐广傝繖鍦ㄨ皟璇曞湪涓琛屼腑鍖呭惈澶氫釜璇彞鐨勭缉灏忎唬鐮佹椂鐗瑰埆鏈夌敤銆傛瘮濡俧or寰幆锛岀煭璺繍绠楃绛変竴琛屼唬鐮佸寘鍚涓〃杈惧紡鏃朵細鐗瑰埆鏈夌敤銆傛楠ゅ涓:


image.png


image.png

琛ュ厖鐭ヨ瘑鐐癸細鏁版嵁闈㈡澘浠嬬粛



image.png


image.png


image.png


image.png

琛ュ厖鐭ヨ瘑鐐癸細鐩戝惉闈㈡澘浠嬬粛


鍙互灏嗗彉閲忔坊鍔犲埌鐩戝惉闈㈡澘锛屽疄鏃惰瀵熷彉閲忕殑鍙樺寲銆


image.png


image.png


image.png

琛ュ厖鐭ヨ瘑鐐癸細璋冭瘯鏈嶅姟鍣ㄦ椂鎵撳紑涓涓猆RI


寮鍙 Web 绋嬪簭閫氬父闇瑕佸湪 Web 娴忚鍣ㄤ腑鎵撳紑鐗瑰畾 URL锛屼互渚垮湪璋冭瘯鍣ㄤ腑璁块棶鏈嶅姟鍣ㄤ唬鐮併俈S Code 鏈変竴涓唴缃姛鑳解 serverReadyAction 鈥濇潵鑷姩鍖栬繖涓换鍔°
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!');
});
澶嶅埗浠ｇ爜
{
  "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鏄缃尮閰嶇殑绋嬪害绔彛鍙凤紝绔彛鍙锋斁鍦ㄥ皬鎷彿鍐咃紝鍗充綔涓轰竴涓鍒欑殑鎹曡幏缁勪娇鐢ㄣuriFormat鏄犲皠涓篣RI锛屽叾涓%s浣跨敤pattern涓殑绗竴涓崟鑾风粍鏇挎崲銆傛渶鍚庝娇鐢ㄨURI浣滀负澶栭儴绋嬪簭鎵撳紑鐨刄RI銆


image.png

缁堝眬锛氬悇鍦烘櫙璋冭瘯瀹炴垬

璋冭瘯NodeJS椤圭洰


鍏充簬NodeJs椤圭洰鐨勮皟璇曟柟娉曪紝宸茬粡鍦ㄤ笂杩扮殑鏂偣鐨勫熀鏈娇鐢[1]閮ㄥ垎鍋氫簡浠嬬粛锛屽彲浠ョ綉涓婃粴鍔ㄧ炕闃呫

璋冭瘯Typescript椤圭洰

琛ュ厖鐭ヨ瘑鐐癸細tasks閰嶇疆鏂囦欢鐨勫垱寤烘柟寮



image.png


image.png


image.png


image.png

琛ュ厖鐭ヨ瘑鐐癸細姣忔璋冭瘯鏃堕噸鏂扮紪璇

{
 "version": "2.0.0",
 "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build",
      "label": "tsc: 鏋勫缓 - tsconfig.json"
    }
  ]
}
澶嶅埗浠ｇ爜


image.png


image.png

娉ㄦ剰锛屽鏋滅紪璇戝悗鐨刯s鏂囦欢涓嶅湪鐩稿簲鐨勪綅缃紝閫氳繃鍥句腑鐨outFiles瀛楁鍙互鎸囧畾ts缂栬瘧鍚庣殑js璺緞銆


image.png

琛ュ厖鐭ヨ瘑鐐癸細VsCode鐨凾S鐗堟湰璇存槑


淇敼宸ヤ綔鍖簍s鐗堟湰鐨勬柟娉曪細


image.png


image.png


image.png

璋冭瘯html椤圭洰


瀛︿細浜嗕笂杩皌s鐨勮皟璇曞悗锛屾垜浠皾璇曡皟璇昲tml鏂囦欢锛屽苟涓攈tml鏂囦欢涓紩鍏s鏂囦欢:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>Hello</h3>
  <script src="./out/index.js"></script>
</body>
</html>
澶嶅埗浠ｇ爜
const num: number =  1221;
console.log(num);

function fn(arg: string): void {
  console.log('fn', arg);
}

document.body.append('World')

fn("he");
澶嶅埗浠ｇ爜


image.png
{
  // 浣跨敤 IntelliSense 浜嗚В鐩稿叧灞炴с
  // 鎮仠浠ユ煡鐪嬬幇鏈夊睘鎬х殑鎻忚堪銆
  // 娆蹭簡瑙ｆ洿澶氫俊鎭紝璇疯闂: 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: 鏋勫缓 - tsconfig.json",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
澶嶅埗浠ｇ爜


image.png

璋冭瘯Vue椤圭洰鐨勪袱绉嶆柟寮


涓嬮潰浠嬬粛涓ょ璋冭瘯vue2椤圭洰鐨3绉嶆柟娉曪紝鍏朵粬妗嗘灦鐨勮皟璇曚篃绫讳技锛

涓嶄娇鐢╲scode鎻掍欢Debugger for chrome鐨勬柟娉

module.exports = {
  configureWebpack: {
    // 鐢熸垚sourceMaps
    devtool: "source-map"
  }
};
澶嶅埗浠ｇ爜


image.png
{
  "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缂栬瘧鍛戒护銆

娉ㄦ剰锛氭鏂瑰紡鐨勪富瑕佺偣鍦ㄤ簬launch.json閰嶇疆鏂囦欢涓紝閫氳繃preLaunchTask瀛楁鎸囧畾璋冭瘯鍓嶅厛杩愯涓涓换鍔¤剼鏈紝preLaunchTask鐨勫煎搴tasks.json鏂囦欢涓殑label鍊笺

鏇村璇︾粏鍐呭锛屽ぇ瀹跺彲浠ョ偣鍑昏繖閲岀殑鍙傝冩枃妗[2]鏌ラ槄銆

鍊熷姪vscode鎻掍欢Debugger for Chrome鍦–hrome涓皟璇

module.exports = {
  configureWebpack: {
    // 鐢熸垚sourceMaps
    devtool: "source-map"
  }
};
澶嶅埗浠ｇ爜


image.png
# 缁堢鎵ц鍛戒护锛屽惎鍔ㄩ」鐩
npm run serve
澶嶅埗浠ｇ爜


image.png

鏇村璇︾粏鍐呭锛岃鐐瑰嚮杩欓噷鐨勫弬鑰冩枃妗[3]鏌ラ槄銆

鍊熷姪vscode鎻掍欢Debugger for Firfox鍦‵irefox涓皟璇

{
  "version": "0.2.0",
  "configurations": [
    // 鐪佺暐Chrome鐨勯厤缃...
    // 涓嬮潰娣诲姞鐨凢irefox鐨勯厤缃
    {
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
澶嶅埗浠ｇ爜


image.png

Firefox鍒濆鍚姩鏃朵笉浼氳Е鍙戣皟璇曪紝闇瑕佸埛鏂颁竴娆

璋冭瘯Electron椤圭洰


Electron寰堝浜洪兘浣跨敤杩囷紝涓昏鐢ㄤ簬寮鍙戣法骞冲彴鐨勭郴缁熸闈㈠簲鐢ㄣ傞偅涔堟潵鐪嬩笅vue-cli-electron-builder鍒涘缓鐨Electron椤圭洰鎬庝箞璋冭瘯銆傛楠ゅ涓嬶細
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
澶嶅埗浠ｇ爜
{
  "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"]
    }
  ]
}
澶嶅埗浠ｇ爜

姝ゅ閰嶇疆浜嗕袱涓皟璇曞懡浠: Electron: Main鐢ㄤ簬璋冭瘯涓昏繘绋嬶紝Electron: Renderer鐢ㄤ簬璋冭瘯娓叉煋杩涚▼锛compounds[].閫夐」鐢ㄤ簬瀹氫箟澶嶅悎璋冭瘯閫夐」; configurations瀹氫箟鐨勫鍚堝懡浠ゆ槸骞惰鐨; preLaunchTask鐢ㄤ簬閰嶇疆鍛戒护鎵ц鍓嶅厛鎵ц鐨勪换鍔¤剼鏈紝鍏跺煎搴tasks.json涓殑label瀛楁; preLaunchTask鐢ㄥ湪compounds鏃讹紝鐢ㄤ簬瀹氫箟configurations澶嶅悎浠诲姟鎵ц鍓嶅厛鎵ц鐨勮剼鏈
{
  // 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\\."
        }
      }
    }
  ]
}
澶嶅埗浠ｇ爜

鍦ㄤ富杩涚▼鐩稿叧浠ｇ爜涓婃墦涓婃柇鐐癸紝鐒跺悗鍚姩璋冭瘯涓昏繘绋嬪懡浠ゅ氨鍙互璋冭瘯涓昏繘绋嬩簡


image.png

娉ㄦ剰锛岃繖閲岀殑options鍙傛暟鏄牴鎹疄闄呯殑鎯呭喌锛岃嚜瀹氫箟娣诲姞鎴戜滑杩愯椤圭洰鏃舵墍闇瑕佺殑鍙傛暟锛屾瘮濡傛垜杩欓噷鍥犱负鍚姩椤圭洰鐨刵pm鍛戒护鏄:
"serve-local:dev": "cross-env VUE_APP_TYPE=local VUE_APP_ENV=dev vue-cli-service electron:serve"
澶嶅埗浠ｇ爜


image.png

鍒囨崲鍒版覆鏌撹繘绋嬬殑璋冭瘯閫夐」锛屽湪娓叉煋杩涚▼鐨勪唬鐮佸鎵撲笂鏂偣锛岀偣鍑昏皟璇曘傛敞鎰忥紝姝ゆ椂骞朵笉浼氭湁鏂偣缁堢锛岄渶瑕ctrl+r鎵嬪姩鍒锋柊杞欢杩涚▼鎵嶄細鐪嬪埌娓叉煋杩涚▼鐨勬柇鐐广


image.png


image.png

鍚屾椂寮鍚覆鏌撹繘绋嬪拰涓昏繘绋嬬殑璋冭瘯锛屽彧闇瑕佸垏鎹㈠埌璋冭瘯鍏ㄩ儴鐨勯夐」鍗冲彲銆傛敞鎰忥紝姝ょ鏂瑰紡鍥犱负compounds[].configurations閰嶇疆鏄苟琛屾墽琛岀殑锛屽苟涓嶄竴瀹氳兘淇濊瘉娓叉煋杩涚▼璋冭瘯涓瀹氳兘闄勫姞鍒颁富杩涚▼璋冭瘯鎴愬姛锛堜及璁℃槸鏃舵満闂锛夛紝鏈変簺鏃跺欎細璋冭瘯娓叉煋杩涚▼涓嶆垚鍔熴傛墍浠ワ紝鍙互閲囧彇涓婇潰鐨勬柟寮忚繘琛岃皟璇曘


image.png

鏇村璋冭瘯Electron鐨勫唴瀹癸紝鍙互鐐瑰嚮鍙傝冩枃妗[4]鏌ラ槄銆

琛ュ厖锛氭洿杩涗竴姝

鍏朵粬鎶宸

鎶宸т竴锛氫唬鐮佺墖娈碉紙snippets锛

浠庢墿灞曞晢搴椾腑瀹夎snippets

@category:"snippets"
澶嶅埗浠ｇ爜


image.png

鍒涘缓鍏ㄥ眬浠ｇ爜鐗囨



image.png
{
  "鑷姩琛ュ叏console.log": {
    "scope": "javascript,typescript",
      "prefix": "log",
      "body": [
        "console.log('$1');",
        "$2"
      ],
    "description": "杈撳嚭console.log('')"
  }
}
澶嶅埗浠ｇ爜
鍏抽敭璇绫诲瀷璇存槑
scopestring浠ｇ爜鐗囨鐢熸晥鐨勪綔鐢ㄥ煙锛屽彲浠ユ槸澶氫釜璇█锛屾瘮濡javascript,typescript琛ㄧず鍦╦s鍜宼s鐢熸晥锛屼笉鍔scope瀛楁琛ㄧず瀵规墍鏈夋枃浠剁被鍨嬬敓鏁
prefix`stringstring[]`
bodystring[]浠ｇ爜鐗囨鍐呭锛屾暟缁勭殑姣忎竴椤逛細鏄竴琛
descriptionstringIntelliSense 鏄剧ず鐨勭墖娈电殑鍙夋弿杩
1鈭1 - 1鈭抧-瀹氫箟鍏夋爣鐨勪綅缃紝鍏夋爣鏍规嵁鏁板瓧澶у皬鎸塼ab渚濇璺宠浆锛涙敞鎰$0鏄壒娈婂硷紝琛ㄧず鍏夋爣閫鍑虹殑浣嶇疆锛屾槸鏈鍚庣殑鍏夋爣浣嶇疆銆


image.png
"body": [
  "console.log('${1:abc}');"
],
澶嶅埗浠ｇ爜


image.png

鐢ㄤ袱涓珫绾垮寘鍚涓夋嫨鍊硷紝|澶氫釜閫夋嫨鍊肩洿鎺ョ敤閫楀彿闅斿紑|
"body": [
  "console.log('${1:abc}');",
  "${2|aaa,bbb,ccc|}"
],
澶嶅埗浠ｇ爜


image.png

鏂板缓褰撳墠宸ヤ綔鍖虹殑浠ｇ爜鐗囨


鍙渶瑕侀夋嫨鏂囦欢 \-> 棣栭夐」 \-> 鐢ㄦ埛鐗囨 \-> 鏂板缓xxx鏂囦欢澶圭殑浠ｇ爜鐗囨, 鏂板缓鍚庝細鍦ㄥ綋鍓嶅伐浣滃尯鐢熸垚.vscode/xxx.code-snippets鏂囦欢


image.png

鎶宸т簩锛欵mmet


vscode鍐呯疆浜嗗Emmet鐨勬敮鎸侊紝鏃犻渶棰濆鎵╁睍銆備緥濡俬tml鐨凟mmet婕旂ず濡備笅:


emmet.gif

鎶宸т笁锛氬鍏夋爣澶勪唬鐮佸彉閲忓揩閫熼噸鍛藉悕


閫変腑鎴栬呭厜鏍囨墍澶勭殑浣嶇疆锛屾寜F2鍙互瀵规墍鏈夌殑鍙橀噺閲嶅懡鍚


clipboard.png

鎶宸у洓锛氫唬鐮侀噸鏋勫缓璁



clipboard.png


clipboard.png


clipboard.png


clipboard.png


clipboard.png

琛ュ厖锛歏sCode鎵╁睍鎻掍欢寮鍙


VsCode鎵╁睍鎻掍欢鍙互鍋氫粈涔堜簨鎯咃紵

鍩轰簬Yeoman蹇熷紑鍙慥sCode鎻掍欢锛屾楠ゅ涓:
# 缁堢杩愯锛屼富瑕乶ode鐗堟湰闇瑕12鍙婁互涓婏紝node10浼氬畨瑁呮姤閿
npm i -g yo generator-code
澶嶅埗浠ｇ爜


image.png


image.png


image.png


image.png


image.png


进入原文参与互动