使用VSCode调试Electron主进程的方法步骤

目录
  • 搭建环境
  • 文档
  • 调试
  • 渲染进程

搭建环境

本文所使用的项目是 electron-quick-start 。

$ git clone https://github.com/electron/electron-quick-start
$ cd ./electron-quick-start
$ npm install

经过以上步骤就搭建好了基本 Electron 应用开发环境。查看 package.json:

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "16.0.6"
  }
}

我们可以在终端运行 npm run start 来查看运行结果：

可以看到，环境搭建已经大功告成！接下来进入开发调试环节。

文档

官网说明 使用 VSCode 进行主进程调试

点击vscode中的调试按钮，或者按F5

他会提示你进行配置，会产生一个lauch.json文件，如下图

或者直接新建也行

  • 在当前项目下面新建.vscode文件夹
  • 在这个.vscode里面新建launch.json文件
  • 在launch.json文件里面输入下面内容

在lauch.json输入如下内容

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

调试

在主程序main.js中打断点，然后按F5进行调试，如下图

渲染进程

这就不用说了吧。。。。直接在chrome的控制台打断点~~~~~~~~~

到此这篇关于使用VSCode调试Electron主进程的方法步骤的文章就介绍到这了,更多相关VSCode调试Electron主进程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • electron 安装，调试，打包的具体使用

    项目推荐 想要快速的了解 electron, 调试 electron, 打包 electron, 推荐项目electron-webpack-quick-start 快速开始 先安装 cross-env,用于设置环境变量.因为在后面安装electron, 需要下载, 默认的源在国内下载很慢,需要通过设置环境变量来切换下载地址 #安装cross-env,用于设置环境变量的 npm install cross-env -g Clone项目到本地 # Clone repository git clone

  • 使用VSCode调试Electron主进程的方法步骤

    使用VSCode调试Electron主进程的方法步骤

    目录 搭建环境 文档 调试 渲染进程 搭建环境 本文所使用的项目是 electron-quick-start . $ git clone https://github.com/electron/electron-quick-start $ cd ./electron-quick-start $ npm install 经过以上步骤就搭建好了基本 Electron 应用开发环境.查看 package.json: {   "name": "electron-quick-start

  • vscode调试node.js的实现方法

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具:点击进入Sources标签页,在页面的左侧就能看到JS代码的目录:找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source-m

  • 用VScode编写C++大型项目的方法步骤

    用VScode编写C++大型项目的方法步骤

    目录 vscode远程开发配置 选用vscode的原因 配置流程 安装C++扩展 ​clang-format格式化代码 安装clang-format 创建clang-format文件 vscode支持clang-format 代码检查工具clang-tidy clang-tidy的安装 cmake实现代码工程化 cmake实践 clang-tidy在cmake中的配置 ccache加速编译 ccache安装 结合cmake使用 vscode远程开发配置 由于后面项目用到了epoll和splice

  • SpringBoot通过redisTemplate调用lua脚本并打印调试信息到redis log(方法步骤详解)

    第一次写Lua脚本,并通过springboot的redisTemplate调用脚本,进行脚本与应用的交互.不熟悉真的折腾了好久,现在总结一下学习过程: 第一次写完lua时,想到的就是如何在应用调用脚本的时候,去调试脚本.在网上海搜了一把,能找到的有点相关的寥寥无几. 有一种方法是通过执行redis命令,调用redis客户端,加载lua脚本,然后出现基于命令行调试的交互界面,输入调试命令去调试脚本.如下: 在终端输入命令:redis-cli.exe --ldb --eval LimitLoadTi

  • 如何在vscode中安装python库的方法步骤

    如何在vscode中安装python库的方法步骤

    vscode安装python库 1.已经在vscode中装了python并配置好python运行环境. 检查是否正确配置好运行环境,按Windows+R组合键在运行窗口输入cmd,打开命令提示符窗口输入python确定即可 2.找到vscode中python的路径 随便运行一个代码,例如print("hehe")下面的终端显示如下 图中红色地方圈起的便是python的路径,到python3.8为止. 如果你所显示的内容与我不同,可在setting.json中查找并将路径复制下来(在vs

  • VSCode搭建STM32开发环境的方法步骤

    VSCode搭建STM32开发环境的方法步骤

    目录 1.安装VScode 2.安装C/C++插件 3.安装Keil Assistant插件 4.用vscode打开keil工程 5.编译.下载程序 6.常用操作 官方简述 摘要: 作为一个51单片机或STM32单片机的使用者,keil一直是我们的必备的一款工具之一.但keil的一些问题也一直存在,当然也有人用其他的比如STM32CubeIDE.但是今天推荐的是VScode+Keil Assistant插件,不需要很复杂的配置各种文件和环境变量,只需要一个插件即可!可以编译代码和下载程序. 当我

  • Mysql双主搭建的方法步骤

    目录 1. Mysql binlog参数配置 2. Mysql binlog查看详细内容 3. Mysql双主搭建 4. Mysql双主解决数据回环 4.1 双主同步测试一 4.2 双主同步测试二 4.3 双主同步测试三 1. Mysql binlog参数配置 log-bin=mysql-bin 打开二进制日志功能,默认在datadir下 binlog-ignore-db binlog-ignore-db=mysql binlog-ignore-db=information_schema bin

  • VSCode 配置C++开发环境的方法步骤

    第一步.安装VSCode应用程序 打开VSCode官网,下载对应安装包并默认安装(这里指明:安装路径可以修改) 第二步.安装相关插件 此时的VSCode仅仅是一个英文文本编辑器,还称不上开发工具,所以需要相关的插件支持. 需要说明的是:这里我选择我的母语作为编辑器的语言,所以会多安装一个汉化插件! 安装 汉化插件 打开VSCode,在插件搜索输入框输入"Chinese",搜索插件"Chinese (Simplified) Language Pack for Visual St

  • 使用VSCode开发和调试.NET Core程序的方法

    电脑不想装几十个G的 VS2017,那就用 VS Code 吧 目标: 创建一个类库项目 Skany.Core,并用 Nuget 引用第三方组件 Hash 实现加密算法 创建一个单元测试项目 Skany.Tests,引用类库 Skany.Core,并测试其中的方法 创建一个控制台应用程序项目 Skany.Output,引用类库 Skany.Core,并输出方法执行结果 创建一个解决方案 Skany.sln,包括以上三项目 环境 .NET Core SDK 2.2.202 开始 首先在 VS Co

  • vscode调试django项目的方法

    这几天研究HUE,这个东西是基于Django开发的,于是又看了一眼Django,学着写个demo.微软开源的vscode在业界反应不错,以前也没用过,借着这次机会用用vscode,和pycharm比起来各有千秋,不过总体来说还是不错的.新工具各种不熟悉,连怎么调试都得研究研究,现在记录一下vscode 怎么弄Django项目的调试. 下载Django模块 进入vscode 先下载django,点击左侧最下面图标,搜索Django,点击下图2的位置的install 添加Django模块到vscod

随机推荐