vs code php html,vscode如何调试html
vscode如何调试html?
使用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
vs code php html,vscode如何调试html相关推荐
- 【转载】【VSCode】Windows下VSCode编译调试c/c++
转载自:http://blog.csdn.net/c_duoduo/article/details/51615381 懒得自己配置或自己配置出现不明问题的朋友可以点这里: [VSCode]Windo ...
- 【工具】VScode|Linux 中怎么调试 Python 项目比较方便?又名 VScode 怎么调试 Python 项目(兼容环境Ubuntu18.04)
使用过 Anaconda.Jupyter.Pycharm.VScode.VS2022.pdb 这几个 IDE 去编写 python 项目或者维护 python 环境,各有各的优缺点,但 VScode ...
- vscode的调试配置
文章目录 vscode的调试配置文件 调试配置选项 vscode的调试配置文件 vscode的调试配置存储在.vscode文件夹的launch.json文件中.通过以下步骤可以创建一个调试配置: 切换 ...
- Vscode编译调试C++程序
一.简介 本文讲述在windows平台下在Vscode中使用g++编译本地C++程序,并使用gdb调试的方法.可能有些朋友会说:windows上不是已经有visual studio这个最强IDE了吗, ...
- ubuntu中用vscode编译调试C\C++
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/q932104843/article/details/51924900 </div>< ...
- vscode + cmake调试配置
文章目录 前言 Using C++ on Linux in VS Code vscode中编译过程配置 vscode中调试配置 vscode中C/C++配置 实际案例 vscode调试的其他问题 前言 ...
- VScode交叉调试
VScode交叉调试 安装配置调试 1.安装vccode 2.配置 vscode 3.gdb调试配置 4.下面几个选项按自己的实际情况修改: 5.开始调试 安装配置调试 获取所需的交叉编译工具和调试工 ...
- 【VSCode】Windows下VSCode编译调试c/c++【更新】
版权声明:本文为博主原创文章,转载请注明出处. --------– 2017.06.10 更新--------- 便携版已更新,点此获取便携版 用于cpptools插件的配置文件更新 更新的launc ...
- VSCode 开发调试 Blender脚本Addon配置实时生效
一.概述 通常在Blender 学习一段时间后,了解了大概的基本功能后,发现没有有一些操作更简单化或者增添新功能 ,这时大家就会习惯性的寻找插件Addon. 开发插件的时候,有的时候在插件的py文件里 ...
最新文章
- 机器学习入门(05)— 使用 NumPy 实现 3 层简单神经网络
- 庆绿洲创立百天休闲观光游--腐败、情色、绯闻
- python foreach用法_C# 中 foreach 遍历的用法
- (ECC)椭圆曲线加密算法原理和C++实现源码
- 11-Docker Bridge详解
- 三星Galaxy A73显示Geekcbench:或搭载骁龙778G
- 【Elasticsearch】7.9 单字段支持的最大字符数
- TensorFlow安装中遇到的问题
- 工作中JS语法的小整理以及vue小知识的收纳
- 标准BST二叉搜索树写法
- linux下原始套接字编程错误:Operation not supported
- 计算机固态硬盘序列号,固态硬盘检测工具ssdlife pro 2安装教程(附序列号)
- java 操作 led_Java中使用反射机制操作LED
- java计算机毕业设计家庭记账系统源码+数据库+系统+lw文档+mybatis+运行部署
- 小米电视联网后显示无法解析小米电视服务器,小米电视机功能详解 教你轻松使用...
- springboot 加载一个properties文件转换为对象、List和Map数据结构
- Kettle Carte模式
- 机场航班起降与协调管理系统飞机航班(含源码+论文+答辩PPT等)
- 【数据结构】表达式建树
- Vue中gsap库实现数字递增动画