সোর্স ফাইলে পরিবর্তন সেভ করতে ওয়ার্কস্পেস সেট-আপ করুন

Kayce Basques

Sofia Emelianova

DevTools-এ করা পরিবর্তনগুলি আপনার কম্পিউটারের সোর্স ফাইলে সেভ করতে, একটি ওয়ার্কস্পেস সেট-আপ করুন। আপনি কনফিগারেশন ফাইল পরিবেশন করে DevTools-এ অটোমেটিক ওয়ার্কস্পেস ফোল্ডার কানেক্ট করতে পারেন অথবা Sources প্যানেলে ম্যানুয়ালি ওয়ার্কস্পেস লোকেশন যোগ করতে পারেন।

এক নজরে

ওয়ার্কস্পেস ফোল্ডারে অটোমেটিক (বা ম্যানুয়াল) কানেকশন আপনাকে DevTools-এ করা পরিবর্তন আপনার কম্পিউটারে একই ফাইলের লোকাল কপিতে সেভ করতে দেয়। যেমন, ধরুন:

• আপনার ডেস্কটপে সাইটের সোর্স কোড আছে।
• আপনি সোর্স কোড ডিরেক্টরি থেকে একটি লোকাল ওয়েব সার্ভার চালাচ্ছেন, যাতে সাইটটি localhost:PORT-এ অ্যাক্সেস করা যায় এবং এটি মেটাডেটা (পরে বর্ণনা করা হয়েছে) সহ একটি সাধারণ JSON ফাইলও পরিবেশন করে।
• আপনি Google Chrome-এ localhost:PORT খুলেছেন এবং সাইটের CSS পরিবর্তন করতে DevTools ব্যবহার করছেন।

Workspace ফোল্ডার কানেক্ট করা থাকলে, সোর্স প্যানেলে CSS, HTML ও JavaScript ফাইলে আপনি যেসব পরিবর্তন করেন, সেগুলি আপনার কম্পিউটারের সোর্স কোডে সেভ হয়ে যায়। তবে, এলিমেন্ট প্যানেলে DOM-এ আপনি যেসব পরিবর্তন করেন, DevTools সেগুলি সেভ করে না।

এছাড়াও, DevTools সাধারণত সোর্স ম্যাপের সাহায্যে অপ্টিমাইজ করা কোডকে আপনার আসল সোর্স কোডে ম্যাপ করতে পারে।

কানেকশনের জন্য মেটাডেটা জেনারেট করুন

DevTools-কে আপনার ওয়ার্কস্পেস ফোল্ডার অটোমেটিক খুঁজে পেতে দেওয়ার জন্য, একটি র‍্যান্ডম ভার্সন 4 UUID তৈরি করুন এবং নিম্নলিখিত JSON ফাইলে এটি রাখুন:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

তারপর JSON ফাইলটি path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json-এ রাখুন।

সবশেষে, আপনার লোকাল HTTP সার্ভার চালান এবং JSON ফাইলও পরিবেশন করতে ভুলবেন না।

বিকল্প হিসেবে, আপনি এই ধাপটি এড়িয়ে যেতে এবং ম্যানুয়ালি ফোল্ডার কানেকশন সেট-আপ করতে পারবেন।

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

মনে রাখবেন: এই এবং পরবর্তী ধাপগুলি ফিচারটি দেখানোর জন্য অটোমেটিক Workspace ফোল্ডার ডেমো ব্যবহার করে।

কোনও ফোল্ডার কানেক্ট করতে:

1. Chrome-এ, আপনার স্থানীয়ভাবে হোস্ট করা পৃষ্ঠায় (এই উদাহরণে, localhost:8000-এ) নেভিগেট করুন এবং DevTools খুলুন।

2. সোর্স > Workspace-এ গিয়ে আপনার ফোল্ডারের পাশে কানেক্ট করুন বিকল্পে ক্লিক করুন।

   

3. প্রম্পট করা হলে, DevTools-কে আপনার ফোল্ডার অ্যাক্সেস করার অনুমতি দিতে ফাইল এডিট করুন বিকল্পে ক্লিক করুন।

   

4. কানেক্ট করা হয়ে গেলে, আপনি Workspace ট্যাবে ফোল্ডার খুলতে পারবেন।

   

