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. js生成验证码并检验

    <html> <head> <title>验证码</title> <style type="text/css"> #co ...

  2. uva 11137 Ingenuous Cubrency

    // uva 11137 Ingenuous Cubrency // // 题目大意: // // 输入正整数n,将n写成若干个数的立方之和,有多少种 // // 解题思路: // // 注意到n只有 ...

  3. css居中解决方案

    水平居中 行内或者具有行内元素性质的元素(比如文字或者链接)? 让一个父元素为块级元素的行内元素水平居中,可以:CSS: 1 2 3 .center-children { text-align: ce ...

  4. mysql用户权限设置

    1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost identified by &quo ...

  5. bzoj 3714

    题意:n<=2000的盒子,有一些里面有球,再给你所有c[i][j](1<=i<=j<=n),即告诉你[i,j]里面球的总数的奇偶性需要花费c[i][j],现在求知道所有的盒子 ...

  6. 本人讲课时录制的Android应用开发技术教学视频

    网盘地址:http://yun.baidu.com/pcloud/album/info?query_uk=1963923831&album_id=3523786484935252365 本人讲 ...

  7. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制

    2013年10月06日最新整理. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制 微信公共平台消息主动推送接口一直是腾讯的私用接口,相信很多朋友都非常想要用到这个功能. 通过学习 ...

  8. webapi 中使用 protobuf

    相比json来说,好处是速度更快,带宽占用更小.其效果大致等于json+Gzip. 在webapi中使用protobuf的方法为: 引用nuget包 Install-Package protobuf- ...

  9. WPF,Silverlight与XAML读书笔记第四十五 - 外观效果之模板

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 模板允许用任何东西完全替换一个元素的可视树, ...

  10. dojo/dom-class源码学习

    dom-class模块是dojo中对于一个元素class特性的操作(特性与属性的区别),主要方法有: contains 判断元素是否包含某个css class add 为元素添加某个css class ...