VSCODE下调试 Electron 项目

LittleLiByte 发布于2019-08-21 17:39 / 3675人阅读

摘要：最近使用开发了一套软件，记录一下遇到的调试问题所需工具官网链接本次所使用的版本为本次直接使用的链接官网链接配置方式我们使用的项目初始配置已经完成。建议端代码在主进程中运行调试确定无误后再引入渲染进程中减少调试工作难度。

最近使用electron开发了一套软件，记录一下遇到的调试问题

所需工具

vscode 官网链接;

electron,本次所使用的版本为:

Electron: 1.7.9

Node: 7.9.0

Chromium: 58.0.3029.110

V8: 5.8.283.38

本次直接使用的 electron-quick-start git链接

nodejs 官网链接;

配置方式 我们使用的 electron-quick-start,项目初始配置已经完成。 修改 package.json 文件中

    "scripts": {
        //debug 表示项目需挂载调试程序
        //brk 表示项目在启动后,运行第一行代码自动暂停
        //5858 表示调试监听端口,若被占用,可自行更改
        "start": "electron . --debug-brk=5858" 
    }

修改launch.json文件,该文件属于vscode所使用调试配置文件

    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        //程序启动文件,默认为 "${workspaceRoot}/main.js"
        "program": "${workspaceRoot}/dist/main.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
            ".",
            "--enable-logging"
        ],
        "env": {},
        //该属性为配置typescript调试,若不需要则设置为false
        "sourceMaps": true
    }

启动调试

打开调试界面

下拉左上角调试列表

选择Launch,若在上一步设置为其他名称,则此时亦跟随修改

调试时所遇到问题

electron 中仅支持主进程调试。即：您需要将逻辑代码放置于 main.js 中调用,才可使用断点等功能,且此时不支持 console 打印输出功能。

渲染进程,包括初始的 BrowserWindow ,无法通过断点调试nodejs代码,仅可以通过窗体自带的开发工具(Ctrl + Shift + I)调试代码。即：使用 require 引入的文件仅支持 console 打印输出至输出窗口,正常web逻辑代码,可以使用断点等进行调试。

建议node端代码在主进程中运行调试,确定无误后再引入渲染进程中,减少调试工作难度。

云服务器 GPU云服务器 python项目调试 html项目调试 linux下调试器 webrtc库在windows下调试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89828.html

实录分享&视频 | 微软Visual Studio Code是这样支持Docker的

摘要：分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。是微软开源的一款开发工具，它针对做了许多编译和命令上的支持。今天主要向大家介绍一下微软去年推出的一个，以及对的一些支持。年他加入微软，从事开发的工作。本文是数人云分布式架构的开源组件大选Meetup的实录分享。分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。Visual Studio Code是微软开源的一款开发工具，它...

leoperfect 2019-06-28 17:49 评论0 收藏0
如何搭建Electron开发环境

摘要：原文发表于如何搭建开发环境这个项目结构是我在编写基于和的七牛文件上传总结出来的本文主要介绍如何从零开始搭建高效的开发环境主要内容如下通过合理的目录划分来组织代码使用简化开发如何在渲染进程开发时使用热更新如何在主进程开发时使用自动重启如何在主原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写...

TwIStOy 2019-08-21 12:05 评论0 收藏0
Visual Studio Code 前端调试不完全指南

摘要：接下来的内容将从以下几方面进行展开调试前端代码调试通过启动的服务器要使用的调试功能，首先就得配置文件。调试前端代码通过调试前端代码主要依赖于一个插件，该插件主要利用所开放出来的接口来实现对其渲染的页面进行调试。本文最初发布于我的个人博客：咀嚼之味 Visual Studio Code (以下简称 vscode) 如今已经代替 Sublime，成为前端工程师们最喜爱的代码编辑器。它作为...

dongfangyiyu 2019-08-20 16:44 评论0 收藏0
FE.BASE-vscode使用、原理、插件开发笔记

摘要：插件提供内容，负责渲染。增量更新，尽可能地减少重新渲染长时间运行的任务应该支持，并可以取消插件能够正确地处理对象的生命周期。使用了模式，运行可以将这个对象销毁。使用命令行使用帮助：code --help 使用已经打开的窗口来打开文件：code -r 打开文件并滚动到特定行：code -r -g package.json:128 比较两个文件：code -r -d a.tx...

MingjunYang 2019-08-26 13:46 评论0 收藏0
VS Code上手与超实用插件安利

摘要：软件跨平台支持以及，运行流畅，可谓是微软的良心之作微软有这个宇宙最强，自然也不会弱宇宙最强编辑器说到代码编辑器，我们有必要提一提还有。原文链接：VS Code上手与超实用插件安利工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

miracledan 2019-08-21 17:46 评论0 收藏0