vsCode 添加浏览器调试和js调试的方法

1、直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件)

在launch.json文件中的配置如下:

{

    "version": "0.2.0",

"configurations": [{

"name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开

"type": "chrome",

"request": "launch",

"url": "${file}",

"sourceMaps": true,

"webRoot": "${workspaceRoot}"

},

{

"name": "nodeLauch", //单独调试js,即可以直接运行js

"type": "node",

"request": "launch",

"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件

"stopOnEntry": false,

"args": [],

"cwd": "${workspaceRoot}",

"runtimeExecutable": null,

"runtimeArgs": [

"--nolazy"

],

"env": {

"NODE_ENV": "development"

},

"console": "internalConsole",

"preLaunchTask": "",

"sourceMaps": false,

"outDir": null

}

]

}

2、第二种方法 Ctrl+Shift+B 快捷键运行html文件,在Tasks.json中配置如下:

{

"version": "0.1.0",

"command": "",

"isShellCommand": false,

"args": ["${file}"],

"showOutput": "always",

"windows": {

"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"

},

"tasks": [{

"taskName": "webserver",

"isBuildCommand": true,

"showOutput": "always"

}]

}

3、如果第二种方法,不想每次都按这个快捷键,请参考npm配置node服务方法:

http://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code

时间: 2025-01-06 07:25:50

vsCode 添加浏览器调试和js调试的方法的相关文章

vsCode 添加浏览器调试和js调试的方法总结

vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: { "version": "0.2.0", "configurations": [{ "name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开 "type": "chrome",

webpack4 css添加浏览器前缀 postcss-loader

自动添加浏览器前缀 ,我们这里使用postcss-loader 首先  cnpm install --save-dev postcss-loader autoprefixer 我这里用的cnpm ,npm也可以下载 接下来是配置 在网上查了相关文档发现需要新建一个 postcss.config.js 文件来对 postcss-loader 配置. 第一种配置: 新建与 webpack.config.js 同级的 postcss.config.js 文件 module.exports = { pl

vscode 调试node.js

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

使用Chrome DevTools直接调试Node.js与JavaScript(并行)

Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新版后还是<55, 可以从此处下载:Chrome Canary,亲测可行. 配置 就目前来说,在浏览器端并行调试JavaScript与Node.js还属于新特性,新体验.为了能够正常使用,你还需要做如下配置: 输入url:chrome://flags/#enable-devtools-experime

node.js调试

不用每次都重启服务的supervisor 使用过PHP的同学肯定都清楚,修改了某个脚本文件后,只要刷新页面服务器就会加载新的内容,但是node.js在第一次引用到某个文件解析后会 将其放入内存,下次访问的时候直接在内存中获取,以提高效率,但是这对我们开发造成一定困扰,修改了某个module后只能重启服务器后才能生效,调试起 来效率还是很低的. 于是乎node.js中有了supervisor插件帮我们坚实文件改动,自动重启服务器,supervisor是node.js的一个包,安装起来很简单,使用n

js调试console.log使用总结图解

一 实例 打印字符串和对象: 可展开对象查看内部情况: 看一下console对象本身的定义情况: 输出对象情况: utag对象所在文件: 输出对象: 二 Console.log 总结 1 如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走. 不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台. 其实对于这 F1

前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

使用PHPStorm调试Node.js代码

Node.js出来也有一段时间了,是时候拿来做点东西啦,虽然还没有到1.0版本,但是应该也快了. 安装 不得不说,作为后期之秀,各种工具做得还不错,安装Node也是,就是几分钟的事情,有个叫做NVM的东西,Windows下对应的是NVMW,用来安装Node,想安几个版本都是不费力啊.开始安装: git clone git://github.com/hakobera/nvmw.git "%HOMEDRIVE%%HOMEPATH%.nvmw" set "PATH=%HOMEDRI