文档章节

【五分钟系列】掌握vscode调试技巧

aoping
 aoping
发布于 11/19 00:15
字数 818
阅读 24
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

调试前端js

准备一个前端项目

index.html

<!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 Chrome

编写launch.json

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

启动调试

先打个断点

开始调试

这里要选我们刚刚创建的那个配置,即name字段

可以看到,程序运行至断点处

调试node项目

准备

app.js

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,则需要加上下面这句

```
 "runtimeVersion": "10.14.2", // 与你当前使用的node版本一致,如果你是使用nvm进行node版本管理,则需要加上这个,否则可能找不到node
```

这种场景一般出现在:你使用nvm管理node,但没有全局安装node

开始调试

使用npm命令进行调试

一般我们的项目命令都写在npm script里,我们这里讲一些怎么跑这些script

准备

接上一节,我们再创建一个package.json,注意里面的scripts

注意9229这个端口

{
  "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 类型的文件

开始调试

项目地址

以上代码可以在 https://github.com/repototest/vscode-debugger-demo 找到

更多优秀项目

  • https://github.com/bombayjs/bombayjs (web监控)
  • https://github.com/abc-club/free-resources (前端资源)

参考

https://www.barretlee.com/blog/2019/03/18/debugging-in-vscode-tutorial/

https://www.jianshu.com/p/88d9a1e6fdcd


本篇文章由一文多发平台ArtiPub自动发布

© 著作权归作者所有

aoping
粉丝 0
博文 4
码字总数 3594
作品 0
广州
私信 提问
FW:win下轻量级的c语言开发环境配置:vsc + gcc

win下轻量级的c语言开发环境配置:vsc + gcc 说明 VSCode是个编辑器,默认不带编译和调试环境,需要自行安装编译器,调试可以用其插件完成。 编译套件选用的是TDM-GCC,方便易用。(Codeblo...

SamXIAO
01/08
146
1
VSCode插件开发全攻略(六)开发调试技巧

更多文章请戳VSCode插件开发全攻略系列目录导航。 前言 在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebVi...

xal
2018/10/18
0
0
VSCode插件开发全攻略(二)HelloWord

更多文章请戳VSCode插件开发全攻略系列目录导航。 写着前面 学习一门新的语言或者生态首先肯定是从HelloWord开始。 您可以直接克隆我放在GitHub上vscode-plugin-demo 的代码到本地,然后尝试...

xal
2018/10/18
0
0
用 VSCode 写 python 的正确姿势

最近在学习python,之前一直用notepad++作为编辑器,偶然发现了VScode便被它的颜值吸引。用过之后发现它启动快速,插件丰富,下载安装后几乎不用怎么配置就可以直接使用,而且还支持markdow...

Jinlong_Xu
2017/12/25
0
0
Serverless 实战 —— 快速搭建 SpringBoot 应用 - 知乎

前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计...

我是程序员
10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

采购单品汇总_华南.xlsx

import pandas as pdimport matplotlib.pyplot as pltimport matplotlib as mp1mp1.rcParams["font.family"] = "STFangsong"# 加载《销售》表数据df1 = pd.read_excel(r"C:\Us......

龙玉滕
今天
5
0
OSChina 周五乱弹 —— 一次四千 要4次还能多给一千

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享金志文的单曲《远走高飞》: 版权又回来了现在听歌得好几个软件 《远走高飞》- 金志文 手机党少年们...

小小编辑
今天
7
0
Spring Cloud Alibaba 实战(十) - Spring Cloud GateWay

> 本文主要内容是:为什么要使用网关,整合Gateway,Gateway核心学习:Route,Predicate,Filter,最后使用Gateway聚合微服务请求 先总结至此的架构 1 网关的价值 不使用网关行嘛? 各个请求直接打在...

JavaEdge
今天
4
0
【CKB.DEV 茶话会】第二期:聊聊 CKB 钱包和 Nervos DAO 全流程

CKB.DEV 茶话会第二期:聊聊 CKB 钱包和 Nervos DAO 全流程 为了鼓励更多优秀的开发者和研究人员参与到 CKB 的开发和生态建设中去,我们希望组织一系列 CKB Developer Seminar(CKB.DEV 茶话...

NervosCommunity
今天
4
0
聊聊rocketmq的HAClient

序 本文主要研究一下rocketmq的HAClient HAClient rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/ha/HAService.java class HAClient extends Serv......

go4it
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部