javascript - JavaScript 调试器到 ReactJs

Question

是否可以使用 调试 ReactJS 和/或编译的 JS (Gulp) debugger？

当我构建一个巨大的函数时，我需要使用很多方法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

如果我真的不能debugger在这些情况下使用你们还使用什么其他解决方案？

我的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
});

标签： javascriptreactjsdebugginggulp