如何在VScode对JS代码进行调试

最新推荐文章于 2024-04-06 14:00:00 发布
最新推荐文章于 2024-04-06 14:00:00 发布
阅读量3.4k 收藏 11
点赞数 2
文章标签： 编辑器 visual studio javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44676935/article/details/104965103
版权

如何在VScode对JS代码进行调试？

使用VS code对JS进行Debug，需要安装一个插件，这个插件是根据你所使用的浏览器来的，不同浏览器对应插件！

浏览器插件
ChromeDebugger for Chrome
FirefoxDebugger for Firefox
Microsoft EdgeDebugger for Microsoft Edge

常用的浏览器也就这些哈！我是使用的Debugger for Chrome，此次演示也是用它，其实都一样！
在这里插入图片描述

实现站内打开预览界面

实现了编译器内调试，不在编译器中打开预览简直就是毫无意义！为了实现更好的开发体验，我们还需要一个插件！

Live Server是一款在浏览器预览插件，它还可以实现随着代码的不断改变，实现实时更新！相信都用过吧！
在这里插入图片描述

具体步骤

将Debugger for Chrome和Live Server插件下载…

第一步：打开调试，选择调试环境！

在这里插入图片描述

创建以后会出现一个配置文件

当我们创建好后，我们是不能直接去使用的，因为你会发现8080这个端口打不开，会出先错误！
在这里插入图片描述

第二步：更改预览端口号

使用Live Server插件打开一个html文件，查看端口号。

打开launch.json配置文件更改端口号

第三步：运行

该有的功能基本都能实现
在这里插入图片描述

打开编辑器中打开浏览器预览

找到设置，然后在搜索栏-搜索“ open-in”
在这里插入图片描述

