VScode 调试JavaScript两种方式

最新推荐文章于 2024-07-12 11:17:07 发布
最新推荐文章于 2024-07-12 11:17:07 发布
阅读量5.6k 收藏 39
点赞数 2
分类专栏： 学习记录 文章标签： vscode js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yokattasama/article/details/110674268
版权

一、使用浏览器调试

  1. 安装Live Server 和 Debugger for Chrome

在这里插入图片描述
在这里插入图片描述
2.配置Live Server
在这里插入图片描述
在这里插入图片描述
3.使用Live Server 运行项目获取端口号
在这里插入图片描述
记住获取的端口号
记住端口号
4. 点击JavaScript文件开始调试
在这里插入图片描述
vscode会自动生成一个调试配置文件，将launch.json中url属性中的端口号改为刚才Live Server 生成的端口号，保存
在这里插入图片描述
接下来就可以开始调试了
在这里插入图片描述
在这里插入图片描述

二、使用Nodejs调试

1.打开代码，项目文件夹，如图选择运行并调试，选择nodejs环境即可开始调试
在这里插入图片描述
在这里插入图片描述

Yokattasama
关注
专栏目录
vscode 调试 C++/JavaScript
墨鱼菜鸡
07-11 406
Microsoft Visual Studio Code：https://blog.csdn.net/freeking101/article/details/86715578 IntelliJ IDEA：https://www.jetbrains.com/products/ 在调试 JavaScript 代码时， 其中 三种 比较 简单： 1.使用...
如何通过vscode运行调试javascript代码
10-15
主要介绍了如何通过vscode运行调试javascript代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
VSCode调试JavaScript代码方法
weixin_41922484的博客
02-10 9912
目录1. Win10安装nodejs2. VSCode安装扩展插件3. VSCode创建js文件测试 1. Win10安装nodejs nodejs下载地址：http://nodejs.cn/download/ 。 next默认安装即可。安装完毕后cmd输入node -v，查询到版本号说明安装成功。如果查询不到版本号，检查一下Path环境变量。 2. VSCode安装扩展插件 在VSCode的应用商店搜索扩展：Code Runner 和 JavaScript Debugger 两个插件，并安装。 3. .
如何在VSCode中进行JavaScript调试
最新发布
sg_knight的专栏
07-12 965
在JavaScript开发中，调试是一个关键的过程，它帮助我们理解和修复代码中的问题。Visual Studio Code（VSCode）以其丰富的扩展和内置调试工具，为JavaScript开发者提供了强大的支持。本文将详细介绍如何在VSCode中进行JavaScript调试。
如何在VSCode中调试JavaScript代码（补充）
明月看潮生的博客
03-22 913
如何在使用Edge浏览器的情况下，在VSCode中调试JavaScript代码。字段应设置为你的网页所在的URL，字段指向你的项目根目录。
JavaScript代码如何在VScode进行调试？
qiacrkeng的博客
11-13 9148
JavaScript代码如何在VScode进行调试？ 文章目录JavaScript代码如何在VScode进行调试？1.使用Node.js首先，到官网下载node下载好安装之后，点击VScode左侧的工具栏中的调试。接着下拉选项，选择Node.js。选择一个当前js“包含”的目录，可以是父目录，会把完整目录自动生成，但不能是不想关的目录（兄弟目录非父目录）。最后点击调试或者是按F5即可运行JavaScript代码，可以在代码行左侧添加红点断点，即可逐步进行调试。2.利用Live Server插件（本地服务器）
vscode中调试JavaScript代码
qq_47846809的博客
06-17 281
（1）打开Settings，在搜索框输入node debug，找到下图所示进行修改。（2）在终端打开需要调试的js文件路径，输入命令。
基于VSCode调试网页JavaScript代码过程详解
10-15
通过这两种配置，你可以根据需要选择合适的调试方式。在调试过程中，你可以利用VSCode提供的断点、单步执行、变量查看、调用堆栈等工具，有效地定位和解决问题。 总结来说，VSCode与“Debugger for Chrome”插件的...
vscode中调试，运行javascript
弟弟的博客
01-13 2092
在vscode中按下F5，可以选择node环境执行JavaScript 设置F5执行当前文件 在根目录下新建 .vscode 文件夹，新建文件 launch.json 写如下配置 重点修改： "program": "${file}" { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0",
如何在vscode中使用自带的工具调试js代码
奔跑的小猪仔
07-01 1280
在项目目录下打开这个json文件 修改为如下： "configurations": [ { "type": "node", "request": "launch", "name": "Launch Places", "program": "${workspaceFolder}\\te.js" //改成对应的要调试的文件名 } ] ......
2. vscode调试JavaScript代码
草木红的博客
03-17 286
在扩展中查找 debugger for chrome插件，点击安装 vscode选择引用js的html所在的文件夹后，配置launch.json文件 配置launch.json文件，注意下边的Chrome 安装路径和html文件的名字 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问:...
vscode调试JavaScript代码
热门推荐
CodingBleeding的博客
03-30 2万+
在vscode中配置js文件的调试环境
VSCode配置调试JavaScript代码
小火车况且况且况且的博客
02-22 1328
官网说明调试点击行号边上的空白区域就可以添加标记 按下F5按钮出现调试工具，图标代表的意思和浏览器的调试工具一致官网说明
vs code 如何配置运行JavaScript代码看这一篇就够了！！！
一个记录的博客
12-20 7303
本文介绍了在visual stdio code 如何配置执行JavaScript代码。希望对看到本文的你有帮助。上一篇 Linux命令——压缩和解压缩下一篇 待定上一篇 Linux命令——压缩和解压缩下一篇 待定。
vscode之调试js
12-08 1万+
使用vscode 可以直接对js文件进行调试，好强大。今天试了一把，很爽。 首先安装vscode 然后直接写一段js文件： 然后F5调试，选择nodejs 会有个配置文件，我是这么配置的： 如果想调试当前的文件，使用这个配置即可。 { // Use IntelliSense to learn about possible attributes. // Hov...
vscode 调试 js
彻底拆分，一切可控！
05-25 2683
1.使用 chrome 调试页面 这种方式其实不需要使用 vscode 来调试页面，vscode 只是我们的编辑器，我们使用 vscode 来编辑我们的页面，然后通过 vscode 在 chrome 中打开我的页面。 步骤如下： 1.安装插件：open in browser 2.在要调试的页面上右键选择 open in browser 其中第一个选项是在默认浏览器中打开，第二个选项是在其他浏览器中打开 3.在 chrome 中打开开发者工具 2.使用 vscode 调试页面 使用 vscode 调试页
VSCode运行JavaScript代码
weixin_30575309的博客
09-22 4285
方式一(推荐): 安装插件 open in window, 然后option+b 转载于:https://www.cnblogs.com/hankleo/p/11565599.html
【VScode】使用VScode内置的调试控制台来调试JS
前端博客典中典
03-02 4391
使用VScode内置的调试控制台来调试JS
vscode 运行 JavaScript
08-22
要在VSCode中运行JavaScript代码，你可以按照以下两种方法之一进行操作： 方法1： 首先，确保你已经安装了VSCode和Node.js。 然后，打开VSCode，点击左侧的“文件”菜单，选择“新建文件”。 在新建的文件中，输入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值