一、效果目的

1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码;

二、工具准备

1.VSCode 软件

2.一个js项目

3.VSCode 上装一个插件:Debugger for Chrome

如图

三、配置文件更改

1.用VSCode装载项目

2.然后按F5,出现这个框



选择 Chrome

3.然后出现个配置的提示,和打开了launch.json这个文件



在 这个文件里添加一段配置信息

,
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

结果如图

4.然后,更改调试方式



如图,选择左边的圆形按钮,然后出来这个调试配置管理界面,选择“使用本机 Chrome 调试”。

5.然后在项目的 js 处设置好断点,按 F5,就可以进行断点调试了。

6.接着就 Enjoy!

PS:这种方法只适合普通页面,要是你的js项目里,包含json等游览器不支持本地游览的资源,那么就需要开启服务器,配合这个插件,才能进行断点调试。

使用VSCode 断点调试 js项目,html页面的更多相关文章

  1. 【Egret】使用VSCode 编译,断点调试Egret项目

    经过我日积月累的摸索,还是一直模模糊糊的,搞不懂,今天经晨哥点拨两下,一下子就恍然大悟,搞定了怎么弄这个东西,现将经验分享如下. 一.效果目的 1.在VSCode里,直接F5打开Egret页面,并且可 ...

  2. vscode断点调试工程化服务端文件

    一.创建express应用我们使用express-generator创建一个新的express应用.1.全局安装express-generator // 安装 sudo npm install exp ...

  3. vscode断点调试本地客户端文件

    一.安装chrome,安装vscode,打开vscode编辑器,安装插件Debugger for Chrome 二.新建文件 1.目录结构 . ├── index.html ├── index.js ...

  4. 如何在vscode里面调试js和node.js

    一般大家调试都是在浏览器端调试js的,不过有些时候也想和后台一样在代码工具里面调试js或者node.js,下面介绍下怎样在vscode里面走断点. 1,用来调试js 一:在左侧扩展中搜索Debugge ...

  5. 浏览器断点调试js

    说了一些 Chrome 开发者工具的技巧,其实并没有涉及到开发者工具最核心的功能之一:断点调试.断点可以让程序运行到某一行的时候,把程序的整个运行状态进行冻结.你可以清晰地看到到这一行的所有的作用域变 ...

  6. 如何在vscode中调试vue-cli项目?

    一:参考官网文档,写的还是很清楚的:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html 二:需要安装的东西和初始项目 2.1  用vue ...

  7. Eclipse系列:如何断点调试web项目

    一直不知道如何在Eclipse中断点调试跟踪问题,今天试了一把,大致的步骤如下: 1)事先在需要断点跟踪的代码行左侧空白处双击处设置断点: 2)在工程列表中选中要调试的工程,然后点击Debug on ...

  8. vs基础:无法断点调试dll项目 无法命中

    调试vs时,经常会出现,你设置了dll项目的一些断点,可f5之后,这些断点无效.时代定制的程序组的童鞋告诉你解决方法:在解决方案上右键“属性”,点击左侧树“配置属性”-->“配置”,右侧项目列表 ...

  9. 利用谷歌浏览器断点调试js反向解析,解密

    目标网站:https://www.aqistudy.cn/html/city_detail.html 点击按钮才会去后台请求数据, 第一步:将click打开, 第二步:找个后台请求数据的url   h ...

随机推荐

  1. JLOI2015 解题报告

    JLOI2015 真的不愧是NOI出题组出的,题目难度够吊.不过每一道都是结论题和乱搞题真的很不好玩... T1:[JLOI2015]有意义的字符串 首先贴下popoqqq的blog吧 感性的认识就是 ...

  2. BZOJ 1096: [ZJOI2007]仓库建设(动态规划+斜率优化)

    第一次写斜率优化,发现其实也没啥难的,没打过就随便找了一份代码借(chao)鉴(xi)下,不要介意= = 题解实在是懒得写了,贴代码吧= = CODE: #include<cstdio># ...

  3. java学习笔记——IO部分(遍历文件夹)

    用File类写的一个简单的工具,遍历文件夹,获取该文件夹下的所以文件(含子目录下的文件)和文件大小: /** * 列出指定目录下(包含其子目录)的所有文件 * @author syskey * */ ...

  4. kafka c++客户端编译

    Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因素. 这些数据通常是 ...

  5. 【排序算法】冒泡排序算法 Java实现

    基本思想 设数组长度为N. 比较前后两个数据,如果前面的数据大于后面的数据,就将两个数据交换. 这样对数组的第0个数据到N - 1个数据进行遍历后,最大的一个数据就沉到了数组的第N - 1个位置. N ...

  6. MongoDB分布式

    结构: ShardServer1:27020 ShardServer2:27021 ShardServer3:27022 ShardServer4:27023 ConfigServer:27100 R ...

  7. 2017-3-2 C#基础 结构体

    1. 结构体:用户自定义类型定义位置:定义在Main函数的外面,类的里面 定义格式:struct 自定义名字{ public 数据类型 名字; public 数据类型 名字; ... ...} 声明实 ...

  8. 2435: [Noi2011]道路修建

    2435: [Noi2011]道路修建 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2188  Solved: 639[Submit][Status ...

  9. ES4:ElasticSearch 使用C#添加和更新文档

    这是ElasticSearch 2.4 版本系列的第四篇: 第一篇:ES1:Windows下安装ElasticSearch 第二篇:ES2:ElasticSearch 集群配置 第三篇:ES3:Ela ...

  10. JavaWeb之Listener监听器

    监听在Java体系中运用的很广泛,在安卓开发.JavaWeb开发中到处存在,在其他语言也有类似的,如果有了解过设计模式那很容易理解实现的原理.不过对于开发者来说,使用观察者模式只需实现相应的接口就好, ...