Chrome DevTools-এ স্বয়ংক্রিয় ওয়ার্কস্পেস সংযোগ

Ewa Gasperowicz
X

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

সংক্ষিপ্ত বিবরণ

Chrome DevTools-এর একটি ওয়ার্কস্পেস ওয়েব সার্ভার দ্বারা পরিবেশিত ফাইলগুলিকে আপনার কম্পিউটারের স্থানীয় ফোল্ডারের ফাইলগুলিতে ম্যাপ করে। যখন আপনি একটি স্থানীয় প্রকল্পের জন্য একটি ওয়ার্কস্পেস সক্ষম করেন, তখন DevTools-এর সোর্স প্যানেলে ফাইলগুলিতে করা যেকোনো পরিবর্তন স্বয়ংক্রিয়ভাবে আপনার স্থানীয় প্রকল্প ফাইলগুলিতে সংরক্ষিত হয়। এটি একটি নির্বিঘ্ন সম্পাদনার অভিজ্ঞতা প্রদান করে, যা আপনাকে আপনার প্রকল্পের কোডবেসে সরাসরি কাজ করার অনুভূতি দেয় এবং DevTools-এর রিয়েল-টাইম অন্তর্দৃষ্টি থেকে উপকৃত হয়।

স্বয়ংক্রিয় কর্মক্ষেত্র সংযোগের সুবিধা

স্বয়ংক্রিয় ওয়ার্কস্পেস সংযোগ ম্যানুয়াল কনফিগারেশন বাদ দিয়ে ওয়ার্কস্পেস সেটআপকে উন্নত করে। DevTools-এ ম্যানুয়ালি প্রোজেক্ট ফোল্ডার যোগ করার পরিবর্তে, আপনার স্থানীয় ডেভেলপমেন্ট সার্ভার একটি বিশেষ devtools.json ফাইল সরবরাহ করতে পারে যা Chrome DevTools স্বয়ংক্রিয়ভাবে সনাক্ত করে। এর বেশ কিছু সুবিধা রয়েছে:

  • দ্রুত ডিবাগিং: DevTools-এ ফাইল সম্পাদনা করুন এবং ব্রাউজারটি না রেখে বা ম্যানুয়ালি সংরক্ষণ না করেই তাৎক্ষণিকভাবে আপডেটগুলি দেখুন।
  • রিয়েল-টাইম পরিবর্তন: পরিবর্তনগুলি আপনার স্থানীয় ফাইল এবং ব্রাউজারে তাৎক্ষণিকভাবে প্রতিফলিত হয়, যার ফলে ডেভেলপমেন্টের গতি বৃদ্ধি পায়।
  • কোনও ম্যানুয়াল সেটআপ নেই: প্রকল্প ফাইলগুলির ম্যাপিং স্বয়ংক্রিয় করে, সেটআপের সময় হ্রাস করে, বিশেষ করে নতুন প্রকল্পের জন্য বা দলের সদস্যদের অনবোর্ড করার সময়।

স্বয়ংক্রিয় কর্মক্ষেত্র সংযোগ কীভাবে কাজ করে?

স্বয়ংক্রিয় ওয়ার্কস্পেস সংযোগ আপনার স্থানীয় ডেভেলপমেন্ট সার্ভারকে একটি পূর্বনির্ধারিত পথে একটি নির্দিষ্ট JSON ফাইল প্রকাশ করার মাধ্যমে কাজ করে। যখন Chrome DevTools খোলা থাকে এবং আপনি localhost থেকে পরিবেশিত একটি ওয়েবসাইট নেভিগেট করেন, তখন এটি স্বয়ংক্রিয়ভাবে একটি অনুরোধ পাঠায়:

/.well-known/appspecific/com.chrome.devtools.json

যদি আপনার সার্ভার একটি বৈধ devtools.json ফাইলের সাথে সাড়া দেয়, তাহলে DevTools এর মধ্যে থাকা তথ্য ব্যবহার করে আপনার প্রোজেক্টের সোর্স ফোল্ডারে স্বয়ংক্রিয়ভাবে সংযোগ স্থাপন করে। devtools.json ফাইলে সাধারণত থাকে:

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}
  • workspace.root : আপনার স্থানীয় ফাইল সিস্টেমে আপনার প্রকল্পের রুট ডিরেক্টরিতে যাওয়ার পরম পথ।
  • workspace.uuid : আপনার প্রকল্পের জন্য একটি অনন্য শনাক্তকারী (UUID v4)। এটি DevTools কে বিভিন্ন প্রকল্পের মধ্যে পার্থক্য করতে সাহায্য করে।

