DevTools ইন্টিগ্রেশন এবং Chrome DevTools ব্যবহার

Electron অ্যাপ্লিকেশন ডেভেলপমেন্টে DevTools এর ব্যবহার অত্যন্ত গুরুত্বপূর্ণ। এটি ডেভেলপারদের অ্যাপ্লিকেশনের কোড, পারফরম্যান্স এবং অন্যান্য ডিবাগিং সমস্যা সনাক্ত করতে সহায়ক। Electron অ্যাপ্লিকেশনে, Chrome DevTools ব্যবহারের মাধ্যমে আপনি Main Process এবং Renderer Process এর মধ্যে ডিবাগিং এবং ট্রাবলশুটিং করতে পারেন।

১. DevTools ইন্টিগ্রেশন

Electron অ্যাপ্লিকেশনে ডিফল্টভাবে Chrome DevTools ইন্টিগ্রেটেড থাকে। Renderer Process এর জন্য এটি BrowserWindow এর সাথে সংযুক্ত থাকে। আপনি DevTools কে ওপেন বা ক্লোজ করতে পারবেন, এবং Main Process এ যে কোনো সমস্যা ডিবাগ করতে Console, Network, Elements, এবং Sources ট্যাব ব্যবহার করতে পারবেন।

DevTools ওপেন করা

DevTools ওপেন করার জন্য আপনি webContents.openDevTools() মেথড ব্যবহার করতে পারেন। এটি একটি নতুন উইন্ডোতে DevTools খুলে দিবে।

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
  
  // DevTools ওপেন করা
  mainWindow.webContents.openDevTools(); // DevTools ওপেন
});

এখানে openDevTools() ব্যবহার করে BrowserWindow এর সাথে সংযুক্ত DevTools খুলে যাবে, এবং আপনি সেখানে JavaScript, DOM এবং CSS কোড ডিবাগ করতে পারবেন।

২. DevTools ইন্টিগ্রেশন কনফিগারেশন

DevTools ইন্টিগ্রেশন কাস্টমাইজ করা যায়, যেমন:

• DevTools স্বয়ংক্রিয়ভাবে ওপেন হবে কিনা।
• DevTools এর জন্য শর্টকাট কীবোর্ড কনফিগার করা।
• DevTools এর উইন্ডো সেটিংস কনফিগার করা।

DevTools কাস্টম কনফিগারেশন

আপনি যদি চাইলে DevTools কাস্টমাইজও করতে পারেন, যেমন DevTools এর উইন্ডো ডকুমেন্টেশন ফোল্ডার ওপেন করা বা ফিচারগুলোর ব্যবহার বন্ধ করা।

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
  
  // DevTools উইন্ডো কাস্টমাইজ করে ওপেন করা
  mainWindow.webContents.openDevTools({ mode: 'detach' }); // DevTools আলাদা উইন্ডোতে ওপেন
});

এখানে, mode: 'detach' দ্বারা DevTools আলাদা উইন্ডোতে খুলবে, এবং DevTools এর ইন্টিগ্রেশনও কাস্টমাইজ করা যাবে।

৩. Main Process এর জন্য DevTools

যেহেতু Main Process Electron অ্যাপ্লিকেশনের ব্যাকএন্ড অংশ, তাই আপনি Main Process ডিবাগিং করতে Chrome DevTools ব্যবহার করতে পারেন।

যেহেতু Main Process নেটিভ Node.js রানটাইমে চলে, সেখানে DevTools ব্যবহারের জন্য আপনাকে remote debugging সক্রিয় করতে হবে।

Main Process ডিবাগিং

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // Main Process এর জন্য DevTools ইন্টিগ্রেশন
  require('electron').remote.getCurrentWindow().webContents.openDevTools();
});

এখানে, remote মডিউল ব্যবহার করে Main Process এর DevTools ওপেন করা হচ্ছে।

৪. Console এর মাধ্যমে ডিবাগিং

DevTools এ Console ট্যাব ব্যবহার করে আপনি JavaScript কোডের log দেখতে এবং অ্যাপ্লিকেশনের স্টেট এবং সমস্যা ট্র্যাক করতে পারেন। আপনি কোডে console.log() ব্যবহার করে ডিবাগ তথ্য প্রিন্ট করতে পারেন, যা DevTools এর Console ট্যাবে প্রদর্শিত হবে।

উদাহরণ: Console log ব্যবহারের মাধ্যমে ডিবাগিং

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // Console এ ডিবাগ তথ্য প্রিন্ট
  console.log("Electron app is ready!");

  // DevTools ওপেন করা
  mainWindow.webContents.openDevTools();
});

DevTools Console ট্যাবে "Electron app is ready!" এই বার্তাটি দেখতে পাবেন।

৫. Network, Performance এবং Sources ট্যাব ব্যবহার

DevTools এর Network, Performance, এবং Sources ট্যাব ব্যবহার করে আপনি আপনার অ্যাপের পারফরম্যান্স এবং নেটওয়ার্ক কল ট্র্যাক করতে পারবেন।

• Network: নেটওয়ার্ক রিকোয়েস্ট, রেসপন্স, এবং API কলগুলি দেখার জন্য ব্যবহৃত হয়।
• Performance: অ্যাপের পারফরম্যান্স বিশ্লেষণ করতে ব্যবহৃত হয়।
• Sources: JavaScript কোডের ডিবাগging, ব্রেকপয়েন্ট সেট করা এবং স্টেপ বাই স্টেপ কোড এক্সিকিউট করা।

৬. DevTools টুলস অটো ওপেন এবং বন্ধ করা

Electron অ্যাপ্লিকেশন শুরু হওয়ার সাথে সাথেই DevTools খুলে দিতে বা বন্ধ করে দিতে পারেন।

DevTools অটো ওপেন করা

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // DevTools স্বয়ংক্রিয়ভাবে ওপেন করা
  mainWindow.webContents.openDevTools();
});

DevTools অটো বন্ধ করা

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // DevTools বন্ধ করা
  mainWindow.webContents.closeDevTools();
});

সারাংশ

• Chrome DevTools Electron অ্যাপ্লিকেশনে ডিফল্টভাবে ইন্টিগ্রেটেড থাকে, যা Renderer Process এবং Main Process এর জন্য ডিবাগিং সুবিধা প্রদান করে।
• webContents.openDevTools() ব্যবহার করে আপনি DevTools ওপেন করতে পারেন।
• Console, Network, Performance, এবং Sources ট্যাব ব্যবহার করে আপনি কোড ডিবাগ, পারফরম্যান্স অ্যানালাইসিস, এবং নেটওয়ার্ক মনিটরিং করতে পারেন।
• DevTools কাস্টমাইজ এবং নিয়ন্ত্রণ করা সম্ভব, যেমন DevTools অটো ওপেন বা ক্লোজ করা, বা কাস্টম উইন্ডো মোডে খোলানো।

এভাবে DevTools ব্যবহারের মাধ্যমে আপনি আপনার Electron অ্যাপ্লিকেশনকে উন্নতভাবে ডিবাগ এবং অপটিমাইজ করতে পারবেন।