vscode 调试_如何使用VSCode调试JS?

6d61c9a5ee296bea8c3a391122079723.gif更多精彩,请点击上方蓝字关注我们!

序言

做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作。

一、环境准备

首先安装好VSCode,准备好一个JS项目,在VSCode中安装插件Debugger for Chrome (如下图操作搜索安装即可)。

9053d32d686bb043eba57fc5e25c18c2.png

二、修改配置文件

1. 使用VSCode打开项目

没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试,如下:

c6a3635f21f42059450070a06fa71212.png

然后,使用VSCode打开上述项目,如下:

06431d7aece347f5226b5e5eda6136db.png

2. 设置断点

9c15f6d34c341c098b0ddb85da3ce8e2.png

按F5键,在弹出的下拉列表中选择Chrome。

7613e9ff8ae7ccedc4ed1a82ffd6a9a4.png

然后打开launch.json配置文件如下:

0407c75898cba38b1083b9facce6a0a5.png

在configurations内部添加如下内容:

{

"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

}

添加后,内容如下:

760e007be7b45a0456acf2b64cec4151.png

3. 更改调试方式

27bf14315a15703551f6b91ecf612f4f.png

4. 调试

如下图,按F5,点击相应的按钮或按响应快捷键即可控制断点执行。

eef9f39c9140041ae04250588b30868b.png

1a4b67e4a080d9df6ae55d38d03b6d16.png

最后

还有问题的朋友,欢迎在评论区给我留言。

04a7f1199e52cd12bc76e5aa70285c7c.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于matlab的信号合成与分解,基于matlab的信号合成与分解

基于matlab的信号合成与分解 - I - 摘 要 为了便于进行周期信号的分析与处理,常要把复杂的周期信号进行分解,即将周期 信号分解为正余弦等此类基本信号的线性组合,通过对这些基本信号单元在时域和频域 特性的分析来达到了解信号特性的目的。本…

python spangt_python怎么爬去spanlt;/span中间标签的内容

展开全部这个要看你使用32313133353236313431303231363533e4b893e5b19e31333363373765的是什么页面解析工具了,html """item1item2"""# 使用 scrapy 的Selectorfrom scrapy.selector import Selector# scrapy 的选择器支持 css和xpa…

php页面空白如何解决,php页面空白怎么回事 php出现空白页的解决方法

当出现php空白页时,怎么查看php报告的错误信息呢?具体方法如下:一、通过配置 php.ini 中的参数设置php的报错级别可以在 php.ini 中适当的位置增加一行error_reporting e_all注: php.ini 中有一些例子,比如本地的 php…

基站位置查询系统_木牛导航网络基站服务免费了!——更便捷、更高效、更省心!...

布谷飞飞劝早耕,春锄扑扑趁初晴。千层石树通行路,一带水田放水声。《山行》-- 姚鼐(Photo by Quang Nguyen Vinh)农业生产作为人类最传统的产业自古以来都讲究及时耕种,即抢农时根据气候适宜而进行季节性生产随着科技的发展,农业生…

php cgi进程很多win2008,php cgi.exe 太多 在 windowserver2008 apache 这个怎么样限制下?...

php cgi.exe 太多 在 windowserver2008 apache 这个怎么样限制下?mip版 关注:61 答案:2 悬赏:70解决时间 2021-02-24 01:48已解决2021-02-23 09:13php cgi.exe 太多 在 windowserver2008 apache 这个怎么样限制下?最佳答案2021-02-23 09:57可以设置最…

wince怎么刷carplay_Carplay支持仪表/HUD显示 宝马为全球超750000辆车发布OTA升级

【太平洋汽车网 新车频道】日前,宝马官方宣布,将从10月19日起为全球超过750000辆汽车提供iDrive 7.0最新版本的最重要的一次OTA升级。据悉,这项升级将有多项新功能加入,并重点支持Apple Carplay将导航等信息显示在HUD抬头显示和全…

php 如何调用redis,php如何调用redis

一、windows下php连接redis1、下载phpredishttps://github.com/nicolasff/phpredis/downloads2、根据你php版本,选择安装vc库,可以通过phpinfo();查看3、安装php_redis.dll模块将下载下来的php_redis模块放到php安装目录下的/ext/中,并在php.…

文本多标签分类python_Scikitlearn多标签分类

我正在尝试使用Scikit学习来学习文本的多标签分类,我正在尝试调整Scikit附带的一个初始示例教程,用于使用wikipedia文章作为培训数据对语言进行分类。我试图在下面实现这一点,但代码仍然为每个返回一个标签,我希望最后一个预测返回…

