Electron অ্যাপ্লিকেশন Debugging করার নিয়ম

Electron অ্যাপ্লিকেশন ডিবাগিং একটি গুরুত্বপূর্ণ প্রক্রিয়া যা অ্যাপ্লিকেশন উন্নয়ন এবং এর কার্যক্ষমতা যাচাই করতে সহায়ক। Electron এর ভিতরে দুটি প্রক্রিয়া থাকে: Main Process এবং Renderer Process। এই দুটি প্রক্রিয়ার জন্য আলাদা আলাদা ডিবাগিং পদ্ধতি প্রযোজ্য। এখানে, আমরা Electron অ্যাপ্লিকেশন ডিবাগ করার বিভিন্ন নিয়ম এবং টুলস নিয়ে আলোচনা করব।

১. Electron অ্যাপ্লিকেশন ডিবাগিংয়ের জন্য কিছু গুরুত্বপূর্ণ টুলস

Chrome DevTools:

Electron এর Renderer Process Chromium ভিত্তিক হওয়ায়, আপনি Chrome DevTools ব্যবহার করে ডিবাগ করতে পারেন। এটি JavaScript এবং HTML/CSS কোড ডিবাগ করার জন্য একটি শক্তিশালী টুল।

Electron Debugging Modes:

Electron অ্যাপ্লিকেশন ডিবাগিংয়ের জন্য কিছু ডিবাগিং মোড রয়েছে:

• --remote-debugging-port: অ্যাপ চালানোর সময় এই পোর্ট ব্যবহার করে ডেভেলপার টুলস এ অ্যাক্সেস করা যায়।
• --inspect: Node.js এর মতো ডিবাগging করার জন্য ব্যবহার করা হয়।

২. Main Process ডিবাগিং

Main Process এর কোডে ডিবাগিং করতে সাধারণভাবে Chrome DevTools এবং node-inspect ব্যবহার করা হয়। Electron এর Main Process Node.js ভিত্তিক, সুতরাং আপনি Node.js ডিবাগিং সরঞ্জামগুলি ব্যবহার করতে পারেন।

Main Process ডিবাগিং এর জন্য Chrome DevTools ব্যবহার করা

1. --inspect অপশন ব্যবহার: আপনি Electron অ্যাপ্লিকেশন চালানোর সময় --inspect অপশন ব্যবহার করে ডিবাগিং চালু করতে পারেন।

   electron --inspect=9229 .
   

   এর মাধ্যমে Node.js Inspector চালু হবে এবং আপনি Chrome DevTools এর মাধ্যমে ডিবাগ করতে পারবেন।

2. Chrome DevTools এ সংযোগ: Chrome DevTools এ যাওয়ার জন্য chrome://inspect পেজে যান। সেখানে "Remote Targets" এর অধীনে আপনার Electron অ্যাপ্লিকেশন দেখতে পাবেন। ক্লিক করে ডিবাগিং শুরু করতে পারবেন।

Example Command:

electron --inspect-brk=9229 .

এটি Electron অ্যাপ্লিকেশন চালু করার পর 9229 পোর্টে সংযোগ করবে এবং আপনি Chrome DevTools দিয়ে ব্রেকপয়েন্টে স্টপ করতে পারবেন।

৩. Renderer Process ডিবাগিং

Renderer Process হল HTML, CSS, এবং JavaScript এর অংশ, যা Chromium ইঞ্জিন দ্বারা চালিত হয়। তাই, Renderer Process এর ডিবাগিং সাধারণভাবে Chrome DevTools ব্যবহার করে করা হয়।

Chrome DevTools ব্যবহার করে Renderer Process ডিবাগিং

1. devTools ওপেন করা: যখন আপনি BrowserWindow তৈরি করবেন, আপনি webPreferences এর মধ্যে devTools সক্রিয় করতে পারেন।

   const { app, BrowserWindow } = require('electron');
   
   let mainWindow;
   
   app.on('ready', () => {
     mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         devTools: true // DevTools চালু করা
       }
     });
   
     mainWindow.loadFile('index.html');
   });
   

   যখন আপনি অ্যাপটি চালু করবেন, তখন Electron উইন্ডোতে ডেভেলপার টুলস স্বয়ংক্রিয়ভাবে ওপেন হবে এবং আপনি সেখানে ডিবাগ করতে পারবেন।

