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

二、新建文件


1、目录结构

  1. .
  2. ├── index.html
  3. ├── index.js

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

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

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

  1. var data = [];
  2. setTimeout(function (){
  3.     data.push(1);
  4. },2000);
  5. console.log(data[0]);
  6. // 结果
  7. // undefined
  8.  
  9. /*
  10. var data = [];
  11. var cb = function(){
  12.     console.log(data[0]);
  13. };
  14. var pushData =  function(callback){
  15.     data.push(1);
  16.     callback();
  17. };
  18. setTimeout(function () {
  19.     pushData(cb);
  20. },2000);
  21. */

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

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

  1. {
  2.     // 使用 IntelliSense 了解相关属性。
  3.     // 悬停以查看现有属性的描述。
  4.     // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  5.     "version": "0.2.0",
  6.     "configurations": [
  7.         {
  8.             "name": "启动 Chrome 并打开 localhost",
  9.             "type": "chrome",
  10.             "request": "launch",
  11.             "url": "http://localhost:8080",
  12.             "webRoot": "${workspaceFolder}"
  13.         },
  14.         {
  15.             "name": "Attach to Chrome",
  16.             "type": "chrome",
  17.             "request": "attach",
  18.             "port": 9222,
  19.             "webRoot": "${workspaceFolder}"
  20.         },
  21.         {
  22.             "name": "使用本机 Chrome 调试",
  23.             "type": "chrome",
  24.             "request": "launch",
  25.             "sourceMaps": false,
  26.             "file": "${workspaceRoot}/index.html"
  27.         }
  28.     ]
  29. }

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. mysql慢查询日志按天切割归纳

    问题描述: mysql开启慢查询功能,再正常不过,那么存在这样一种情况:慢查询写入的文件位置和文件名是指定好的,如果慢查询时间设定严苛,不出意外,记录慢查询的单个文件大小会日益增大,几十兆或者上百兆, ...

  2. iView页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项

    文档中说激活面板的name用value,页面第一次加载的时候可以,放在modal里就不好使了,每次打开的时候总显示上一次离开时的界面. 真正能用的是 this.$refs.tabs.activeKey ...

  3. selenium家族发展史

    什么是Selenium? Selenium 是专门为Web应用程序编写的一个验收测试工具.Selenium测试直接运行在浏览器中,支持的浏览器包括IE(7.8.9).Mozilla Firefox.M ...

  4. 计算pi的位数

    from random import random from math import sqrt from time import clock DARTS=1000000 hits=0.0 clock( ...

  5. matlab中cumsum函数

    matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者help cumsum即可获得该函数的帮助信息. 格式一:B = cumsum(A ...

  6. JavaScript 函数递归

    递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...

  7. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  8. 常用的消息队列中间件mq对比

    原文地址:https://blog.csdn.net/qq_30764991/article/details/80239076 消息队列中间件是分布式系统中重要的组件,主要解决应用耦合,异步消息,流量 ...

  9. [数学笔记Mathematical Notes]目录

    2.也许是一个问题,暂时没给出解答. 2015年7月5日 1. 这个一个笔记类型的数学杂志, 打算用来记录自己学数学时做的笔记,一般几页纸一期. 觉得有意思就摘抄下来,或者自己的感想. 可能有些不是原 ...

  10. [物理学与PDEs]第2章第2节 粘性流体力学方程组 2.3 广义 Newton 法则---本构方程

    1.  ${\bf P}=(p_{ij})$, 而 $$\bex p_{ij}=-p\delta_{ij}+\tau_{ij}, \eex$$ 其中 $\tau_{ij}$ 对应于摩擦切应力. 2. ...