首页 开发工具 VSCode vscode怎么使用调试

vscode怎么使用调试

Feb 11, 2020 pm 05:47 PM
vscode 调试

vscode怎么使用调试

1、配置launch.json

2861abeacd8629c96b7e016d57a881a.png

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

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

2、安装插件【Live Server】

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

995304464df86b1f7ce00f8dc743168.png

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

3、打开html页面,进行调试测试

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

使用本地静态页面调试:

选择自己配置的测试选项,打开需要调试的页面,按F5启动调试,如图:

eb449a70597ff01bb82039b40b4da08.png

使用服务器形式进行调试:

此时我们安装的live server就派上用场了,同样打开要调试的页面,鼠标在页面任意地方右键单机,选择“Open with live server”,如图:

c36c56cbc2e2d56595525674456e580.png

完成!

相关学习推荐:vscode教程

以上是vscode怎么使用调试的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么开启后台更新 vscode开启后台更新方法 vscode怎么开启后台更新 vscode开启后台更新方法 May 09, 2024 am 09:52 AM

1.首先,打开界面后,点击左上角的文件菜单2.随后,在首选项栏目中点击设置按钮3.接着,在跳转的设置页面中,找到更新板块4.最后,鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮,并重启程序即可

vscode工作区怎么添加文件 vscode工作区添加文件的方法 vscode工作区怎么添加文件 vscode工作区添加文件的方法 May 09, 2024 am 09:43 AM

1.首先,打开vscode软件,点击资源管理器图标,找到工作区窗口2.然后,点击左上角的文件菜单,找到将文件夹添加到工作区选项3.最后,在本地磁盘中找到文件夹位置,点击添加按钮即可

vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 May 09, 2024 am 10:30 AM

1.首先,打开设置菜单中的settings选项2.随后,在跳转的commonlyused页面中找到terminal栏目3.最后,在该栏目右侧取消勾选usewslprofiles按钮即可

VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 May 09, 2024 am 09:49 AM

1.首先,打开界面后,点击工作区界面2.然后,在打开的编辑面板中,点击文件菜单3.随后,点击首选项栏目下的设置按钮4.最后,鼠标点击勾选CursorSmoothCaretAnimation按钮,保存设置即可

Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 May 09, 2024 am 10:34 AM

1.首先,打开编辑窗口后,点击左下角的配置图标2.随后,在打开的子菜单中点击管理工作区信任按钮3.接着,在编辑窗口中找到该页面4.最后,根据自己的办公需求勾选相关指令即可

Vscode怎么打开动画 Vscode打开动画的方法介绍 Vscode怎么打开动画 Vscode打开动画的方法介绍 May 09, 2024 am 10:28 AM

1.首先,点击打开更多菜单中的settings选项2.然后,找到Features板块下的terminal栏目3.最后,在栏目右侧,用鼠标点击勾选enableanimation按钮以后,保存设置即可

vscode怎么打开智能提交 vscode打开智能提交的步骤 vscode怎么打开智能提交 vscode打开智能提交的步骤 May 09, 2024 am 10:40 AM

第一步,打开vscode软件界面后,点击下方设置菜单中的settings按钮第二步,找到Extensions栏目下的Git选项第三步,点击勾选enablesmartcommit按钮即可

如何使用LeakSanitizer调试C++内存泄漏? 如何使用LeakSanitizer调试C++内存泄漏? Jun 02, 2024 pm 09:46 PM

如何使用LeakSanitizer调试C++内存泄漏?安装LeakSanitizer。通过编译标志启用LeakSanitizer。运行应用程序并分析LeakSanitizer报告。识别内存分配类型和分配位置。修复内存泄漏,确保释放所有动态分配的内存。

See all articles