VSCode调试JavaScript代码方法

这篇具有很好参考价值的文章主要介绍了VSCode调试JavaScript代码方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文参考了:https://blog.csdn.net/weixin_41922484/article/details/122858565

1.安装Node.js

参考【Win10安装nodejs】

https://blog.csdn.net/xijinno1/article/details/129574351

2. VSCode安装扩展插件

在VSCode的应用商店搜索扩展:Code Runner 和 JavaScript Debugger两个插件,并安装。

Code Runner
 JavaScript Debugger

3.VSCode创建js文件测试

var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);

① 在VSCODE中配置Node.js

建立一个文件夹(如:demo),在文件夹中建立一个js文件(如demo.js),使用VSCODE打开该文件夹,然后按下图操作:

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

编写好JS文件之后,按F5就能直接在控制台查看运行结果了

②右键点击Run Code,在输出窗口即可看到结果。

VS Code 将尝试自动检测您的调试环境,但如果失败,您将不得不手动选择它: Node.js

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档
vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档
vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

③ 按F5启动调试模式。

先在代码行行号前点击,打下一个断点,再按F5启动调试

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

VS Code 将尝试自动检测您的调试环境,但如果失败,您将不得不手动选择它: Node.js

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

可以看到程序停止在了断点所在行,一旦调试会话开始,调试工具栏将出现在编辑器的顶部。

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

继续/暂停F5

单步跳过F10

单步调试F11

单步跳出Shift+ F11

重启Ctrl+ Shift + F5

停止Shift+ F5文章来源地址https://www.toymoban.com/news/detail-566157.html

vscode怎么运行js代码,前端(html+css+js)知识点杂烩,javascript,vscode,开发语言,Powered by 金山文档

到了这里,关于VSCode调试JavaScript代码方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows 下使用 vscode + mingw 完成简单 c 或 cpp 代码的运行与调试

    本文为原链的镜像链接,更新可能不及时,如有能力,请访问原始链接。 基于 VS Code + MinGW-w64 的 C 语言/C++简单环境配置,专致小白 环境: Win10 21H2 19044.1381 + mingw + vscode 1.74.3 + C/C++ Extension Pack 插件 国内镜像盘: 链接 密码:1dcs 简单来说共分为 4 步 下载 mingw , vscode 和 插件 并

    2024年02月08日
    浏览(47)
  • Vscode中运行C#代码的三种方法

    目录 一、Vscode运行(编译运行) 二、dotnet命令(直接运行) 三、基于Code Runner插件搭配dotnet命令(直接运行) 总结 前言 本文基于已经配置好C#编写环境,不涉及C#环境的配置和Vscode及C#相关插件的安装  或者直接适用对应快捷键F5或Ctrl+F5进行编译运行   唯热爱永垂不朽!

    2024年02月12日
    浏览(81)
  • Vscode运行调试文件

    vscode左侧菜单栏点击运行调试icon,点击菜单右侧栏运行和调试按钮,选择node调试器,js文件行数左边点击添加红色断点,运行当前文件 vscode 执行报错 找不到 Node.js 二进制文件“node”: 路径不存在。请确保 Node.js 已安装且位于你的路径中,或者在 launch.json 中设置 “runtimeEx

    2024年02月04日
    浏览(35)
  • vscode 运行调试按钮隐藏如何显示

    如上图所示,python的运行按钮被隐藏了,两种解决方式 解决方式: 第一种:鼠标右击 旁边的按钮,然后勾选“运行和调试”或者点击重置菜单,其他被隐藏按钮同理。 第二种:打开命令面板(win: Ctrl+Shift+P,mac:command+shift+P ),搜索对应的中英文,点击切换即可。

    2024年02月15日
    浏览(34)
  • VSCode Python调试运行:json编写

    对于需要在命令行传参运行的项目,如果想要调试运行,则需要编写对应的launch.json文件这里记录一下json文件的编写格式: 这里主要区分在于记载模块化运行的情况,即使用 python -m module_name 运行的情况,需要填写“module”这一参数,而 不是在“args”中写“-m”

    2024年01月25日
    浏览(44)
  • VSCode使用 - 搭建python运行调试环境

    VSCode是一个优秀的编辑工具,适合代码阅读,代码编辑,甚至配置好之后,可以编译与调试代码。 为了方便编辑,运行python程序,本文就聊聊如何将VSCode搭建为一个python的IDE吧,具备运行与调试python程序的能力。 首先,安装python程序,这样才能进行python开发,我这里安装了

    2024年02月12日
    浏览(72)
  • 【JSDoc&vscode】使用JSDoc、在vscode中开启node调试、使用vscode编写运行Python程序

    JSDoc是JavaScript的一种注释语法,同时通过JSDoc注释也可以规避js弱类型中不进行代码提示的问题 图形展示JSDoc的效果:  上述没有进行JSDoc,然后我们a点什么 是没有任何提示的 上述就是加上 JSDoc的效果 常用的 vscode 其实内置了 jsDoc, 只需输入 /** 然后就会有提示,然后直接按

    2024年02月11日
    浏览(49)
  • VScode 运行编译 + 调试 C/C++,详细教程!!

    MinGW,下载地址,进入页面之后点击下载: 下载的时候按照提示内容,一直点击“continue”即可,直到进入这个页面:把以下出现的选项选中, (注意!)这两个的作用只是在写代码的时候#includestudio.h不报错,可以成功编译C/C++代码,并不能完成调试的功能,如果后续需要调

    2024年02月07日
    浏览(39)
  • 解决VSCode运行或调试python文件无反应的问题

    问题描述 : 最近新装VSCode, 想要跑python文件,按照VSCode指引依次完成python extension的下载、python解释器的选择、调试配置。但却发现无论是运行run(ctrl+F5)还是调试debug(F5),终端terminal都没有反应,悬浮的调试按钮条也只出现了不到1s就消失了。除非巧用终端运行已选代码

    2024年02月16日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包