VSCode之调试html

一、效果目的
1.在VSCode里，直接F5打开html页面，并且可以在编辑器里，进行断点调试js代码；

二、工具准备
1.VSCode 软件
2.一个js项目
3.VSCode 上装一个插件：Debugger for Chrome
如图
这里写图片描述

三、配置文件更改
1.用VSCode装载项目

2.然后按F5，出现这个框

选择 Chrome

3.然后出现个配置的提示，和打开了launch.json这个文件

在这个文件里添加一段配置信息

,
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        // "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        // "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

结果如图

4.然后，更改调试方式

如图，选择左边的圆形按钮，然后出来这个调试配置管理界面，选择“使用本机 Chrome 调试”。

5.然后在项目的 js 处设置好断点，按 F5，就可以进行断点调试了。

6.接着就 Enjoy!

PS：这种方法只适合普通页面，要是你的js项目里，包含json等游览器不支持本地游览的资源，那么就需要开启服务器，配合这个插件，才能进行断点调试。
---------------------
作者：seanin
来源：CSDN
原文：https://blog.csdn.net/arvin0/article/details/53673351
版权声明：本文为博主原创文章，转载请附上博文链接！

VSCode之调试html相关推荐

vscode断开调试服务器文件,vscode显示等待调试器断开连接
我正在尝试在vscode上调试量角器脚本. 我编辑了launch.json文件,但是调试控制台抛出了下面的错误. vscode调试控制台输出: C:\Program Files\nodejs\node ...
vs code php html,vscode如何调试html
vscode如何调试html? 使用Debugger for Chrome进行调试首先下载对应的插件 Ctrl+Shift+x打开插件商店,搜索chrome即可看到该插件,点击安装->重新加载 ...
【转载】【VSCode】Windows下VSCode编译调试c/c++
转载自:http://blog.csdn.net/c_duoduo/article/details/51615381 懒得自己配置或自己配置出现不明问题的朋友可以点这里: [VSCode]Windo ...
lldb 调试php,linux系统下如何在vscode中调试C++代码
本篇博客以一个简单的hello world程序,介绍在vscode中调试C++代码的配置过程. 1. 安装编译器 vscode是一个轻量的代码编辑器,并不具备代码编译功能,代码编译需要交给编译器完成. ...
AutoJs7、8版本快速接通vscode进行调试脚本
AutoJs7.8版本快速接通vscode进行调试脚本作者:虚坏叔叔博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!
【工具】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 进行调试
如何用VScode 进行调试如题,其实很简单,假定你已经掌握了如何使用cmake,并且已经把对应的执行文件生成了,那么接下来请继续看,不然不太适合你,需要知道如何使用cmake编译文件,当然也有不需 ...
手把手教你用Vscode Debugger调试代码
http://shooterblog.site/2018/05/19/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E7%94%A8Vscode%20De ...
Vscode编译调试C++程序
一.简介本文讲述在windows平台下在Vscode中使用g++编译本地C++程序,并使用gdb调试的方法.可能有些朋友会说:windows上不是已经有visual studio这个最强IDE了吗, ...

VSCode之调试html

VSCode之调试html相关推荐

最新文章

热门文章