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

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

  1. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

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

    vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     " ...

  3. 【调试】js调试console.log使用总结图解(重要)

    0.介绍 先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息: 今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会 ...

  4. 好强大的页面功能调试(js调试,查找js绑定的事件)值得学习

    引自:http://www.poluoluo.com/jzxy/201209/178110_2.html 这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的,因为 googl ...

  5. vscode 调试node.js

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可 ...

  6. [转]谷歌Chrome浏览器开发者工具教程—JS调试篇

    来源:http://blog.csdn.net/cyyax/article/details/51242720 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工 ...

  7. 介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)

    1.打开开发者工具:右键-->检查 (快捷键 f12) 2.开发者工具介绍: (1): 选择页面的dom进行查看 (2):设备适配 (3)元素: ① 可以查找到界面对应的dom: ② 通过计算样 ...

  8. 浏览器调试动态js脚本

    前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引入的,可能是因为这样所以不显示出来,但是如果不能断点调试,只 ...

  9. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

随机推荐

  1. Android最大可运行内存

    int maxMemory = (int) Runtime.getRuntime().maxMemory();

  2. Excel里内嵌在线翻译

    本来寻思着继续写点系统运行日志跟踪技术的,但早晨哥家领导从单位打来电话,让帮助她的闺蜜搞一个excel翻译的问题,总部IT搞不定.我过去是用excel做了几年工作,却都是些数学计算,跟翻译也扯不上啊: ...

  3. PSP&进度条

    11号 类别 开始时间 结束时间 间隔 净时间 燃尽图 8::00 8:20 0 20分钟 站立会议 8:20 8:50 0 30分钟 读构建之法 9:20 13:20 120分钟 120分钟 四人小 ...

  4. Python成长笔记 - 基础篇 (十)

    本节内容 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Queu ...

  5. Eclipse安装与配置

    http://www.th7.cn/Program/java/201307/144477.shtml http://www.eclipse.org/ 我们下载J2EE版本:Eclipse IDE fo ...

  6. Hibernate Id Generator and Primary Key

    Use automate id by hibernate: If you want the tables' id be created automation. How to do it? When u ...

  7. linux-dns服务器搭建

    1.先查看系统是否安装了bind rpm -qa|grep bind 2.如果没有安装则

  8. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  9. guzzle调用失败-缺少guzzle

    用composer安装了,但是目前为止还有问题.开发环境是 WAMP PHP5.4.12. 已经打开PHP.ini 的SSL扩展,现在还是提示缺少 curl-ca-bundle.cr 报错 No sy ...

  10. 【腾讯Bugly干货分享】微信终端跨平台组件 mars 系列(一) - 高性能日志模块xlog

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ff5932cde42f1f03de29b1 本文来源: 微信客户端开发团队 ...