php命令执行无法重定向输出,php – CodeIgniter 3重定向功能无法正常工作

我正在重新编码和更新我的CMS我已经在CI2工作到CI3,而在我的生活中我无法让我的重定向功能在CI3上为我工作.除了重新设计我的模型之外,我的代码到目前为止与我的CI2代码完全相同.最初我怀疑我的布局钩子是罪魁祸首,但我完全禁用了他,我仍然没有到达任何地方.public function lo…

python read()函数_Python File read()方法

Python File read()方法概述read() 方法用于从文件读取指定的字节数,如果未给定或为负则读取所有。语法read() 方法语法如下:fileObject.read();参数 size -- 从文件中读取的字节数。返回值返回从字符串中读取的字节。实例以下实例演示了 read() 方法的使…

oracle数据库11gr2,Oracle 11g R2 X64数据库安装

最近在安装Linux下的Oracle环境,折腾了很久,遇到了不少问题,最后终于搞定了,于是写下下文记录安装过程1.Linux环境配置准备环境:Linux:cents os 6.5,DB:Oracle 11g R2 X64&#xff0…

oracle ref游标用法,[置顶] Oracle 参照游标(SYS_REFCURSOR)使用

I在这篇文章中介绍如何使用存储过程处理参考游标1.创建必要的表和样例数据CREATE TABLE USER_INFO(User_ID integer primary key,--Primary keyUser_Name varchar2(20),sex varchar2(2));insert into user_info(user_name,sex) values(David.Tian,M);insert into user_info(use…

python教授_Python为何如此优秀?斯坦福教授告诉你!

Python 是一门更注重可读性和效率的语言,尤其是相较于 Java,PHP 以及 C 这样的语言,它的这两个优势让其在开发者中大受欢迎。诚然,它有点老了,但仍是80后啊 —— 至少没有 Cobol 或者 Fortran 那么老。而且&#xff0c…

php数组转集合,php-Laravel-将数组转换回集合

我只想在商品表中获取类别的集合.我的类别表有300个项目.如果在产品表中附加了类别,我只想要一个集合. $categories集合仅应产生约10个类别,因为只有约10个产品具有不同的category_id$products DB::table(products)->groupBy(category_id)->get();foreach($products as …

python 设计模式 观察者_设计模式Python实现-观察者模式

观察者模式(发布-订阅模式 Publish Subscribe Pattern):定义了一种一对多的关系,让多个观察对象同时监听一个主题对象,当主题对象状态发生变化时会通知所有观察者,是它们能够自动更新自己,是一种行为设计模式。观察者模式的结构1,Publisher 会…

oracle loop index,oracle index 聚集因子

简单看一下clustering_factor简单的说CLUSTERING_FACTOR 用于INDEX 的有序度和表的混乱度之间比较b*tree index是经过排序的例如 INDEX中 记录的第一个rowid指向 表所在DATAFILE 中 BLOCK#1 第1行 计数器 记为1,第2个rowid 指向 BLOCK#2 由于改变了块 所以 计数器加…

分析以太网帧结构_传统以太网中的——中继器及集线器

1.1 Repeater 中继器中继器工作在以太网的第一层即物理层, 两端口设备,主要功能是放大信号,从而延长信号在同一网络上传输的长度。中继器的存在主要是解决解决电信号长距离传播过程中的衰减问题,以增加信号强度和传播距离。Figure…

根据oracle入库数据进行告警,Oracle 启动故障案例之--ORA-600 [4193]错误

ORA-600[4193] 这个错误也是与UNDO 有关系,MOS 上有几篇相关的说明文章.一.MOS说明1.1 ORA-600 [4193] WhenTrying To Open The Database [ID 763566.1]SymptomsCopying database from one server to another server and getting an ORA-600 [4193] error when tryi…

html表ge模板_精选甘特图模板,丰富又好用

你听说过甘特图吗?你可能不知道,也有可能是只是听说过但是并不了解。今天我们就来说一说甘特图吧!甘特图其实就是是通过标示出活动顺序和时间间隔来表示某一特定项目的顺序与时间之间的关系的一种图表。与时间表或日程规划表不同的部分是甘特…

js函数提示 vscode_为VSCode / Monaco Intellisence添加JavaScript类型提示

有没有办法暗示VSCode / Monaco的intellisense变量的类型.我有一些像这样的代码var loc window.location;var gl context1.getContext("webgl");var ctx context2.getContext("2d");我看到VSCode知道loc是一个URL但它不知道gl是什么它也不知道ctx是什么…