vscode入门使用教程（页面调试）

2021-01-13 本文已影响0人稀释1

VSCode 内部代码调试

配置launch.json

image.png

配置完此处的朋友先不要着急进行尝试，因为此时点击绿色的开始按钮调试启动后，发现页面并打不开，只是个浏览器链接失败的提示。

此时，我们需要安装类似apache、iis之类的服务器插件来支持页面在模拟服务器中运行并显示。

安装插件【Live Server】

这就是上面提到的支持页面在模拟服务器中运行的插件了，如图：

image.png

安装完成如果左侧有【重新加载】的提示，则点击该按钮以重新加载。

打开html页面，进行调试测试

基础工作都准备好了，此时调试模式有两种：

代码 observer.html

<head>
    <script type="text/javascript" src="observer.js"></script>
</head>

代码 observer.js

class Subject{
    constructor(){
        this.subs = []
    }
    addSub(sub){
        this.subs.push(sub)
    }
    notift(food){
        this.subs.forEach(sub=>{
            sub.update(food)
        })
    }
}
class Obsever{
    constructor(name,food){
        this.name = name
        this.food = food
    }
    update(food){
        if(food == this.food){
      
            console.log(this.name + "的外卖" + food)
        }
    }
}

var subject = new Subject();
var tom = new Obsever('tom','地三鲜')
var jack = new Obsever('jack',"红烧肉")

subject.addSub(tom)
subject.addSub(jack)

subject.notift('地三鲜')