2. DevTools এ ব্রেকপয়েন্ট সেট করা: Chrome DevTools এর মাধ্যমে আপনি JavaScript কোডে ব্রেকপয়েন্ট সেট করতে পারবেন এবং সেই অংশের কার্যপ্রণালী স্টেপ বাই স্টেপ পর্যবেক্ষণ করতে পারবেন।

৪. console.log() এবং console.error() ব্যবহার

একটি সহজ এবং কার্যকর ডিবাগging পদ্ধতি হল console.log() এবং console.error() ব্যবহার করে কোডের অবস্থান এবং ভ্যালু যাচাই করা।

console.log("This is a log message!");
console.error("This is an error message!");

এই পদ্ধতি Main Process বা Renderer Process উভয় ক্ষেত্রেই ব্যবহার করা যেতে পারে।

• Main Process: console.log() এবং console.error() টার্মিনালে প্রদর্শিত হবে।
• Renderer Process: Chrome DevTools এর Console ট্যাবের মধ্যে প্রদর্শিত হবে।

৫. Electron এর --enable-logging অপশন ব্যবহার

Electron অ্যাপ্লিকেশন ডিবাগ করার জন্য --enable-logging অপশন ব্যবহার করা যায়, যা অতিরিক্ত লগিং তথ্য প্রদান করে।

electron --enable-logging .

এটি Electron অ্যাপের জন্য অধিক লগ তথ্য দেখাবে, যা ডিবাগging প্রক্রিয়ায় সহায়তা করতে পারে।

৬. electron-debug প্যাকেজ ব্যবহার

electron-debug প্যাকেজটি ডেভেলপারদের জন্য Electron অ্যাপ্লিকেশন ডিবাগিং আরও সহজ করে তোলে। এটি অ্যাপ্লিকেশনে DevTools স্বয়ংক্রিয়ভাবে ওপেন করে এবং অন্যান্য ডিবাগging সুবিধা প্রদান করে।

ইনস্টলেশন:

npm install electron-debug --save-dev

ব্যবহারের উদাহরণ:

const electronDebug = require('electron-debug');
electronDebug({ showDevTools: true }); // DevTools খুলবে

৭. প্যাকেজিং এবং বিল্ডিংয়ের সময় ডিবাগিং

প্যাকেজিং এবং বিল্ডিংয়ের সময় ডিবাগিং করার জন্য electron-builder বা electron-packager ব্যবহার করতে হয়। এগুলোর মাধ্যমে অ্যাপ্লিকেশন তৈরি করার সময় কোনো ত্রুটি বা সমস্যা থাকলে তা খুঁজে বের করা সহজ হয়।

electron-builder ব্যবহার করে ডিবাগging:

electron-builder --dir

এটি অ্যাপ্লিকেশনটি debug মোডে তৈরি করবে, যাতে ডিবাগিং সুবিধা পাওয়া যায়।

সারাংশ

• Main Process এর ডিবাগিংয়ের জন্য Chrome DevTools বা Node.js Debugger ব্যবহার করা হয়।
• Renderer Process এর ডিবাগিং Chrome DevTools দিয়ে করা হয়, যেখানে HTML, CSS এবং JavaScript ডিবাগ করা হয়।
• console.log(), console.error(), এবং electron-debug প্যাকেজ ব্যবহার করে ডিবাগিং করা যায়।
• --inspect এবং --enable-logging অপশন ব্যবহার করে আরও উন্নত ডিবাগিং সুবিধা পাওয়া যায়।

এভাবে Electron অ্যাপ্লিকেশন ডিবাগিং করা গেলে, অ্যাপের ত্রুটি এবং সমস্যা দ্রুত চিহ্নিত করা সম্ভব হয় এবং আপনি আরও কার্যকরী এবং বাগ-মুক্ত অ্যাপ তৈরি করতে পারেন।