একটি কর্মক্ষেত্রে ফাইলগুলি সম্পাদনা এবং সংরক্ষণ করুন

Kayce Basques

Sofia Emelianova

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

ওভারভিউ

Workspace আপনাকে আপনার কম্পিউটারে একই ফাইলের স্থানীয় অনুলিপিতে DevTools-এ করা পরিবর্তন সংরক্ষণ করতে দেয়। উদাহরণস্বরূপ, ধরুন:

• আপনার ডেস্কটপে আপনার সাইটের জন্য সোর্স কোড আছে।
• আপনি সোর্স কোড ডিরেক্টরি থেকে একটি স্থানীয় ওয়েব সার্ভার চালাচ্ছেন, যাতে সাইটটি localhost:8080 এ অ্যাক্সেসযোগ্য হয়।
• আপনি Google Chrome-এ localhost:8080 ওপেন পেয়েছেন এবং আপনি সাইটের CSS পরিবর্তন করতে DevTools ব্যবহার করছেন।

ওয়ার্কস্পেস চালু থাকলে, আপনি DevTools-এর মধ্যে যে CSS পরিবর্তনগুলি করেন তা আপনার ডেস্কটপের সোর্স কোডে সংরক্ষিত হয়।

সীমাবদ্ধতা

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

DevTools সম্প্রদায় বিভিন্ন ফ্রেমওয়ার্ক এবং টুল জুড়ে সোর্স ম্যাপ দ্বারা প্রদত্ত ক্ষমতাগুলিকে সমর্থন করার জন্য কাজ করে৷ আপনার পছন্দের ফ্রেমওয়ার্কের সাথে একটি ওয়ার্কস্পেস ব্যবহার করার সময় আপনি যদি সমস্যায় পড়েন বা আপনি কিছু কাস্টম কনফিগারেশনের পরে এটি কাজ করতে শুরু করেন, তাহলে মেইলিং তালিকায় একটি থ্রেড শুরু করুন বা বাকি DevTools সম্প্রদায়ের সাথে আপনার জ্ঞান ভাগ করে নিতে স্ট্যাক ওভারফ্লোতে একটি প্রশ্ন জিজ্ঞাসা করুন .

সম্পর্কিত বৈশিষ্ট্য: স্থানীয় ওভাররাইড

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

ধাপ 1: সেটআপ

একটি কর্মক্ষেত্রের সাথে অভিজ্ঞতা পেতে এই টিউটোরিয়ালটি সম্পূর্ণ করুন।

ডেমো সেট আপ করুন

1. আপনার কম্পিউটারের কিছু ডিরেক্টরিতে এই ডেমো সংগ্রহস্থলটি ক্লোন করুন। উদাহরণস্বরূপ, ~/Desktop ।

2. ~/Desktop/devtools-workspace-demo এ একটি স্থানীয় ওয়েব সার্ভার শুরু করুন। নিচে SimpleHTTPServer শুরু করার জন্য কিছু নমুনা কোড রয়েছে, কিন্তু আপনি যে সার্ভার পছন্দ করেন তা ব্যবহার করতে পারেন।

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   এই টিউটোরিয়ালের বাকি অংশের জন্য এই ডিরেক্টরিটিকে /devtools-workspace-demo হিসাবে উল্লেখ করা হবে।

3. Google Chrome-এ একটি ট্যাব খুলুন এবং সাইটের স্থানীয়ভাবে হোস্ট করা সংস্করণে যান। আপনি localhost:8000 মত একটি URL এর মাধ্যমে এটি অ্যাক্সেস করতে সক্ষম হবেন। সঠিক পোর্ট নম্বর ভিন্ন হতে পারে।

   

DevTools সেট আপ করুন

1. স্থানীয়ভাবে হোস্ট করা ডেমো পৃষ্ঠায় DevTools খুলুন ।

