vscode入门教程之页面发动与代码调试

发布时刻:2020-02-04 11:04 来历:互联网 当时栏目:web技能类

初度运用vscode时各种不适应,一切需求用到的功用形似都需求独自装置插件才能用。这让许多初度运用vscode的朋友有点莫衷一是。

下面自己就带各位朋友学习下怎样运用vscode来进行最根本的作业——页面发动与代码调试

一、装置vscode(现已装置的朋友疏忽,直接进行第二步)

官网下载地址:https://code.visualstudio.com/docs/?dv=win

稍等几秒钟,会主动弹出下载框

二、装置中文插件

vscode默许是英文菜单,想以中文办法来显现的朋友能够查找插件【Chinese (Simplified) Language Pack for Visual Studio Code】,如图:

装置之后,点击从头加载,或许重启vscode,既能够中文办法显现菜单。

三、页面调试

1. 装备launch.json

装备完此处的朋友先不要着急进行测验,由于此刻点击绿色的开端按钮调试发动后,发现页面并打不开,仅仅个浏览器链接失利的提示。

此刻,咱们需求装置相似apache、iis之类的服务器插件来支撑页面在模仿服务器中运转并显现。

2. 装置插件【Live Server】

这便是上面说到的支撑页面在模仿服务器中运转的插件了,如图:

装置完结假如左边有【从头加载】的提示,则点击该按钮以从头加载。

3. 翻开html页面,进行调试测验

根底作业都预备好了,此刻调试办法有两种:

运用本地静态页面调试:

挑选自己装备的测验选项,翻开需求调试的页面,按F5发动调试,如图

运用服务器办法进行调试:

此刻咱们装置的live server就派上用场了,相同翻开要调试的页面,鼠标在页面恣意当地右键单机,挑选“Open with live server”,如图:

此刻咱们想运用vscode进行代码调试的需求到这儿就现已功德圆满了!!!

最终,为我们引荐一个美观的vscode文件图标主题插件:【Material Icon Theme】

作用如图:

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、