您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

如何使用VSCode调试JS?

时间:2020-09-11 10:43:05  来源:  作者:

序言

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

一、环境准备

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

如何使用VSCode调试JS?

 

二、修改配置文件

1. 使用VSCode打开项目

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

如何使用VSCode调试JS?

 

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

如何使用VSCode调试JS?

 

2. 设置断点

如何使用VSCode调试JS?

 

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

如何使用VSCode调试JS?

 

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

如何使用VSCode调试JS?

 

在configurations内部添加如下内容:

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

添加后,内容如下:

如何使用VSCode调试JS?

 

3. 更改调试方式

如何使用VSCode调试JS?

 

4. 调试

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

如何使用VSCode调试JS?

 


如何使用VSCode调试JS?

 

最后

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



Tags:VSCode   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1. vscode 简介vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editp...【详细内容】
2021-04-27  Tags: VSCode  点击:(279)  评论:(0)  加入收藏
在程序员圈子里,Visual Studio Code(以下简称VSCode)可以说是目前最火的代码编辑器之一了。...【详细内容】
2021-03-10  Tags: VSCode  点击:(290)  评论:(0)  加入收藏
0.引言本篇文章主要讲解vscode安装和测试,主要是利用vscode可以模拟本地服务器,可以直接写一些简单的前端demo,便于演示。 1.vscode安装vscode官网连接地址:https://code.visual...【详细内容】
2020-12-28  Tags: VSCode  点击:(213)  评论:(0)  加入收藏
概述vscode 支持远程开发,也就是源代码在远程服务器上,开发者在本地进行开发调试,远程服务器可以是 Linux,而本地可以使用 windows 环境,图示如下 请注意:本地是没有代码的这样的...【详细内容】
2020-12-18  Tags: VSCode  点击:(202)  评论:(0)  加入收藏
VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。1.VSCode下载VSCode下载链接: https://code.visua...【详细内容】
2020-11-10  Tags: VSCode  点击:(114)  评论:(0)  加入收藏
大家好我是lemon, 马上进入我们今天的主题吧。又见VsCodeVisual Studio Code(简称VS Code)是一个由微软开发,同时支持Windows 、Linux 和 macOS 等操作系统的免费代码编辑器,在2...【详细内容】
2020-10-09  Tags: VSCode  点击:(70)  评论:(0)  加入收藏
序言做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作。一、环境准备首先安装好VSCode,准备好一个JS项...【详细内容】
2020-09-11  Tags: VSCode  点击:(104)  评论:(0)  加入收藏
RTOS 之类的实时嵌入式操作系统使嵌入式系统的编程更简单• 来源:linux.cn • 作者:Seth Kenlon • 译者:SilentDawn •(本文字数:3405,阅读时长大约:5 分钟)物联...【详细内容】
2020-07-29  Tags: VSCode  点击:(82)  评论:(0)  加入收藏
环境:远程系统 : deepIn 15.11本地系统:windows 7nodejs : 12.13.01.程序部署将nodejs程序同时放到远程系统和本地系统$ tree.├── index.js└── node_modules └── ex...【详细内容】
2020-06-26  Tags: VSCode  点击:(96)  评论:(0)  加入收藏
# vscode如何优雅的拥抱eslint[vue-admin-beautiful](https://github.com/chuzhixin/vue-admin-beautiful)开源了不到两个月收获了![social](https://img.shields.io...【详细内容】
2020-05-13  Tags: VSCode  点击:(55)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条