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

ওয়ার্কস্পেস হল একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে 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 এই ফাইলটি গ্রহণ করে এবং প্রক্রিয়া করে, এটি উত্স > ওয়ার্কস্পেস প্যানেলে একটি সংযোগ বোতাম অফার করে।

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

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

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

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

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

একটি স্থানীয় উন্নয়ন সার্ভারে চলমান একটি সাধারণ ফ্রন্টএন্ড প্রকল্পের জন্য, সঠিক JSON সামগ্রী সহ /.well-known/appspecific/com.chrome.devtools.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 পাথটি অবশ্যই স্থানীয় ফাইল সিস্টেমে আপনার প্রকল্পের রুট ডিরেক্টরির একটি সম্পূর্ণ পাথ হতে হবে। এর মানে আপনার অপারেটিং সিস্টেম (উদাহরণস্বরূপ, ম্যাকওএস বা লিনাক্সে /Users/yourname/projects/my-app বা উইন্ডোজে 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 স্ক্রিপ্ট ব্যবহার করুন

আপনি আপনার জন্য devtools.json তৈরি করতে generate-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',
    }),
  ],
});

কৌণিক

আপনি যদি স্থানীয়ভাবে আপনার কৌণিক প্রকল্প চালানোর জন্য 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 খুলুন।
• সোর্স ট্যাবে যান।
• বাম দিকের প্যানেলে, ওয়ার্কস্পেস সাব-ট্যাব নির্বাচন করুন।
• অবাঞ্ছিত প্রকল্প ফোল্ডারে ডান-ক্লিক করুন এবং ওয়ার্কস্পেস থেকে সরান নির্বাচন করুন।

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

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

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

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

• Chrome খুলুন এবং chrome://flags এ নেভিগেট করুন।
• " DevTools প্রজেক্ট সেটিংস " অনুসন্ধান করুন এবং এটি নিষ্ক্রিয় এ সেট করুন।
• আপনি " DevTools স্বয়ংক্রিয় ওয়ার্কস্পেস ফোল্ডার " নামে একটি সম্পর্কিত পতাকাও খুঁজে পেতে পারেন এবং এটি অক্ষমও করতে পারেন৷
• পরিবর্তনগুলি কার্যকর করার জন্য Chrome পুনরায় চালু করুন৷

সারাংশ

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