DevTools একবার এই ফাইলটি গ্রহণ এবং প্রক্রিয়া করার পরে, এটি Sources > Workspaces প্যানেলে একটি Connect বোতাম অফার করে।

স্থানীয় উন্নয়ন এবং ডিবাগিংয়ের জন্য ডিজাইন করা হয়েছে

devtools.json এর মাধ্যমে স্বয়ংক্রিয় ওয়ার্কস্পেস আবিষ্কার প্রক্রিয়াটি কেবলমাত্র স্থানীয় ডেভেলপমেন্ট পরিবেশের জন্য ডিজাইন করা হয়েছে এবং শুধুমাত্র তখনই কাজ করে যখন আপনার অ্যাপ্লিকেশনটি localhost থেকে পরিবেশিত হয়। Chrome DevTools শুধুমাত্র স্থানীয় প্রকল্প ডিবাগ করার সময় ডেভেলপমেন্ট মোডে /.well-known/appspecific/com.chrome.devtools.json অনুরোধ পাঠায়। এই বৈশিষ্ট্যটি উৎপাদন পরিবেশের জন্য নয়।

স্থানীয় ফাইল অ্যাক্সেস করার অনুমতি দিন

নিরাপত্তার কারণে, আপনার স্থানীয় নেটওয়ার্ক বা মেশিনে ফাইল অ্যাক্সেস করার জন্য Chrome-এর কোনও ওয়েবসাইটের জন্য স্পষ্ট ব্যবহারকারীর অনুমতি প্রয়োজন। যখন DevTools devtools.json ব্যবহার করে আপনার স্থানীয় প্রকল্পের সাথে সংযোগ স্থাপনের চেষ্টা করে, তখন আপনাকে Chrome-কে আপনার প্রকল্পের ডিরেক্টরি অ্যাক্সেস করার অনুমতি দিতে বলা হবে। এই অনুমতি অনুরোধটি Chrome-এর স্থানীয় নেটওয়ার্ক অ্যাক্সেস নীতি মেনে চলে, যা অনুমতি না দেওয়া পর্যন্ত পাবলিক নেটওয়ার্ক থেকে স্থানীয় গন্তব্যস্থলে অনুরোধগুলিকে সীমাবদ্ধ করে। এই অনুমতি অনুরোধ করার ক্ষমতা সুরক্ষিত প্রসঙ্গ (HTTPS) পর্যন্ত সীমাবদ্ধ। স্থানীয় বিকাশের জন্য, এর অর্থ সাধারণত localhost একটি সুরক্ষিত প্রসঙ্গ হিসাবে বিবেচনা করা হয়।

একটি devtools.json ফাইল তৈরি করুন এবং পরিবেশন করুন

স্থানীয় ডেভেলপমেন্ট সার্ভারে চলমান একটি সাধারণ ফ্রন্টএন্ড প্রকল্পের জন্য, আপনাকে আপনার সার্ভারটি /.well-known/appspecific/com.chrome.devtools.json অনুরোধের উত্তর সঠিক JSON সামগ্রী সহ কনফিগার করতে হবে।

আপনি সাধারণত এটি কীভাবে করতে পারেন তা এখানে:

  1. একটি UUID তৈরি করুন: আপনার একটি UUID v4 প্রয়োজন হবে। আপনি অনলাইন টুল বা স্ক্রিপ্ট ব্যবহার করে একটি তৈরি করতে পারেন।
  2. প্রকল্পের রুট নির্ধারণ করুন: আপনার প্রকল্পের রুট ডিরেক্টরিতে যাওয়ার পরম পথ পান।
  3. একটি এন্ডপয়েন্ট তৈরি করুন: /.well-known/appspecific/com.chrome.devtools.json এ GET অনুরোধগুলি পরিচালনা করার জন্য আপনার ডেভেলপমেন্ট সার্ভারটি কনফিগার করুন।
  4. JSON পরিবেশন করুন: যখন এই এন্ডপয়েন্টটি হিট করা হয়, তখন Content-Type: application/json হেডার এবং devtools.json কন্টেন্ট সহ একটি JSON প্রতিক্রিয়া পরিবেশন করুন।

