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. express 转

    目录 此文重点介绍Express3.0的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容.Express已经升级到4.x,请同时参考文章,Node.js开发框架Expre ...

  2. Reset CSS

    摘自<锋利的JQuery> 关于重置样式,可以参考Eric meyer的重置样式和YUI的重置样式 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt ...

  3. 使用ShareSDK一键分享

    首先需要到ShareSDK官方网站注册并且下载SDK,创建应用,获得ShareSDK的Appkey:文件如图: 在ShareSDK中打开即可:输入项目名称和包名,选择要分享的平台,点击确定会自动生成一 ...

  4. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  5. java-内省与javabean

    JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...

  6. testng参数化及用例排序

    http://blog.sina.com.cn/s/blog_6966650401012ra0.html 一.一个简单的测试谷歌搜索 import org.testng.annotations.Tes ...

  7. 开源的EtherCAT Master简介

    EtherCAT的主站开发是基于EtherCAT机器人控制系统的开发中非常重要的环节.目前常见开源的主站代码为的RT-LAB开发的SOEM (Simple OpenSource EtherCAT Ma ...

  8. mysqld 已死,但是 subsys 被锁

    1. Obviously the 'ole check the log file for anything nasty cat /var/log/mysqld.log 2. Stop the serv ...

  9. Node.js系列之node.js初探

    官方介绍:Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable n ...

  10. MongoDB分片之数据分割方式

    随着移动互联网的发展,大量的非结构化数据随之产生,不仅对数据库存储大数据提出了新的要求,同时对于查询数据和进行大数据分析也提出了苛刻的要求,这些显然是单服务器处理能力无法满足的,自然建立一个集群是不可 ...