Workspace ট্যাবে HTML, CSS ও JavaScript ফাইলের পাশে সবুজ ডট দেখানো হয়। এই সবুজ ডটগুলি দেখায় যে DevTools, পৃষ্ঠার নেটওয়ার্ক রিসোর্স এবং ফোল্ডারের ফাইলের মধ্যে ম্যাপিং তৈরি করেছে।

সোর্স ফোল্ডারে পরিবর্তন সেভ করুন

কানেক্ট করা ওয়ার্কস্পেস ফোল্ডারে আপনি যেকোনও CSS, HTML ও JavaScript ফাইলে পরিবর্তন সেভ করতে পারবেন।

CSS-এ পরিবর্তন সেভ করুন

পরামর্শ: কানেক্ট করা ওয়ার্কস্পেস ফোল্ডারের সাথে, AI সহায়তা প্যানেল আপনার সোর্সে CSS পরিবর্তন অটোমেটিক সেভ করতে পারে।

CSS-এ পরিবর্তন সেভ করতে:

1. Sources > Workspaces-এ আপনার কানেক্ট করা ওয়ার্কস্পেস ফোল্ডার থেকে একটি CSS ফাইল খুলুন।

2. আপনার CSS-এ পরিবর্তন করুন।

   মনে রাখবেন: পরিবর্তনটি লাইভ পৃষ্ঠায় প্রযোজ্য হলেও সোর্সে এখনও প্রযোজ্য হয়নি।

3. পরিবর্তন সেভ করুন, যেমন, Ctrl / Cmd + S প্রেস করে এবং আপনার সোর্স ফাইলে প্রয়োগ করা পরিবর্তন দেখুন। সোর্স প্যানেল আপনাকে ফাইলের নামের পাশে একটি সবুজ ডট দেখায়।

   মনে রাখবেন: CSS-এ করা পরিবর্তন প্রয়োগ ও সেভ করার জন্য আপনাকে পৃষ্ঠা রিলোড করতে হবে না।

ওয়ার্কফ্লো সম্পর্কে জানতে, ভিডিওটি দেখুন:

HTML-এ পরিবর্তন সেভ করুন

HTML-এ পরিবর্তন সেভ করতে:

1. সোর্স > ওয়ার্কস্পেস থেকে আপনার কানেক্ট করা ওয়ার্কস্পেস ফোল্ডার থেকে একটি HTML ফাইল খুলুন।

2. আপনার HTML-এ পরিবর্তন করুন।

   মনে রাখবেন: কোনও পরিবর্তন লাইভ পৃষ্ঠা বা সোর্সে এখনও প্রযোজ্য নয়।

3. পরিবর্তন সেভ করুন, যেমন, Ctrl / Cmd + S প্রেস করে এবং আপনার সোর্স ফাইলে প্রয়োগ করা পরিবর্তন দেখুন। সোর্স প্যানেল আপনাকে ফাইলের নামের পাশে একটি সবুজ ডট দেখায়।

4. পরিবর্তন কার্যকর হয়েছে কিনা তা দেখতে পৃষ্ঠাটি আবার লোড করুন।

ওয়ার্কফ্লো সম্পর্কে জানতে, ভিডিওটি দেখুন:

মনে রাখবেন: আপনি সোর্স প্যানেল থেকে HTML পরিবর্তন প্রয়োগ ও সেভ করতে পারবেন, তবে এলিমেন্ট প্যানেল থেকে নয়।

এলিমেন্ট প্যানেল থেকে আপনি কেন HTML পরিবর্তন করতে পারবেন না?

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

সংক্ষেপে, DOM ট্রি !== HTML.

JavaScript-এ পরিবর্তন সেভ করুন

জাভাস্ক্রিপ্টে পরিবর্তন সেভ করতে:

1. Sources > Workspaces থেকে আপনার কানেক্ট করা ওয়ার্কস্পেস ফোল্ডার থেকে একটি JavaScript ফাইল খুলুন।

2. আপনার জাভাস্ক্রিপ্টে পরিবর্তন করুন।

   মনে রাখবেন: কোনও পরিবর্তন লাইভ পৃষ্ঠা বা সোর্সে এখনও প্রযোজ্য নয়।

3. পরিবর্তন সেভ করুন, যেমন, Ctrl / Cmd + S প্রেস করে এবং আপনার সোর্স ফাইলে প্রয়োগ করা পরিবর্তন দেখুন। সোর্স প্যানেল আপনাকে ফাইলের নামের পাশে একটি সবুজ ডট দেখায়।

