module.exports = {
    // mode: "development"
   }

把这行代码注释掉

新增一个ts文件

在src目录下新增一个名为Person.ts的文件，内容如下

修改index.ts文件

之前的代码全部注释或删除，新增以下内容

内容准备完成，现在来启动项目实践debug

启动调试

执行yarn start 现在开始调试项目

启动之后我们会发现在终端中会出现这样一个提示，出现这个提示的原因是因为我们在第一步修改的webpack.config.js文件，webpack不知道该以什么模式启动项目了。
mode的类型有两个，分别是development和production,分别代表开会环境和正式环境。稍后在进行配置。

接下来打开浏览器会看到控制台

我们在调用方法的时候传入的参数是undefined,所以报这个错了，我们也知道怎么去改，可是在开发项目的过程中不可能每一个地方都记得特别清楚，我们是需要控制台去精准的提示给我们是哪里报凑了，从上图中我们可以看到是main.js文件的第2行报的错，我们点击它定位到错误位置。

出现在眼前的是这一行压缩的代码，它是打包过的代码，是不利于调试的。我们要使用devtool来解决这个问题

devtool

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

devtool其实就是选择对应的source map，它有很多种，现在来看一下每种都有什么区别。

source-map

这种是比较常见的，设置方法就是在webpack.config.js中修改这个属性，代码如下

module.exports = {
    mode: "development", //恢复设置
    devtool: 'source-map',
   }