2. সোর্স > ওয়ার্কস্পেস- এ নেভিগেট করুন এবং আপনার ক্লোন করা devtools-workspace-demo ফোল্ডারে একটি ওয়ার্কস্পেস সেট আপ করুন। আপনি এটি বিভিন্ন উপায়ে করতে পারেন:

   • ফোল্ডারটিকে টেনে আনুন এবং উৎসের সম্পাদকে ড্রপ করুন।
   • ফোল্ডার নির্বাচন করুন লিঙ্কে ক্লিক করুন এবং ফোল্ডারটি নির্বাচন করুন।
   • ক্লিক করুন ফোল্ডার যোগ করুন এবং ফোল্ডার নির্বাচন করুন।

3. উপরের প্রম্পটে, DevTools-কে ডিরেক্টরিতে পড়তে এবং লেখার অনুমতি দিতে অনুমতি দিন -এ ক্লিক করুন।

   

ওয়ার্কস্পেস ট্যাবে, এখন index.html , script.js , এবং styles.css এর পাশে একটি সবুজ বিন্দু রয়েছে। এই সবুজ বিন্দুগুলির অর্থ হল DevTools পৃষ্ঠার নেটওয়ার্ক সংস্থান এবং devtools-workspace-demo এর ফাইলগুলির মধ্যে একটি ম্যাপিং স্থাপন করেছে।

ধাপ 2: ডিস্কে একটি CSS পরিবর্তন সংরক্ষণ করুন

1. একটি টেক্সট এডিটরে /devtools-workspace-demo/styles.css খুলুন। লক্ষ্য করুন কিভাবে h1 উপাদানের color বৈশিষ্ট্য fuchsia এ সেট করা হয়েছে।

   

2. পাঠ্য সম্পাদক বন্ধ করুন।

3. DevTools-এ ফিরে এসে এলিমেন্ট ট্যাবে ক্লিক করুন।

4. আপনার পছন্দের রঙে <h1> উপাদানের color বৈশিষ্ট্যের মান পরিবর্তন করুন। এটি করতে:

   1. DOM Tree- এ <h1> এলিমেন্টে ক্লিক করুন।
   2. স্টাইল প্যানে, h1 { color: fuchsia } CSS নিয়মটি খুঁজুন এবং আপনার পছন্দের রঙে পরিবর্তন করুন। এই উদাহরণে, রঙ সবুজ সেট করা হয়.

   

   সবুজ বিন্দু styles.css:1 এর পাশে স্টাইল প্যানে মানে হল আপনার করা যেকোনো পরিবর্তন /devtools-workspace-demo/styles.css এ ম্যাপ করা হয়েছে।

5. টেক্সট এডিটরে আবার /devtools-workspace-demo/styles.css খুলুন। color সম্পত্তি এখন আপনার পছন্দের রঙে সেট করা হয়েছে।

6. পৃষ্ঠাটি পুনরায় লোড করুন। <h1> উপাদানটির রঙ এখনও আপনার পছন্দের রঙে সেট করা আছে। এটি কাজ করে কারণ আপনি যখন পরিবর্তন করেছেন এবং DevTools পরিবর্তনটি ডিস্কে সংরক্ষণ করেছে। এবং তারপর, আপনি যখন পৃষ্ঠাটি পুনরায় লোড করেন, তখন আপনার স্থানীয় সার্ভারটি ডিস্ক থেকে ফাইলটির পরিবর্তিত অনুলিপি পরিবেশন করে।

ধাপ 3: ডিস্কে একটি HTML পরিবর্তন সংরক্ষণ করুন

এলিমেন্ট প্যানেল থেকে HTML পরিবর্তন করার চেষ্টা করুন

1. এলিমেন্ট ট্যাব খুলুন।

2. Workspaces Demo বলে h1 উপাদানের পাঠ্য বিষয়বস্তুতে ডাবল ক্লিক করুন এবং এটিকে I ❤️ Cake দিয়ে প্রতিস্থাপন করুন।

   

3. একটি টেক্সট এডিটরে /devtools-workspace-demo/index.html খুলুন। আপনি যে পরিবর্তনটি করেছেন তা সেখানে নেই।

4. পৃষ্ঠাটি পুনরায় লোড করুন। পৃষ্ঠাটি তার মূল শিরোনামে ফিরে আসে।

