初次使用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】

效果如图:

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

vscode入门使用教程(页面调试)的更多相关文章

  1. ASP.NET + MVC5 入门完整教程八 -—-- 一个完整的应用程序(上)

    https://blog.csdn.net/qq_21419015/article/details/80509513 SportsStore 1.开始创建Visual Studio 解决方案和项目这里 ...

  2. 超实用的Flask入门基础教程,新手必备!

    Flask入门基础教程 Flask简介 Flask是一个轻量级的可定制框架,使用Python语言编写,较其他同类型框架更为灵活.轻便.安全且容易上手.它可以很好地结合MVC模式进行开发,开发人员分工合 ...

  3. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  4. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  5. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  6. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  7. ASP.NET Aries 入门开发教程7:DataGrid的行操作(主键操作区)

    前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...

  8. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  9. ASP.NET Aries 入门开发教程4:查询区的下拉配置

    背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式 ...

随机推荐

  1. 冰多多团队-第一次Scrum例会

    冰多多团队-第一次Scrum会议 注:由于对课程要求的不熟悉,所以本文档为周会后的补充总结文档 会议基本情况 会议时间:3.28 19:00 - 19:30 会议地点:新主楼F座2楼沙发休息处 工作情 ...

  2. 微信小程序获取当前地理位置

    获取用户地理位置,需要用到以下三个api方法:   wx.getSetting() : 获取用户的授权列表信息 wx.openSetting():调起客户端小程序设置界面 wx.getLocation ...

  3. HTML5快速写页面的方法

    1 如果有原型的HTML页面(Axure导出来),可以在此从F12的“查看器”基础上拷贝到一个新文件,继续写代码. 2 利用EditPlus软件的工具 3 使用Dreamweaver CS5,可以直观 ...

  4. 从太空到地球某个位置的轨迹录像制作 | Earth Zoom in/out Tutorial (Record Video)

    视频教程:Google Earth - Earth Zoom in/out Tutorial (Record Video) 下载google earth 在search里输入你想要去的地名 zoom ...

  5. 转载:【TP5.0】TP5 Validate 验证规则

    下面是部分tp5内置的验证规则: 格式验证类: 'name'=>'require' 验证某个字段的值是否为数字(采用filter_var验证),例如: number 或者 integer 'na ...

  6. 解决docx4j 变量替换 由于变量存在样式式或空白字符 导致替换失败问题

    参考文章:https://blog.csdn.net/qq_35598240/article/details/84439929 使用docx4j进行变量替换时 变量(形如:${变量})必须是无格式的, ...

  7. shell 备份mysql

    shell脚本备份mysql,放在crontab中,可以作为每日测试用数据库备份 #!/bin/bash string_time=`date +%Y%m%d%H%M`; file_path=`date ...

  8. (原创)C++ 同步队列

    (原创)C++ 同步队列 同步队列作为一个线程安全的数据共享区,经常用于线程之间数据读取,比如半同步半异步线程池的同步队列. 其实做起来比较简单,要用到list.锁和条件变量,条件变量的作用是在队列满 ...

  9. redis报错OOM command not allowed when used memory > 'maxmemory'

    登录到redis上查询 ./redis-cli -h IP -p port -a passwd redis>info memory 查询,内存已耗尽 查询配置文件,发现之前配置最大内存的策略设置 ...

  10. 查看当前页面的jsp文件【我】

    方法一:可以通过看html类型的请求 方法二:对于有些嵌入的子页面,也可以通过,鼠标右键——此框架——查看框架源代码的方式,直接找到对应的jsp 直接就可以看到对应的jsp: