vscode调试html文件,vscode调试html文件

1. vscode调试html文件

主要说明使用使用Debugger for Chrome插件如何配置，以及Nodejs的方式调试.

本文的配置方式是基于deepin系统的，适用于所有debian系的Linux系统

1.1. 使用Debugger for Chrome进行调试

首先下载对应的插件

Ctrl+Shift+x打开插件商店，搜索chrome即可看到该插件，点击安装->重新加载即可

该插件的配置方式分两种，一种是基于本地文件的debug,另一种是基于server-client模式的调试。

本地文件debug即启动chrome读取本地文件，进而根据文件直接渲染出页面

server-client则将待调试的文件加载进入服务容器中(例如tomcat之类的),所有的文件以服务的形式提供。

chrome根据服务的url地址访问文件，之后加载到浏览器。

下面分别介绍两种方式配置方法

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

1.3. 参考

Vscode调试C的多文件工程配置

关于Vscode的C语言的单文件调试,可以参见VScode调试C语言的设置(win10,Linux),里面已经说明基本的配置和使用. 下面说明一下如何调试多个文件的工程,首先写一个简单的工程,其中工程 ...

使用VSCode调试单个PHP文件

突然发现是可以使用 VSCode 调试单个 PHP 文件的,今天之前一直没有弄成功,还以为 VSCode 是不能调试单文件呢.这里记录一下今天这个"突然发现"的过程. 开始,是在看 ...

VSCode调试go

VSCode调试go语言出现:exec: "gcc": executable file not found in %PATH%   1.问题描述 由于安装VS15 Preview ...

【转】vscode调试运行c#详细操作过程

[转]vscode调试运行c#详细操作过程 主要命令: //路径跳转cd //新建项目dotnet new console -o 路径 //运行dotnet run //用于发布exe

使用vscode调试小段的typescript代码

最近在学习typescript.学习 嘛,当然免不了各种练习,试错.那么使用vscode就可以很方便的做到. 首先是安装node.js.我们知道,node.js提供了js脱离浏览器的执行平台.node ...

vscode 调试 TypeScript

安装 typescript 依赖 npm install typescript --save-dev 目录结构: 添加 tsconfig.json 主要是将 sourceMap 设置为true. { ...

vscode 调试node.js

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...

VSCode调试配置

http://code.visualstudio.com/docs/editor/debugging#_launch-configurations VSCode内置Node.js运行时, 能调试jav ...

随机推荐

Robot Framework--05 案例设计之流程与数据分离

转自:http://blog.youkuaiyun.com/tulituqi/article/details/7651049 这一讲主要说一下案例设计了.还记得我们前面做的case么?先打开浏览器访问百度,输入关 ...

ThinkPHP - 图片水印

图片添加水印 可以通过使用Image类的水印方法给图片添加水印支持,例如:water 给图片添加水印 用法   water($source, $water, $savename=null, $alph ...

浅谈postgresql的GIN索引(通用倒排索引)

1.倒排索引原理 倒排索引来源于搜索引擎的技术,可以说是搜索引擎的基石.正是有了倒排索引技术,搜索引擎才能有效率的进行数据库查找.删除等操作.在详细说明倒排索引之前,我们说一下与之相关的正排索引并与之 ...

hadoop2.5的伪分布式安装配置

一.windows环境下安装 根据博主写的一次性安装成功了: http://blog.youkuaiyun.com/antgan/article/details/52067441 二.linux环境下(cento ...

centos 配置.Net core 环境并部署dotnet Core文件

一.配置环境[Microsoft dotnet Core] 1) Add the dotnet product feed sudo rpm -Uvh https://packages.microsof ...

conda 常用命令

conda search --full --name python conda update -n base conda //update最新版本的conda conda create -n xxxx ...

C# test

//测试对象集合序列化 public void jsonTest() { List list = new List(); ...

WEB-WELCOME-FILE-LIST

当用户在浏览中输入的UTL不包含某个servlet 名或JSP页面的时候,welecome-file-list元素可以指定默认的文件. (即也就是输入:http://hostip:port/webAp ...

2013ACM-ICPC杭州赛区全国邀请赛——Random Walk

pid=4579" style="background-color:rgb(51,255,51)">题目链接 题意: n个点.依照题中给的公式能够求出随意两个点转移 ...

【matlab】生成列是0-255渐变的图像

图像大小:640×512 8位灰度图 %% 生成图像 %大小:* %类型:灰度图 %灰度值:列按照0-255渐变,故命名为column shade. clc,clear all,close all; ...