আপনার devtools.json ফাইলে উল্লেখিত workspace.root পাথটি স্থানীয় ফাইল সিস্টেমে আপনার প্রোজেক্টের রুট ডিরেক্টরিতে যাওয়ার জন্য একটি সম্পূর্ণ পাথ হতে হবে। এর অর্থ হল আপনার অপারেটিং সিস্টেমের (উদাহরণস্বরূপ, macOS বা Linux-এ /Users/yourname/projects/my-app অথবা Windows-এ C:\Users\yourname\projects\my-app ) এবং আপনার নির্দিষ্ট প্রোজেক্ট সেটআপের উপর নির্ভর করে পাথটি পরিবর্তিত হবে। প্রোডাকশন পরিবেশের জন্য এই ফাইলটি চেক করা এড়াতে এটিকে আপনার উপেক্ষিত ফাইলগুলিতে (যেমন .gitignore তালিকায়) যুক্ত করার কথা বিবেচনা করুন।

আপনার সার্ভারটি এই পাথটি গতিশীলভাবে তৈরি বা পরিবেশন করে অথবা আপনার ডেভেলপমেন্ট পরিবেশের জন্য এটি সঠিকভাবে কনফিগার করা গুরুত্বপূর্ণ। প্রোডাকশন পরিবেশের জন্য এই ফাইলটি চেক করা এড়াতে এটিকে আপনার উপেক্ষিত ফাইলগুলিতে (উদাহরণস্বরূপ, .gitignore তালিকায়) যুক্ত করার কথা বিবেচনা করুন।

উদাহরণ

আপনার প্রোজেক্টের টেক স্ট্যাকের উপর নির্ভর করে আপনি devtools.json ফাইলটি অনেক উপায়ে প্রদান করতে পারেন।

Node.js এবং Express

এই স্ক্রিপ্টটি একটি ন্যূনতম এক্সপ্রেস সার্ভার চালায়। এটি /.well-known/appspecific/com.chrome.devtools.json এ একটি JSON ফাইল পরিবেশন করে যাতে projectRoot. এটি সেই ফোল্ডারে নির্দেশ করে যেখান থেকে সার্ভারটি চালানো হয়। projectRoot ভেরিয়েবলটি আপনার প্রোজেক্টের আসল রুট ডিরেক্টরিতে সঠিকভাবে নির্দেশ করার জন্য সামঞ্জস্য করুন, আপনার সার্ভার স্ক্রিপ্টটি কোথায় থাকে তা নয়।

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

devtools-json-generator স্ক্রিপ্ট ব্যবহার করুন

তুমি generate-devtools-json ব্যবহার করে devtools.json তৈরি করতে পারো।

বর্তমান ডিরেক্টরিতে devtools.json ফাইলটি তৈরি করতে, চালান:

npx generate-devtools-json

অথবা, একটি নির্দিষ্ট ডিরেক্টরিতে ফাইল তৈরি করতে, ডিরেক্টরিটিকে একটি আর্গুমেন্ট হিসেবে পাস করুন:

npx generate-devtools-json /path/to/your/project

devtools-json-generator সম্পর্কে আরও পড়ুন প্রকল্পের হোমপেজে ।

ইন্টিগ্রেশন

কিছু ফ্রন্টএন্ড ফ্রেমওয়ার্ক এবং বিল্ড টুল এই প্রক্রিয়াটিকে সহজ করার জন্য প্লাগইন বা কনফিগারেশন অফার করে।

ভাইট

Vite-ভিত্তিক প্রকল্পগুলির জন্য (SvelteKit সহ), vite-plugin-devtools-json একটি সমাধান। এটি devtools.json ফাইলের জেনারেশন এবং পরিবেশন স্বয়ংক্রিয়ভাবে করে।

এটি ব্যবহার করতে, প্লাগইনটি ইনস্টল করুন:

