14

पर दृश्य स्टूडियो डीबगर संलग्न करें मैं स्क्रैच से दृश्य स्टूडियो 2017 (और बनाम नहीं) से इलेक्ट्रॉन ऐप डीबग करने का प्रयास कर रहा हूं।इलेक्ट्रॉन ऐप

मैंने एक कंसोल नोडजेस प्रोजेक्ट बनाया, इलेक्ट्रॉन स्थापित और सहेज लिया। परियोजना संरचना: enter image description here

app.js की सामग्री (इलेक्ट्रॉन की वेबसाइट से लिया गया):

'use strict'; 

const { app, BrowserWindow } = require('electron') 
const path = require('path') 
const url = require('url') 

// Keep a global reference of the window object, if you don't, the window will 
// be closed automatically when the JavaScript object is garbage collected. 
let win 

function createWindow() { 
    // Create the browser window. 
    win = new BrowserWindow({ width: 800, height: 600 }) 

    // and load the index.html of the app. 
    win.loadURL(url.format({ 
     pathname: path.join(__dirname, 'index.html'), 
     protocol: 'file:', 
     slashes: true 
    })) 

    // Open the DevTools. 
    win.webContents.openDevTools() 

    // Emitted when the window is closed. 
    win.on('closed',() => { 
     // Dereference the window object, usually you would store windows 
     // in an array if your app supports multi windows, this is the time 
     // when you should delete the corresponding element. 
     win = null 
    }) 
} 

// This method will be called when Electron has finished 
// initialization and is ready to create browser windows. 
// Some APIs can only be used after this event occurs. 
app.on('ready', createWindow) 

// Quit when all windows are closed. 
app.on('window-all-closed',() => { 
    // On macOS it is common for applications and their menu bar 
    // to stay active until the user quits explicitly with Cmd + Q 
    if (process.platform !== 'darwin') { 
     app.quit() 
    } 
}) 

app.on('activate',() => { 
    // On macOS it's common to re-create a window in the app when the 
    // dock icon is clicked and there are no other windows open. 
    if (win === null) { 
     createWindow() 
    } 
}) 

// In this file you can include the rest of your app's specific main process 
// code. You can also put them in separate files and require them here. 

और index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Hello World!</title> 
</head> 
<body> 
    <h1>Hello World!</h1> 
    We are using node 
    <script>document.write(process.versions.node)</script>, 
    Chrome 
    <script>document.write(process.versions.chrome)</script>, 
    and Electron 
    <script>document.write(process.versions.electron)</script>. 
</body> 
</html> 

हालांकि, जब मैं शुरू, इलेक्ट्रॉन एप्लिकेशन शुरू होता है पर क्लिक करें, लेकिन डीबगिंग प्रक्रिया खुद को अलग करना प्रतीत होता है। जब मैं सभी इलेक्ट्रॉन प्रक्रिया में डीबगर को मैन्युअल रूप से संलग्न करने का प्रयास करता हूं (डीबग -> प्रक्रिया के लिए संलग्न करें -> सभी इलेक्ट्रॉन प्रक्रियाओं का चयन करें), ब्रेक पॉइंट का दावा नहीं किया जाता है क्योंकि कोई प्रतीक लोड नहीं होता है। enter image description here

इस परियोजना संपत्ति पृष्ठ है: enter image description here

वहाँ एक कदम है कि मैं याद किया है? चूंकि डीएसबीओडी पर डीबगिंग किया जा सकता है, मुझे लगता है कि यह वीएस2017 में भी किया जा सकता है?

बहुत धन्यवाद।

नोट: मैंने JIT ऑप्टिमाइज़ेशन को दबाएं और अनचेक करें बस मेरा कोड सक्षम करें।

+0

आप डिबग मोड में अपने अनुप्रयोग चला रहे हैं? –

+0

@ मोहम्मद चावा, हां। – TuanDT

+0

यह एक मूर्ख टिप्पणी है क्योंकि एक प्रोग्रामर के रूप में मुझे लगता है कि आप डीबग और रिलीज के बीच अंतर जानते हैं? आप रिलीज बिल्ड से जुड़ने की कोशिश नहीं कर रहे हैं? आपने पुनर्निर्माण करने की कोशिश की है ताकि डीबग प्रतीकों को अपडेट किया जा सके? –