4. আপনার লোকাল HTTP সার্ভার যদি লাইভ সোর্স ফাইল পরিবর্তন শোনে এবং পৃষ্ঠাটি অটোমেটিক রিলোড করে, তাহলে আপনি DevTools-এ পরিবর্তনগুলি সেভ করার পরে সেগুলি প্রয়োগ করা দেখতে পাবেন। অন্যথায়, আপনার স্থানীয় সার্ভার আবার ডেপ্লয় করুন।

ওয়ার্কফ্লো সম্পর্কে জানতে, ভিডিওটি দেখুন:

পরামর্শ: জাভাস্ক্রিপ্ট পরিবর্তন করার সময়, কখনও কখনও আপনাকে অন্যান্য প্যানেল অ্যাক্সেস করতে হয়, যেমন এলিমেন্ট প্যানেল বা কনসোল। এটি করতে, আপনি ড্রয়ার এবং প্যানেল আবার সাজান বিকল্প ব্যবহার করতে পারবেন।

Workspace ফোল্ডার কানেকশন সরানো

কোনও ওয়ার্কস্পেস ফোল্ডার কানেকশন সরাতে, সোর্স > ওয়ার্কস্পেস-এ গিয়ে, ফোল্ডারের উপর ডানদিকের বোতামে ক্লিক করুন, ড্রপ-ডাউন মেনু থেকে ওয়ার্কস্পেস থেকে সরান বিকল্প বেছে নিন এবং সরান বিকল্পে ক্লিক করুন।

মনে রাখবেন: মেটাডেটা JSON ফাইলে ফোল্ডারের UUID পরিবর্তন বা মুছে দিলেও ফোল্ডারটি ডিসকানেক্ট হয়ে যায়।

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

1. আপনার লোকাল-হোস্ট করা পৃষ্ঠায় DevTools খুলুন।

2. সোর্স > Workspace-এ গিয়ে ম্যানুয়ালি ফোল্ডার যোগ করুন বিকল্পে ক্লিক করুন। তারপর আপনার সোর্স ফাইল সহ একটি ফোল্ডার বেছে নিন।

   

   মনে রাখবেন: আপনি সোর্স প্যানেলে ফোল্ডার টেনে আনতে পারবেন।

3. তারপর ওয়ার্কস্পেস ফোল্ডার কানেক্ট করুন বিকল্পে গিয়ে ৩ ও ৪ নম্বর ধাপ অনুসরণ করুন।

সীমাবদ্ধতা

আপনি যদি কোনও আধুনিক ফ্রেমওয়ার্ক ব্যবহার করেন, তাহলে এটি সম্ভবত আপনার সোর্স কোডকে এমন একটি ফর্ম্যাট থেকে রূপান্তরিত করে যা আপনার পক্ষে বজায় রাখা সহজ এবং যত তাড়াতাড়ি সম্ভব চালানোর জন্য অপ্টিমাইজ করা হয়েছে। একটি ওয়ার্কস্পেস ফোল্ডার কানেকশন সাধারণত সোর্স ম্যাপ-এর সাহায্যে অপ্টিমাইজ করা কোডটিকে আপনার আসল সোর্স কোডে ম্যাপ করতে পারে।

DevTools কমিউনিটি বিভিন্ন ফ্রেমওয়ার্ক ও টুল জুড়ে সোর্স ম্যাপের মাধ্যমে প্রদান করা ক্ষমতাকে সাপোর্ট করার জন্য কাজ করে। আপনার পছন্দের ফ্রেমওয়ার্কের সাথে ওয়ার্কস্পেস ব্যবহার করার সময় কোনও সমস্যা হলে অথবা কিছু কাস্টম কনফিগারেশনের পরে এটি কাজ করলে, মেলিং লিস্টে একটি থ্রেড শুরু করুন অথবা Stack Overflow-তে প্রশ্ন করুন যাতে DevTools কমিউনিটির বাকিদের সাথে আপনার জ্ঞান শেয়ার করতে পারেন।

পরবর্তী ধাপ

আগে থেকে সেট-আপ করা সব ফোল্ডার আপনি সেটিংস > Workspace থেকে ম্যানেজ করতে পারবেন।

এরপর, CSS পরিবর্তন করতে এবং JavaScript ডিবাগ করতে DevTools কীভাবে ব্যবহার করবেন তা জানুন।

এছাড়াও দেখুন

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