GaoYang-笔迹
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用VSCode调试JS？
weixin_49669470的博客
09-10 1141
序言 做前端开发的朋友经常需要使用Visual Studio Code编辑代码，很多朋友就想在VSCode调试JS代码，下面我们就介绍下如何配置操作。 一、环境准备 首先安装好VSCode，准备好一个JS项目，在VSCode中安装插件Debugger for Chrome （如下图操作搜索安装即可）。 二、修改配置文件 1. 使用VSCode打开项目 没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试，如下： 然后，使用VSCode打开上述项目，如下： 2. 设置断点 按F5
怎么在vscode中调试_在vscode中调试nestjs
weixin_26717681的博客
09-28 2835
怎么在vscode中调试This article will take a look at three different techniques for debugging a NestJS application with VSCode. 本文将介绍使用VSCode调试NestJS应用程序的三种不同技术。 For a quick introduction to NestJS, check out...
vscode-js-debug：VS Code JavaScript调试器
02-11
即将推出的新的VS Code JavaScript调试器。 此扩展程序可调试Node.js和Web应用程序（在Edge和Chrome中），最终将成为VS Code的内置调试器。 默认情况下，此扩展在1.46.0之后的所有VS Code版本上都安装，但是未启用。 您可以通过在用户设置中添加"debug.javascript.usePreview": true来启用它。 然后，您应该能够运行和调试现有程序，而无需更改启动配置。 如果不能，请提出问题。 每晚扩展 VS Code的发行版本在发行时包含js-debug版本，但是您可能需要安装我们的每晚版本，以获取最新的修补程序和功能。 每晚构建都在PST每天下午5点运行（有更改）（ ）。 获取构建： 打开扩展视图（ctrl + shift + x）并搜索@builtin @id:ms-vscode.js-debug 右键单击JavaScrip
vscode debug chrome
weixin_30389003的博客
06-28 399
{ "version": "0.2.0", "configurations": [{ "name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开 "type": "chrome", "request": "launch", "url": "${file}", ...
vs code 如何配置运行JavaScript代码看这一篇就够了！！！
最新发布
程序员阿皓的博客
04-06 761
本文介绍了在visual stdio code 如何配置执行JavaScript代码。希望对看到本文的你有帮助。
VSCode调试JavaScript代码方法
我都博客
03-16 6700
继续/暂停F5 单步跳过F10 单步调试F11 单步跳出Shift + F11 重启Ctrl + Shift + F5 停止Shift + F5
vscode之调试js
12-08 1万+
使用vscode 可以直接对js文件进行调试，好强大。今天试了一把，很爽。 首先安装vscode 然后直接写一段js文件： 然后F5调试，选择nodejs 会有个配置文件，我是这么配置的： 如果想调试当前的文件，使用这个配置即可。 { // Use IntelliSense to learn about possible attributes. // Hov...
JavaScript代码如何在VScode进行调试？
qiacrkeng的博客
11-13 8376
JavaScript代码如何在VScode进行调试？ 文章目录JavaScript代码如何在VScode进行调试？1.使用Node.js首先，到官网下载node下载好安装之后，点击VScode左侧的工具栏中的调试。接着下拉选项，选择Node.js。选择一个当前js“包含”的目录，可以是父目录，会把完整目录自动生成，但不能是不想关的目录（兄弟目录非父目录）。最后点击调试或者是按F5即可运行JavaScript代码，可以在代码行左侧添加红点断点，即可逐步进行调试。2.利用Live Server插件（本地服务器）
基于VSCode调试网页JavaScript代码过程详解
10-15
在现代Web开发中，调试JavaScript代码是至关重要的环节，Visual Studio Code (VSCode) 提供了强大的工具来帮助开发者高效地进行这一工作。本篇文章将详细介绍如何基于VSCode调试网页中的JavaScript代码，无论你是...
如何通过vscode运行调试javascript代码
10-15
本篇文章将详细介绍如何在VSCode中运行和调试JavaScript代码，分为两种方法：直接在JS文件中编写代码以及在HTML文件中嵌入JavaScript代码。 **方法一：在JS文件中编写JavaScript代码** 1. **环境配置**： - 首先...
利用types增强vscode中js代码提示功能详解
10-19
主要给大家介绍了如何增强vscode中js代码提示功能的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
利用vscode调试编译后的js代码详解
10-18
看了网上好多在vscode上调试javascript的代码，总是出现问题，索性自己写一个，下面这篇文章主要给大家介绍了关于如何利用vscode调试编译后的js代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者...
[从零开发JS应用] 如何在VScode中配置Javascript环境，常见的调试方法有哪些？
Viviane_2022的博客
09-21 1万+
在程序有BUG/缺陷，需要修复时，断点调试是发现缺陷的重要方法。对于初学者而言，断点调试还有另外一个用途：帮助理解程序背后的逻辑。本文以下述程序为例，讲述在Visual Studio Code中的断点调试方法。
如何在VSCode中调试JavaScript代码（补充）
明月看潮生的博客
03-22 683
如何在使用Edge浏览器的情况下，在VSCode中调试JavaScript代码。字段应设置为你的网页所在的URL，字段指向你的项目根目录。
如何用VsCode进行Debug
热门推荐
weixin_42962086的博客
03-04 6万+
如何用VsCode进行Debug 本文以Mac系统，C++程序为例，进行Debug操作 安装插件 不同的语言需要安装的debug插件不一样，如下 Debug页面 VsCode的Debug页面如下 配置Debug环境 点击左侧的Debug图标，默认情况下，展示的是配置提示 点击图中的【运行和调试】，选择【GDB/LLDB】环境，之后在下拉列表选择【默认配置】，系统自动创建launch.json文件，用于记录debug的配置信息，其中最主要的是配置调试的程序，program字段，选择要debug运行的
深度剖析 VS Code JavaScript Debugger 功能及实现原理
淘系技术
06-23 3276
本文将从 VSCode JavaScript Debugger 的功能入手，从源码角度分析其实现对应功能所使用的技术手段及优秀的代码设计，让大家对其中的功能及实现原理有大致理解。前言调试（Debugging）作为软件开发环境中无法缺少的部分，长期以来都作为评价一款 IDE 产品优劣的重要指标，VS Code 在 1.47版本「1」中废弃了旧版本的 NodeDebu...
深入讲解 VsCode 各场景高级调试与使用技巧
2201_75715995的博客
01-05 906
数据面板可以查看所有变量在变量上点击右键，可以设置变量值、复制变量值等操作聚焦于数据面板时，可以通过键入值来搜索过滤。点击下图所示按钮可以控制是否筛选。可以将变量添加到监听面板，实时观察变量的变化。在变量面板通过右键选择“添加到监视”将变量添加到监听面板也可以直接在监听面板选择添加按钮进行变量添加添加变量后就可以实时监听变量的变化。
VSCode中的debug调试
m0_60627063的博客
02-04 2316
1. 通过浏览器实现代码调试;2. 通过vscode进行代码调试
使用Vscode进行Vue的debug调试功能，研究了一天终于可以了，同时解决Unbound breakpoint灰点问题
04-21 2万+
实现的结果：在vscode中可以直接debug上一步下一步等，同时在浏览器里面也可以执行这样的操作，这样的debug功能，谁不想要呢？谁还没有呢？是不是你，哈哈哈哈。
vscode调试网页js代码
08-30
要在VSCode中调试网页JS代码，可以按照以下步骤进行操作： 1. 安装VSCode：首先，确保在计算机上安装了VSCode编辑器。可以去官方网站下载并安装VSCode。 2. 安装插件：在VSCode编辑器中，打开扩展面板（可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值