哈喽大家好，今天来学习一下使用vscode进行前端页面的单步调试。先来看一下整体的运行效果，当点击页面的切换的时候能够进入到打的断点里边，能够进入到buttoview这样的断点里边，这就是今天所学习的内容。该效果是如何实现的？接下来通过两部分内容进行讲解。
·第一步，先从vscode的插件商城里边进行插件的搜索。之前搜索是直接搜上搜索crom，然后找crom插件，但是会发现当前crom插件已经被驱用了，它改用了jacque de bug这样的插件。
点击会发现当前jacque debug这样的插件属于vsgo内置的插件，所以就不需要单独额外的安装了。
·有了这个bug插件插掉之后，接下来就可以点击左侧的运行和调试。先把当前创建的内容删掉，删了之后点击运行和调试。这时候vscod会提示会告诉选择哪一种调试器，可以点击外部应用crom，点击之后vscode会直接创建launchde test这样的配置信息。
·有了配置信息之后就可以进行点击运行和调试进行vue页面的第八个调试了。但是在直接用原声的配置信息会遇到错误，点击看一下整体的运行效果。这时候会发现当前页面是报错的，报错，调试控制台也报了无选无法读取什么的原本映射文件。
主要原因是什么？主要原因是因为直接用vscode创建的jason配置信息指向的url跟前端工程的启动之后的uir地址是不一致的，需要把地址修改成前端工程的端口就可以了。修改完成之后再直接点击运行和调试，这时候会发现ui里面也指向前段工程的地址，点击页面切换的时候会直接跳转到这样的断点里面就可以对页面进行单步的调试了。
今天视频就到这里，如果感觉该视频对你有帮助，记得点击关注和一键三连，下一个视频再见。