npm install -D vite-plugin-devtools-json

তারপর, এটি আপনার vite.config.js (অথবা vite.config.ts ) এ যোগ করুন:

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

কৌণিক

যদি আপনি আপনার Angular প্রকল্পটি স্থানীয়ভাবে চালানোর জন্য ng serve ব্যবহার করেন (এবং আপনার @angular/cli সংস্করণটি কমপক্ষে 19.0.0 হয়), তাহলে Angular CLI মিডলওয়্যার সরবরাহ করে যা আপনার জন্য স্বয়ংক্রিয়ভাবে সঠিক devtools.json ফাইলটি পরিবেশন করে।

উদাহরণস্বরূপ, একটি নতুন অ্যাপ্লিকেশন তৈরি এবং চালানোর জন্য:

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

যখন আপনি https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json তে নেভিগেট করবেন, তখন আপনি জেনারেট করা JSON ফাইলটি দেখতে পাবেন।

সমস্যা সমাধান

এই বিভাগের টিপস অনুসরণ করে আপনি স্বয়ংক্রিয় কর্মক্ষেত্র সংযোগ সম্পর্কিত সাধারণ সমস্যাগুলি সমাধান করতে পারেন।

ওয়ার্কস্পেস থেকে একটি ফোল্ডার সরান

যদি কোনও প্রজেক্ট ফোল্ডার ইতিমধ্যেই স্বয়ংক্রিয়ভাবে সংযুক্ত হয়ে থাকে, তাহলে আপনি আপনার DevTools ওয়ার্কস্পেস সেটিংস থেকে ম্যানুয়ালি এটি সরাতে পারেন:

  • Chrome DevTools খুলুন।
  • সোর্স ট্যাবে যান।
  • বাম দিকের প্যানেলে, Workspaces সাব-ট্যাবটি নির্বাচন করুন।
  • অবাঞ্ছিত প্রকল্প ফোল্ডারে ডান-ক্লিক করুন এবং ওয়ার্কস্পেস থেকে সরান নির্বাচন করুন।

সার্ভারে 404 ত্রুটি উপেক্ষা করুন

যদি আপনি এই বৈশিষ্ট্যটি কোনও নির্দিষ্ট প্রকল্পের জন্য ব্যবহার করতে না চান এবং আপনার সার্ভার লগে /.well-known/appspecific/com.chrome.devtools.json অনুরোধের জন্য 404 ত্রুটি দেখতে পান, তাহলে আপনি এই ত্রুটিগুলি উপেক্ষা করতে পারেন। ফাইলটি পরিবেশন না করা হলে অনুরোধটি ক্ষতিকারক নয়। বিকল্পভাবে, আপনি কোনও ত্রুটি লগ না করেই এই নির্দিষ্ট পথের জন্য 404 স্থিতি সহ প্রতিক্রিয়া জানাতে আপনার সার্ভারটি কনফিগার করতে পারেন।

Chrome DevTools-এ এই বৈশিষ্ট্যটি কীভাবে অক্ষম করবেন

যদি আপনার Chrome DevTools-এ স্বয়ংক্রিয় ওয়ার্কস্পেস আবিষ্কার বৈশিষ্ট্যটি অক্ষম করতে হয়, তাহলে আপনাকে উপযুক্ত Chrome পতাকা সেট করতে হবে:

  • Chrome খুলুন এবং chrome://flags এ নেভিগেট করুন।
  • " DevTools Project Settings " অনুসন্ধান করুন এবং এটিকে Disabled এ সেট করুন।
  • আপনি " DevTools Automatic Workspace Folders " নামে একটি সম্পর্কিত পতাকাও খুঁজে পেতে পারেন এবং এটিও অক্ষম করতে পারেন।
  • পরিবর্তনগুলি কার্যকর হওয়ার জন্য Chrome পুনরায় চালু করুন।

সারাংশ

devtools.json মেকানিজম বোঝার এবং ব্যবহার করার মাধ্যমে, আপনি Chrome DevTools এর সাহায্যে আপনার স্থানীয় ডেভেলপমেন্ট ওয়ার্কফ্লো উল্লেখযোগ্যভাবে উন্নত করতে পারেন।