【五分鐘系列】掌握vscode調試技巧

時間 2019-11-19

標籤五分鐘系列掌握 vscode 調試技巧简体版

原文原文鏈接

調試前端js

準備一個前端項目

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  aaa
  <script src='main.js'></script>
</body>
</html>

main.js前端

var a = 1
var b = 2
console.log(b)

安裝Debugger for Chrome

須要先安裝插件Debugger for Chromenode

編寫launch.json

{
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/chrome/index.html" // 你的index.html地址
    }

啓動調試

先打個斷點

開始調試

這裏要選咱們剛剛建立的那個配置，即name字段webpack

能夠看到，程序運行至斷點處git

調試node項目

準備

app.jsgithub

var a = 1
var b = 3
console.log(b)

編寫launch.json

{
      "type": "node",
      "request": "launch",
      "name": "Launch node program",
      "program": "${workspaceRoot}/app.js",
      "runtimeExecutable": "node"
    },

注意： 若是程序報找不到node，則須要加上下面這句web

```
 "runtimeVersion": "10.14.2", // 與你當前使用的node版本一致，若是你是使用nvm進行node版本管理，則須要加上這個，不然可能找不到node
```

這種場景通常出如今：你使用nvm管理node,但沒有全局安裝node

開始調試

使用npm命令進行調試

通常咱們的項目命令都寫在npm script裏，咱們這裏講一些怎麼跑這些scriptchrome

準備

接上一節，咱們再建立一個package.json,注意裏面的scriptstypescript

注意9229這個端口npm

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "debugger": "node --nolazy --inspect-brk=9229 app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

編寫launch.json

{
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeVersion": "10.14.2",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "debugger" // 需跟package裏定義的一致
      ],
      "port": 9229 // 需與package裏定義的inspect-brk一致
    },

開始調試

使用nodemon命令進行調試

接上一節

編寫launch.json

{
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeVersion": "10.14.2",
      "runtimeExecutable": "nodemon",
      "args": ["${workspaceRoot}/app.js"],
      "restart": true,
      "protocol": "inspector",    //至關於--inspect了
      "sourceMaps": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
    },

開始調試

這時咱們修改b變量就能從新刷新了

調試webpack

rollup相似，這對於調試源碼很是有用

準備

新建webpack配置文件

這裏咱們以app.js爲入口文件

var b =1
console.log(b)

module.exports = {
  entry: './app.js',
};

安裝webpack

cnpm i webpack webpack-cli -S

編輯script

"webpack": "webpack",
  "build": "node --inspect-brk=9230 ./node_modules/.bin/webpack --config webpack.config.js",

注意：咱們要用./node_modules/.bin/webpack來啓動服務

配置launch.json

{
      "type": "node",
      "runtimeVersion": "10.14.2",
      "request": "launch",
      "name": "webpack debugger",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "build"],
      "port": 9230
    },

開始調試

調試ts

因爲ts文件不能直接運行和調試，咱們須要先將其轉爲js再進行調試

準備

安裝依賴

cnpm i typescript ts-node -S

其中ts-node能夠直接用來執行ts文件

編寫一個ts文件

index.ts

const t: number = 0;

console.log(t)

新增ts配置文件

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true
  },
  "include": ["."]
}

配置launch.json

{
      "type": "node",
      "request": "launch",
      "name": "ts debugger",
      "runtimeVersion": "10.14.2",
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "args": [
        "${workspaceFolder}/index.ts"
      ]
    },

這裏的意思是經過 node 來啓動 /src/index.ts，在啓動時爲 node 注入一個 ts-node/register 模塊，以即可以執行 ts 類型的文件