JavaScript调试器对JS的反应

是否可以使用

调试器
调试ReactJS和/或编译的JS（Gulp）

当我构建一个包含很多方法的巨大函数时，我需要使用
debugger
查看我的函数流，我尝试使用
VSC
插件进行调试，但我真的不知道如何使用它们

class Human {
    constructor(object){
        this.data = object;
        this.name = this.data.name;
        this.age = this.data.age;
        this.gender = this.data.gender;
    }

    talk = function(string){
        console.log(`A ${this.gender} is saying: ${string}`)
    }

    birthday = function(int){debugger // i really like using debugger for methods
        this.age = this.age += int;
    }
}

const person = new Human({
    name: 'Sara',
    age: 19,
    gender: 'Female'
})

person.talk('Hello') // A Female is saying: Hello
person.birthday(1) // When compiled the debugger is removed

如果我真的不能在这些场景中使用
调试器
，你们还使用什么解决方案

My
gulpfile.js

const gulp = require('gulp');
const babel = require('gulp-babel');
const cssnano = require('gulp-cssnano');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

const myFiles = [
    './app/js/vendors/*.js',
    './app/js/controller.js',
    './app/js/functions.js',
    './app/js/model.js',
    './app/js/view.js'
]


gulp.task('sass', function () {
    return gulp.src('./app/styles/*.scss')
        .pipe(sass())
        .pipe(cssnano({zindex: false}))
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/css'))
})


gulp.task('js', function () {
    return gulp.src(myFiles)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
})

gulp.task('go', function(){
    gulp.watch('./app/styles/*.scss', gulp.series('sass')),
    gulp.watch('./app/js/**/*.js', gulp.series('js'));
    return
});

您的示例没有使用
生日
方法。你想用这个例子展示什么？“可能吗”。。。当然调用生日方法并遍历itOk。我更新了问题您是否特别需要在vscode中进行调试？也许您的gulp构建配置会删除您的
调试器
语句。您是否有特定于开发的构建配置（输出sourcemaps并且不会最小化代码）？没有，我刚开始使用Gulp，所以还没有真正尝试过，但是ReactJs呢？编译时不删除调试器？