उत्तर

3

यह वास्तव में क्या करने के लिए बहुत आसान है।

  1. इस तरह दृश्य स्टूडियो में अपने अनुप्रयोग को कॉन्फ़िगर करें:

enter image description here

  1. अपने अनुप्रयोग शुरू करो। इलेक्ट्रॉन एक अलग टर्मिनल पर शुरू होगा लेकिन विजुअल स्टूडियो इससे जुड़ा नहीं होगा।

enter image description here

    >
  1. जाओ डीबग करने के लिए कार्रवाई करने के लिए ... और वेबकिट WebSocket कनेक्शन प्रकार और http://127.0.0.1:5858 लक्ष्य के रूप में प्रवेश देते हैं। enter image description here

  2. आपके ब्रेकपॉइंट अब सक्षम हैं।

enter image description here

+0

आह में मदद नहीं मिली। इस बार, मुझे अभी भी कनेक्शन लक्ष्य निर्दिष्ट करना होगा। मैंने सोचा कि यह संपत्ति फ़ाइल में निर्दिष्ट है। अच्छा! – TuanDT

0
NodeJS v6 के लिए और नीचे NodeJS v7 या अधिक से अधिक है, जहां $DEBUG_PORT बंदरगाह आप अपने डिबग विन्यास में निर्दिष्ट किया है का प्रतीक करने के लिए है के लिए

अपने "Node.exe विकल्प" क्षेत्र में, जोड़ने --debug=$DEBUG_PORT या --inspect=$DEBUG_PORT

आप एक बंदरगाह उत्तीर्ण नहीं होते हैं और केवल --debug या --inspect झंडा गुजरती हैं, तो नोड डिबगर बंदरगाहों 5858 और 9229 पर क्रमश सुनता है ... वे नोड के बाद के संस्करणों में 9229 के लिए डिफ़ॉल्ट पोर्ट बदल दिया है।

अगर यह मदद करता है तो मुझे बताएं!

+0

निर्दिष्ट करता हूं, मैंने ऐसा किया, प्रोग्राम तोड़ने लगता है, लेकिन मैं दौड़ना फिर से शुरू नहीं कर सकता, और ब्रेकपॉइंट अभी भी लोड नहीं हुआ है । – TuanDT

+0

--debug या --inspect flags के बाद होस्ट और पोर्ट जोड़ने का प्रयास करें। उदाहरण के लिए '--inspect = 0.0.0.0: 9 22 9' – rdgd

+0

इलेक्ट्रॉन ऐप में होस्ट क्या होगा? – TuanDT

0
  • सबसे पहले आपको configure your Visual Studio to GitHub Symbols होना है।
  • Attaching to and Debugging Electron -> एक डिबगिंग सत्र शुरू करने के लिए, पावरशेल/सीएमडी खोलें और पैरामीटर के रूप में खोलने के लिए एप्लिकेशन का उपयोग करके इलेक्ट्रॉन के अपने डीबग बिल्ड को निष्पादित करें।

    $ ./out/D/electron.exe ~/my-electron-app/ 
    
  • पूरा दस्तावेज़ीकरण के लिए here पढ़ें।


क्यों प्रतीकों लोड हो रहा है नहीं कर रहे हैं Windbg में निम्न कमांड टाइप देखकर लिए।

> !sym noisy 
> .reload /f electron.exe 

Creating an Electron app using Visual Studio (not VSCode) w/ Node.js tools

+0

उहमन ... मैंने पढ़ा था, ऐसा लगता है कि यह काम कर सकता है। लेकिन मुझे इसकी पुष्टि करने के लिए और अधिक प्रयोग करने की आवश्यकता होगी। – TuanDT

+0

मैंने अपने जवाब में कुछ बदलाव किए हैं। – AsifAli72090

+0

मैंने वास्तव में प्रलेखन में चरणों की कोशिश की और वे काम नहीं कर पाए - Electron.exe प्रक्रिया द्वारा डीबग करने का चयन ब्रेकपॉइंट्स को हिट नहीं करता है। मैंने इलेक्ट्रॉन के लिए डीबग प्रतीकों को भी जोड़ा और इससे –

संबंधित मुद्दे