vscode Getting Started tutorial (page debugger)

The first time you use a variety suited vscode, need to use all the features seemingly will need to install a separate plug-ins can be used. This makes a lot of first-time vscode friends a bit confused.

Here, I'll take my friends to learn how to use vscode next to the most basic work - pages and start debugging the code

First, install vscode (already installed friend ignored direct the second step)

Download the official website: https://code.visualstudio.com/docs/?dv=win

Wait a few seconds, the box will automatically pop up download

Second, the Chinese plug-in installation

vscode default menu is in English, the Chinese want the form to show friends can search plug [Chinese (Simplified) Language Pack for Visual Studio Code], as shown:

After installation, click reload or restart vscode, both Chinese form to display the menu.

Third, debugging page

1. Configure launch.json

Here you have configured friends do not worry to try, because at this time click on the green Start button after debugging starts, find the page and open, just a browser link failure prompts.

At this point, we need to install similar apache, iis server plug-ins like to run and support page displays in the simulation server.

2. Install the plug [Live Server]

This is the above-mentioned support pages run in the simulation server plugin, as shown:

If the installation is finished left side [reload] prompt, then click the button to reload.

3. Open the html page, debug test

Foundation work is ready, then debug mode there are two kinds :

Use local static pages debugging:

Select the option to configure their own test , open the need to debug the page , press F5 to start debugging, as shown in

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

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

此时我们想使用vscode进行代码调试的需求到这里就已经大功告成了!!!

最后,为大家推荐一个好看的vscode文件图标主题插件:【Material Icon Theme】

效果如图:

 

喜欢本文章的朋友,欢迎关注公众号【程序员在职场】支持一下小编。

 

 

Guess you like

Origin www.cnblogs.com/w821759016/p/11227313.html