VSCODE下調試 Electron 項目

LittleLiByte 發布于2019-08-21 17:39 / 3659人閱讀

摘要：最近使用開發了一套軟件，記錄一下遇到的調試問題所需工具官網鏈接本次所使用的版本為本次直接使用的鏈接官網鏈接配置方式我們使用的項目初始配置已經完成。建議端代碼在主進程中運行調試確定無誤后再引入渲染進程中減少調試工作難度。

最近使用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下調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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