js debugger

两种方式

第一种：在js代码中加上debugger

class ReactiveEffect {
    constructor(fn, scheduler) {
        this.fn = fn;
        this.scheduler = scheduler;
        this.active = true;
        this.deps = [];
        console.log("创建 ReactiveEffect 对象");
    }
    run() {
        debugger;      
        console.log("run");
        if (!this.active) {
            return this.fn();
        }
        shouldTrack = true;
        activeEffect = this;
        console.log("执行用户传入的 fn");
        const result = this.fn();
        shouldTrack = false;
        activeEffect = undefined;
        return result;
    }
    stop() {
        if (this.active) {
            cleanupEffect(this);
            if (this.onStop) {
                this.onStop();
            }
            this.active = false;
        }
    }
}

这种方式需要在网页中先打开检查，然后再重新打开网页

第二种：在调试台打开

①：点击Sources

②：找到相应的js文件

③：点击代码左侧行数

打上断点之后刷新页面即可看到，在浏览器页面看到如图所示，代表断点在开始执行。

修改node_module中的js源码后必须重新npm run dev 重新运行一下

修改node_module中的js源码后必须重新npm run dev 重新运行一下项目才可以在浏览器的source里看到改过的js源码