vscode调试html文件

  • 1. vscode调试html文件

    • 1.1. 使用Debugger for Chrome进行调试

      • 1.1.1. 基于本地file配置方式调试
      • 1.1.2. 基于服务端配置方式调试
        • 1.1.2.1. 启动server端
        • 1.1.2.2. 配置vscode
    • 1.2. 使用Nodejs配置调试
    • 1.3. 参考

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 and NoteBook for JavaScript | NodeJS

原文地址:https://www.cnblogs.com/Franken-Fran/p/debugger_in_vscode.html

时间: 2024-10-28 21:35:52

vscode调试html文件的相关文章

使用VSCode调试单个PHP文件

我的博客原文:https://wiki.feiffy.cc/Blog:使用VSCode调试单个PHP文件 突然发现是可以使用 VSCode 单个文件的,今天之前一直没有弄成功,还以为 VSCode 是不能调试单文件呢.这里记录一下今天这个"突然发现"的过程. 开始,是在看 <Modern PHP> 这本书,看到 ''Built-in HTTP Server'' 一节,自己测试了启动PHP内置服务器软件的命令:php -S localhost:4000,成功看到浏览器页面显示

VSCode调试go

VSCode调试go语言出现:exec: "gcc": executable file not found in %PATH% 1.问题描述 由于安装VS15 Preview 5,搞的系统由重新安装一次:在用vscdoe编译go语言时,出现以下问题: # odbcexec: "gcc": executable file not found in %PATH%exit status 2 2.解决方案 2.1 mingw 64 MinGW分为较早开发的MinGW32和之

vscode 调试node.js

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

使用vscode调试小段的typescript代码

最近在学习typescript.学习 嘛,当然免不了各种练习,试错.那么使用vscode就可以很方便的做到. 首先是安装node.js.我们知道,node.js提供了js脱离浏览器的执行平台.node.js可以在官网下到,安装的时候下一步下一步就可以了. 使用node.js的npm包管理工具安装插件.打开cmd输入一下命令安装全局插件(全局插件好像电脑上任何文件夹都可以访问,不过局部安装可以用tsconfig文件灵活的控制使用插件版本): npm install -g ts-node npm i

win10下使用vscode调试python输出中文乱码的解决办法

今天在vscode中调试一个python脚本时发现中文乱码了,折腾了好一会儿才找到原因,记录一下. 很简单的一句代码测试一下: # -*- coding: utf-8 -*- print('乱码不?') 文件编码设置的也是utf-8,但是调试就是乱码,网上看大都是说设置PYTHONIOENCODING=UTF8的环境变量,尝试过发现还是不行. 其实问题在于windows下的cmd或者PS终端都是默认GBK编码,VSCODE调试时是调用的cmd的,如果把文件头和编码都改成GBK就不会乱码了,但是考

vscode 调试 TypeScript

安装 typescript 依赖 npm install typescript --save-dev 目录结构: 添加 tsconfig.json 主要是将 sourceMap 设置为true. { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": true, "outDir

vscode调试php

xdebug调试vscode 下载xdebug.dll扩展库 php.ini配置 1 [XDebug] 2 xdebug.remote_enable = 1 3 xdebug.remote_autostart = 1 4 zend_extension="D:\phpstudy-2018\PHPTutorial\php\php-5.5.38\ext\php_xdebug.dll" vscode 安装插件 php debug,php xdebug  1 add configuration:

gdb调试core文件

什么是Core Dump?Core的意思是内存, Dump的意思是扔出来, 堆出来.开发和使用Unix程序时, 有时程序莫名其妙的down了, 却没有任何的提示(有时候会提示core dumped). 这时候可以查看一下有没有形如core.进程号的文件生成, 这个文件便是操作系统把程序down掉时的内存内容扔出来生成的, 它可以做为调试程序的参考.core dump又叫核心转储, 当程序运行过程中发生异常, 程序异常退出时, 由操作系统把程序当前的内存状况存储在一个core文件中, 叫core

linux系统产生和调试coredump文件

系统配置了coredump后,当程序异常终止时操作系统会在指定的目录下按指定的文件名格式产生一个core文件.core文件是程序内存映像以及相关的调试信息,通过gdb调试coredump文件可以知道导致程序异常终止的原因. 1.系统配置coredump 首先是打开coredump,通过ulimit命令看coredump是否开启: [[email protected] coredump]# ulimit -a core file size (blocks, -c) unlimited data s