hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 开发工具 - 正文 君子好学,自强不息!

【编程开发工具】vscode怎样调试html

2019-11-20开发工具搜奇网46°c
A+ A-

vscode怎样调试html?

运用Debugger for Chrome举行调试

起首下载对应的插件

Ctrl+Shift+x翻开插件市肆,搜刮chrome即可看到该插件,点击装置->从新加载即可

该插件的设置体式格局分两种,一种是基于当地文件的debug,另一种是基于server-client情势的调试。

当地文件debug即启动chrome读取当地文件,进而依据文件直接衬着出页面

server-client则将待调试的文件加载进入效劳容器中(比方tomcat之类的),一切的文件以效劳的情势供应。

chrome依据效劳的url地点接见文件,以后加载到浏览器。

相干引荐:《vscode教程》

下面离别引见两种体式格局设置要领

1.1.1. 基于当地file设置体式格局调试

在.vscode文件夹之下新建launch.json文件,增加设置以下

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome 当地调试",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "file": "${file}"
    }
  ]
}

设置诠释:

${file}示意翻开当前文件

${workspaceRoot}示意vscode当前加载根目次

launch示意新起一个chrome历程加载该文件

相对launch的attach,示意当前文件载入已有的chrome历程

在调试菜单栏挑选[Launch Chrome 当地调试]选项,点击[f5]或许[fn+f5],即可看到页面

能够看到url搜刮栏上面是file:///开首的地点,示意文件是从当地读取的。以后,一切的

html文件都可这么调试

1.1.2. 基于效劳端设置体式格局调试

1.1.2.1. 启动server端

基于server-client体式格局自然是先要将文件加载到server容器中了,这里不运用tomcat,而是

python的体式格局。

在bash终端,cd进入vscode的根目次,比方我的是~/daily,运转下面指令

cd ~/daily

# 当前目次下文件加载进容器,对外端口为8080,host是本机ip,当地接见运用localhost即可

python3 -m http.server 8080

1.1.2.2. 设置vscode

在launch.json文件中到场下面的设置信息,

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome from http",
"url": "http://localhost:8080/${relativeFile}",
"webRoot": "${workspaceFolder}"
},

${workspaceFolder}示意相对根目次的途径

以后挑选[Launch Chrome from http],点击[f5]或许[fn+f5]即可看到chrome已加载了该文件。同时也从搜刮栏的地点看到,chrome此次走的是http协定接见的文件

1.2. 运用Nodejs调试

运用Nodejs调试的设置体式格局基础和chrome差不多,只是type改一下,细致以下

{
    "type": "node",
    "request": "launch",
    "name": "Node Launch Program",
    "program": "${workspaceFolder}/${relativeFile}"
},

在debugger菜单栏选中[Node Launch Program],然后点击[f5],调试信息会显现在下方

调试掌握台上,就不截图了

假如没有装置nodeJs的话,debian系的电脑能够运转下面指令,

apt install nodejs npm

平常运用apt装置能够致使版本比较落后,你能够运用源码装置、官方的装置管理器或许设置ppa的体式格局.

本人挑选设置ppa的体式格局,运用的是10.x的LTS版本

$ cat /etc/apt/sources.list.d/nodesource.list 
deb https://deb.nodesource.com/node_10.x sid main
deb-src https://deb.nodesource.com/node_10.x sid main

以上就是vscode怎样调试html的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【编程开发工具】vscode怎样调试html

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/282559.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>