一、安装chrome，安装vscode，打开vscode编辑器，安装插件Debugger for Chrome

二、新建文件


1、目录结构

.
├── index.html
├── index.js

2、在vscodeDebug工程中，新建index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>vscode调试本地文件</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="index.js"></script>
</head>
<body>
  <div>vscode调试本地js文件</div>
</body>
</html>

3、在vscodeDebug工程中，新建index.js

var data = [];
setTimeout(function (){
    data.push(1);
},2000);
console.log(data[0]);
// 结果
// undefined

/*
var data = [];
var cb = function(){
    console.log(data[0]);
};
var pushData =  function(callback){
    data.push(1);
    callback();
};
setTimeout(function () {
    pushData(cb);
},2000);
*/

三、点击左侧栏调试按钮，切换到debug模式

1、生成并配置launch.json文件
点击添加配置按钮，此时vscode会自动在.vscode文件夹下新建launch.json文件，根据调试需要自己修改launch.json文件，然后选择需要调试的项目，并选择chrome环境。

{
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "启动 Chrome 并打开 localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

file值表示【需要调试的文件路径】，调试方式为【使用本机chrome调试】。

2、在index.js文件中打断点


3、开始调试

vscode断点调试本地客户端文件的更多相关文章

  1. vscode断点调试工程化客户端文件

    一.调试webpack配置文件 launch.json的配置如下,在webpack.dev.config.js文件中设置断点,开始调试. { "version": "0. ...

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

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

  3. 使用VSCode 断点调试 js项目，html页面

    一.效果目的 1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码: 二.工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Deb ...

  4. .NET C#微信公众号开发远程断点调试(本地远程调试生产环境代码)

    最近在做微信公众号开发,由于之前没有接触过,突然发现调试不方便,不方便进行断点跟踪调试.因为微信那边绑定的服务器地址必须是公网地址,但是还是想进行断点调试(毕竟这样太方便了,程序有Bug,一步步断点跟 ...

  5. vscode断点调试简单的服务端文件

    一.无配置文件时,如何调试? 1.安装code命令打开vscode,快捷键command + shift + p,输入shell command,选择install 'code' command in ...

  6. 如何远程断点调试本地localhost项目

    前言 对于一般开发网站的IDE自带的服务器是都跑在 localhost 地址上的.(如下图的asp.net) 而这种地址是只能在本机通过 localhost 或 127.0.0.1 地址访问到,而无法 ...

  7. phpstorm断点调试 php.ini 文件中 Xdebug 配置

    [XDebug]xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug"xdebug.trace_output_dir="D ...

  8. 解读vscode断点调试配置文件【待续】

    一.参考链接 https://code.visualstudio.com/Docs/editor/debugging https://code.visualstudio.com/docs/nodejs ...

  9. Ubuntu16.04 中 Vscode 如何断点调试C语言程序

    个人博客链接:Ubuntu16.04 中 Vscode 如何断点调试C语言程序 问题:环境是 Ubuntu16.04,如何使用 Vscode 断点调试C语言程序. 写代码没有调试环境是不能忍受的,所以 ...

随机推荐

  1. CF908D New Year and Arbitrary Arrangement(期望Dp+数学)

    题目大意:给你一个空字符串,你有\(\frac{pa}{pa+pb}\)的概率往字符串最后面加个\(a\),\(\frac{pb}{pa+pb}\)的概率往字符串最后面加个\(b\),当子序列\(ab ...

  2. NOI真题记录

    NOI2001 食物链,拓展域并查集. 炮兵阵地,棋盘状压DP. NOI2002 银河英雄传说,kruskal重构树/带权并查集. 贪吃的九头龙,树形DP. NOI2003 逃学的小孩,树形DP,二次 ...

  3. JSON三种数据解析方法（转）

    原 JSON三种数据解析方法 2018年01月15日 13:05:01 zhoujiang2012 阅读数:7896    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  4. 在鼠标右键上加入使用notepad++编辑【转】

    我们在安装完notepad++文本编辑器之后,在一个文本文件上右键有时候并没有出现“使用notepad++编辑的选项”,我们可以通过简单地修改注册表文件来增加这样的功能: 1.  首先打开注册表,wi ...

  5. mysql普通用户本机无法登录的解决办法

    背景 mysql和mariadb的用户表里存在匿名用户时,普通用户出现无法登录的情况 分析 先查看下用户表 mysql> select user, host, password from mys ...

  6. Tuxedo 汇总

    ===================================C/S / Tuxedo 架构/ B/S 架构演进===================================Tuxed ...

  7. TLS调试微信

    1.在微信中打开 X5 调试地址:http://debugx5.qq.com,信息标签,勾选打开TBS内核Inspector调试功能 2.在微信中打开 TBS 内核安装地址:http://debugx ...

  8. JAVA进阶5

    间歇性混吃等死,持续性踌躇满志系列-------------第5天 1.IDEA常用快捷键 2.简单方法的使用 package cn.intcast.day05.demo01; public clas ...

  9. 《尚学堂_史上最易懂的设计模式视频》--章节5 动态代理-JDK6自带的编译器

    所有的设计模式中最难的一个 ==组合和聚合是有很大区别的 组合和聚合是有很大区别的,这个区别不是在形式上,而是在本质上: 比如A类中包含B类的一个引用b,当A类的一个对象消亡时,b这个引用所指向的对象 ...

  10. 学习总结javascript和ajax，php，和css

    1,javascript 1,js可以获取和修改html的属性和内容: 通过什么获取? window.onload=function{ document.getElementById("xx ...