手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

chrome如何调试vue

时间:2024-10-11 23:36:41

1、打开Visual Studio Code工具,使用git命令下载一个vue项目

chrome如何调试vue

2、执行npm install命令安装相关依赖包,然后使用项目运行命令,启动项目

chrome如何调试vue

3、在启动过程中,打开Chrome浏览器控制台,可以发现没有vue选项卡

chrome如何调试vue

4、项目启动完毕,打开页面并点击按钮,这时Chrome出现vue选项卡

chrome如何调试vue

5、切换到Vue选项卡,可以查看到Vue的版本以及相关的事件和属性

chrome如何调试vue

6、返回到Vi衡痕贤伎sual Studio Code工具,打开一个vue页面代码,在一个按钮事件中添加debugger

chrome如何调试vue

7、接着返回到浏览器中的Sources选项卡,找到对应的代码并打上断点

chrome如何调试vue

8、再查看右侧断点的情况,发现没有进入到断点中

chrome如何调试vue

9、点击相关的断点图标,激活断点,然后点击界面上的按钮,进入调试阶段

chrome如何调试vue

10、这时界面也出现了断点调试图标,点击图标一步一步调试

chrome如何调试vue
© 手抄报圈