vscode 调试参数_如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 javascript 代码,总结了两种方法,分享给大家.
方法一: 在 js 后缀文件中写 javascript 代码.
1. 环境配置:
(1). 需要安装 nodejs (在Bing搜索中输入 nodejs, 找到nodejs官网,然后找到适合你电脑配置的安装包进行下载安装,最后要输入 node -v 和 npm -v 检验是否安装成功)
(2). 可以安装 vscode 扩展包: Code Runner
2. 新建一个 js 后缀的文件,如 hello_world.js ,输入以下内容:
var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);
3. 运行程序
(1) 如果你安装了 Code Runer,那么就可以直接点击右键选择 Run Code 运行代码,就可以在 OUTPUT 窗口上看到运行结果
(2) 在 vscode 的 TERMINAL 终端输入: node hello_world.js 也可以看到 运行结果
(3) 想要按下 F5 进行运行并且调试,那么就要配置好 launch.json 文件. 先点击 Run -> Open Configurations, 输入以下内容
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/hello_world.js",
},
]
}
注意这里的第 11 行的文件名称要改成你自己定义的文件名称,其中的workspaceRoot 表示当前文件路径.
再按下 F5 的时候,记得配置文件一定要选择名为 Launch (和上面的name同名) 的那个配置文件运行,配置了 launch.json 文件,你还可以在 js 文件中打上断点进行调试.如下图所示
方法二: 在 html 后缀文件中写 javascript 代码.
1. 环境配置:
(1) 安装 chrome 浏览器(做前端开发这是通用浏览器)
(2) 安装 vscode 扩展包: Debugger for chrome 和 open in browser
(3) File -> Preferences -> Settings, 输入 breakpoints,找到 Debug: Allow Breakpoints Everywhere,勾上允许在任何文件设置断点(这样才可以在html文件中设置断点)
2. 新建一个 html 后缀的文件,如 a.html ,输入以下内容:
function myFunction()
{
console.log("hello world");
document.getElementById("demo").innerHTML="My First JavaScript Function";
alert("this is a place where can write code.");
}
My Web Page
A Paragraph
Try it
3. 运行程序
(1) 按下 F5 运行并且调试代码,这里主要涉及到 launch.json 文件的配置,先点击 Run -> Open Configurations, 输入以下内容
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "使用本地chrome调试",
"file": "${file}",
"port":8000,
}
]
}
然后在 script 的代码部分打上断点,按下 F5 , 点击 Try it 按钮,你可以看到中间结果了,如下图所示
(2) 鼠标右键点击 Open in Other Browsers, 选择其中 一个浏览器就可以看到结果,再点击按钮出现的网页中的 Try it 按键,就可以调用 script 中 js 的代码的结果. 这里,你也可以在vscode中设置你的默认浏览器,那么你就可以选择Open in Default Browers, 在默认的浏览器中打开, 或者按下快捷键 Alt + B 查看结果. (这种方法不能调试,并且这种方法只能在配置好launch.json后再按下F5之后才可以使用)
(备注: vscode 默认浏览器的设置, File -> Preferences -> Settings, 输入 default browser , 找到 Open-in-browser : Default , 我这里是输入了 : Google Chrome )
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
vscode 调试参数_如何通过vscode运行调试javascript代码相关推荐
- g120xa变频器调试参数_西门子G120XA变频器如何进行快速调试
快速调试一览 启动快速调试并选择应用等级 启动快速调试 前提条件 接通电源. 操作面板显示设定值和实际值. 操作步骤 按下 ESC 键. 按下一个箭头键,直到 BOP-2 显示 SETUP 菜单. 在 ...
- vscode html 格式化_详解VSCode 格式化不符合预期的问题
一句话总结 不同格式化程序执行时长不一样,导致文件格式好后和预期不符. 请务必保持校验(Lint)规则和格式化(Format)规则一致,不然格式化后还是不符合预期是非常讨厌的. 本篇主要讲解怎么调教V ...
- java 结束调试快捷键_键盘快捷键-Eclipse终止调试/运行的捷径是什么?
键盘快捷键-Eclipse终止调试/运行的捷径是什么? eclipse中终止调试/运行的快捷方式是什么? 在"首选项"->"键"下查看时,按Ctrl + ...
- vue中生产模式和调试模式_为什么在生产中进行调试是如此诱人?
vue中生产模式和调试模式 生产调试 为什么在生产中进行调试是如此诱人? 在我的第一份工作中,我要做的任务之一是修复一个错误,该错误过去在非常复杂的生产系统中有时会发生. 那很简单! - 我想. 我将 ...
- 120xa变频器调试参数_最全的变频器基本参数的调试都在这了,看过的电工都学会了!...
点击技成培训置顶,每日7:30准时为您推送 变频器功能参数很多,一般都有数十甚至上百个参数供用户选择.实际应用中,没必要对每一参数都进行设置和调试,多数只要采用出厂设定值即可.但有些参数由于和实际使用 ...
- 搜狗输入法vscode 自动繁体_如何解决VSCode Vim中文输入法切换问题?
据我所知,大部分 windows 用户设置 1033 都解决不了问题,我深受此困扰,但有强迫症的我还是想解决此问题,经过 1 个小时的摸索,终于解决问题: 原因是 windows 版本的 im-sel ...
- vccode运行调试python_VSCODE安装以及使用Python运行调试代码的简单记录
1. VScode安装 官网下载VSCODE https://code.visualstudio.com/ 下载呢windows的x64安装包,安装stable的版本 当前日期 2018.01.15 ...
- idea提高调试超时_如何提高您的调试技能
idea提高调试超时 by Nick Karnik 尼克·卡尼克(Nick Karnik) 如何提高您的调试技能 (How to Improve Your Debugging Skills) All ...
- gdb 扩展 默认参数_默认方法一种扩展旧代码的方法
gdb 扩展 默认参数 如您所知,Java的新版本已于2014年3月18日发布,我将介绍一系列文章来演示其新功能,也许在某些方面,我将谈论我的想法和批评. 我认为重要的第一个功能是"默认方法 ...
最新文章
- 单目深度估计与伪雷达点云、可视化
- NodeJS入门--环境搭建 IntelliJ IDEA
- 以营销型网站为例,网站建设过程中需要注意哪些问题?
- 操作系统和Web服务器那点事儿
- GraphPad Prism软件无响应问题解决办法
- 第四范式连续两年入选CB Insights全球AI百强榜
- 循环队列-队列的顺序表示和实现
- 一文解开java中字符串编码的小秘密
- Android kotlin DataBinding 之 unresolved reference: BR
- vue.js分页组件(新手学习记录)
- 线性结构 —— 分块算法
- 海豚计算机语言,海豚模拟器 V5.0 多国语言安装版
- Deep Learning(深度学习)网络资源
- yolov5数据集标注txt2xml和xml2txt
- NOD 32 企业版远程管理服务器病毒库更新失败_七夕小子_新浪博客
- 十年深圳人,是真的吗?
- 构架高性能的InterBase/FireBird系统
- css怎么修改图片像素,怎么改变图片宽度_word怎么改变图片像素大小
- 表示自己从头开始的句子_从头-一切从头开始的句子
- 计算机基本原理 学习笔记(八)
热门文章
- Arrays.hashCode(Object [])与Objects.hash(Object…)
- javafx弹出式窗口_JavaFX 8的弹出式编辑器
- Java的最新发展– 2018年4月下旬
- 在Docker容器中的Tomcat上运行ADF Essentials
- Angular5 JWT身份验证(Spring Boot安全性)
- 使用Logstash,JDBC将数据聚合并索引到Elasticsearch中
- mapreduce排序算法_MapReduce算法–二级排序
- 执行器的Spring启动和安全性事件
- 跨站点脚本(xss)_跨站点脚本(XSS)和预防
- 本机速度文件支持的“纯” Java大数据存储