ঐচ্ছিক: কেন এটি কাজ করে না

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

সংক্ষেপে, ডম ট্রি !== HTML।

উৎস প্যানেল থেকে HTML পরিবর্তন করুন

আপনি যদি পৃষ্ঠার HTML-এ একটি পরিবর্তন সংরক্ষণ করতে চান তবে উত্স প্যানেলে এটি করুন৷

1. সূত্র > পৃষ্ঠায় নেভিগেট করুন।
2. ক্লিক করুন (সূচী) । পৃষ্ঠার জন্য HTML খোলে।
3. <h1>Workspaces Demo</h1> এর বদলে <h1>I ❤️ Cake</h1> ।
4. পরিবর্তনটি সংরক্ষণ করতে Command + S (Mac) বা Control + S (Windows, Linux, ChromeOS) টিপুন।

5. পৃষ্ঠাটি পুনরায় লোড করুন। <h1> উপাদানটি এখনও নতুন পাঠ্য প্রদর্শন করছে।

   

6. /devtools-workspace-demo/index.html খুলুন। <h1> উপাদানটিতে নতুন পাঠ্য রয়েছে।

ধাপ 4: একটি জাভাস্ক্রিপ্ট পরিবর্তন ডিস্কে সংরক্ষণ করুন

সোর্স প্যানেল হল জাভাস্ক্রিপ্টে পরিবর্তন করার জায়গা। কিন্তু কখনও কখনও আপনার সাইটে পরিবর্তন করার সময় আপনাকে অন্যান্য প্যানেল, যেমন এলিমেন্ট প্যানেল বা কনসোল প্যানেল অ্যাক্সেস করতে হবে। অন্যান্য প্যানেলের পাশাপাশি সোর্স প্যানেল খোলা রাখার একটি উপায় আছে।

1. এলিমেন্ট ট্যাব খুলুন।
2. Command + Shift + P (Mac) বা Control + Shift + P (Windows, Linux, ChromeOS) টিপুন। কমান্ড মেনু খোলে।

3. QS টাইপ করুন, তারপরে দ্রুত উৎস দেখান নির্বাচন করুন। আপনার DevTools উইন্ডোর নীচে এখন একটি দ্রুত উত্স ট্যাব রয়েছে৷

   

   ট্যাবটি index.html এর বিষয়বস্তু প্রদর্শন করছে, যেটি উৎস প্যানেলে আপনার সম্পাদনা করা শেষ ফাইল। কুইক সোর্স ট্যাব আপনাকে সোর্স প্যানেল থেকে এডিটর দেয়, যাতে আপনি অন্যান্য প্যানেল খোলা থাকার সময় ফাইল এডিট করতে পারেন।

4. ওপেন ফাইল ডায়ালগ খুলতে Command + P (Mac) বা Control + P (Windows, Linux, ChromeOS) টিপুন।

5. script টাইপ করুন, তারপর devtools-workspace-demo/script.js নির্বাচন করুন।

   

6. ডেমোতে Edit and save files in a workspace লক্ষ্য করুন। এটা নিয়মিত স্টাইল করা হয়.

7. কুইক সোর্স ট্যাবে script.js এর নিচের কোডটি যোগ করুন।

   document.querySelector('a').style = 'font-style:italic';
   

8. পরিবর্তনটি সংরক্ষণ করতে Command + S (Mac) বা Control + S (Windows, Linux, ChromeOS) টিপুন।

9. পৃষ্ঠাটি পুনরায় লোড করুন। পৃষ্ঠার লিঙ্কটি এখন তির্যক।

পরবর্তী পদক্ষেপ

আপনি একটি কর্মক্ষেত্রে একাধিক ফোল্ডার সেট আপ করতে পারেন। এই ধরনের সব ফোল্ডার তালিকাভুক্ত করা হয় সেটিংস > ওয়ার্কস্পেস ।

এর পরে, সিএসএস পরিবর্তন করতে এবং জাভাস্ক্রিপ্ট ডিবাগ করতে DevTools ব্যবহার করতে শিখুন।