ক্রোম বিকাশকারী সরঞ্জামগুলির স্টাইলস প্যানেলের CSS পরিবর্তনগুলি কীভাবে সংরক্ষণ করবেন?


194

কিভাবে এর সিএসএস পরিবর্তনগুলি সংরক্ষণ করতে স্টাইলস প্যানেল এর গুগল ক্রোম বিকাশকারী সরঞ্জামসমূহ ?

সরঞ্জামের ওয়েবসাইটে এটি উল্লেখ করা হয়েছে যে আমরা সংস্থান প্যানেলে সমস্ত পরিবর্তন দেখতে পাই

এখানে চিত্র বর্ণনা লিখুন

তবে আমি স্থানীয়ভাবে একটি সিএসএস ফাইলে কাজ করছি তবে আমার জন্য রিসোর্স প্যানেলে পরিবর্তনগুলি প্রদর্শিত হচ্ছে না

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন

উপায় দ্বারা, আপনি কি Chrome ডেভেলপার সরঞ্জামগুলির CSS পরিবর্তনগুলি সংরক্ষণ করার জন্য কোনও অ্যাড-অন্স, সরঞ্জামগুলি জানেন? আমি জানি ফায়ারব্যাগের জন্য অনেকগুলি https://stackoverflow.com/search?q=firebug+CSS+ পরিবর্তন ++ সংরক্ষণ রয়েছে


সংস্থানগুলি পরিবর্তিত হচ্ছে সে সম্পর্কে বিজ্ঞপ্তিগুলি পাওয়ার জন্য এখন ডিভুলসুলস এক্সটেনশনের জন্য একটি এপিআই রয়েছে - যাতে আপনি আপনার পছন্দ মতো আইডিইয়ের সাথে সংহত করতে বা কেবল একটি ওয়েবডিএভি সার্ভারে রিসোর্স সামগ্রী পোস্ট করতে পারেন এমন একটি এক্সটেনশন তৈরি করতে পারেন: ডেভেলপার.ক্রোম.
কেসেক

9
আমি বিশ্বাস করি যে এই প্রশ্ন এবং এর উত্তরগুলি অপ্রচলিত, কারণ ক্রোম তার পরিবর্তিত-সিএসএস-সংরক্ষণের কার্যকারিতাটিকে "উত্স" প্যানেলে সরিয়ে নিয়েছে । কার্যকারিতা মোটামুটি বিভ্রান্তিকর হয়, এবং কিছুটা বিভ্রান্তিকর: আমি এই পরিবর্তিত-সিএসএস সংরক্ষণ এই সংশ্লিষ্ট স্ট্যাক ওভারফ্লো পোস্টে কিছু বিস্তারিতভাবে Chrome- এর কার্যকারিতা অন্বেষণ: stackoverflow.com/questions/16005435/...
ChaseMoskal


স্থানীয় ওভাররাইডগুলি ক্রোম 65 থেকে শুরু করে এটি করার একটি নতুন উপায়। ওভাররাইডগুলি ওয়ার্কস্পেসগুলির থেকে আলাদা বৈশিষ্ট্য।
কায়েস বাসকস

উত্তর:


137

আপনি নিজের সিএসএস পরিবর্তনগুলি Chrome Chrome সরঞ্জাম থেকে নিজেই সংরক্ষণ করতে পারেন। ক্রোম এখন আপনাকে আপনার ওয়ার্কস্পেসে স্থানীয় ফোল্ডার যুক্ত করতে দেয়। ক্রোমটিকে ফোল্ডারে অ্যাক্সেসের অনুমতি দেওয়ার পরে এবং ফোল্ডারটিকে স্থানীয় কর্মক্ষেত্রে যুক্ত করার পরে, আপনি স্থানীয় সংস্থায় একটি ওয়েব সংস্থান মানচিত্র করতে পারেন।

  • বিকাশকারী সরঞ্জামগুলির উত্স প্যানেলে নেভিগেট করুন , বাম প্যানেলে ডান ক্লিক করুন (যেখানে ফাইলগুলি তালিকাবদ্ধ রয়েছে) এবং ফোল্ডারটিকে ওয়ার্কস্পেসে যুক্ত করুন নির্বাচন করুনএলিমেন্টস প্যানেলে নির্বাচিত উপাদানগুলির জন্য প্রতিটি সিএসএস নিয়মের উপরের অংশে ডানদিকে স্টাইলশিটটি ক্লিক করে আপনি সোর্স প্যানেলে স্টাইলশিটটিতে দ্রুত যেতে পারেন।

এখানে চিত্র বর্ণনা লিখুন

  • ফোল্ডারটি যুক্ত করার পরে, আপনাকে ফোল্ডারে ক্রোম অ্যাক্সেস দিতে হবে। ক্রোম অ্যাক্সেসের অনুমতি দিন

  • এর পরে, আপনার স্থানীয় সংস্থায় নেটওয়ার্ক সংস্থানটি ম্যাপ করতে হবে।

এখানে চিত্র বর্ণনা লিখুন

  • পৃষ্ঠাটি পুনরায় লোড করার পরে, ক্রোম এখন ম্যাপ করা ফাইলগুলির জন্য স্থানীয় সংস্থানগুলি লোড করে। জিনিসগুলি সহজ করে তুলতে, ক্রোম আপনাকে কেবল স্থানীয় সংস্থানগুলি দেখায় (যাতে আপনি স্থানীয় বা নেটওয়ার্ক সংস্থান সম্পাদনা করছেন কিনা তা নিয়ে আপনি বিভ্রান্ত হন না)। আপনার পরিবর্তনগুলি সংরক্ষণ করতে, CTRL + Sফাইল সম্পাদনা করার সময় টিপুন ।

পুনশ্চ

স্থানীয় সংস্করণ প্রয়োগ করার জন্য Chrome কে পেতে ম্যাপ করা ফাইল (গুলি) খুলতে এবং সম্পাদনা শুরু করতে পারে (তারিখ 201604.12)।


4
আমি আমার থিমের স্টাইলশীটের নীচে শুধুমাত্র সিএসএসের লাইভ সম্পাদনা করার সময় যা কিছু সিএসএস নিয়ে এসেছি তার নীচে যুক্ত করতে চাই। এটাই. সিএসএস কপি এবং পেস্ট করতে পারে এমন কোনও 'ডিফ' নিয়ে আসার উপায় আছে কি? এই অন্যান্য প্রশ্নটি দেখুন: stackoverflow.com/questions/21871535/… পটভূমি গল্পটি হ'ল আমি কোনও থিমের অন্তর্গত সিএসএস সম্পাদনা করছি, আমি কেবল স্টাইলশিটের নীচে সিএসএস যুক্ত করতে পারি, উপরের কিছু সম্পাদনা করতে পারি না। যদি কেউ তার সিএসএস ওভাররাইড সহ কোনও ওয়েবসাইটে কেবল একটি কাস্টম সিএসএস যুক্ত করতে পারে তবে এটি একই প্রযোজ্য।
ক্যারোলিন শ্নাপ

পল-আইরিশ, কীভাবে কেবল স্থানীয় পরিবর্তন সিএসএস (দূরবর্তী পরিবর্তন ছাড়াই) ডিফ / প্যাচ তৈরি করতে আগ্রহী। SaveAs সত্যিই নমনীয়তা এবং ত্বরণের সমস্যা সমাধান করে না ...
ডেনিস ডেনিসভ

এখন ক্রোম স্থানীয় ফাইলগুলি স্বয়ংক্রিয়ভাবে সংরক্ষণ করছে (সিটিআরএল + এস টিপে না) কীভাবে এটি প্রতিরোধ করবেন?
উজায়ের আলী

আমার জন্য কাজ করে না। স্থানীয় ফোল্ডারে সিএসএস ফাইল সংরক্ষণের পরে, স্থানীয় থেকে রিমোট ম্যাপিং এবং পুনরায় লোড করার পরে সমস্ত পরিবর্তন চলে গেছে। :( এলিমেন্ট প্যানেলে স্থানীয় ফাইলটি সম্পাদনা করা এবং উত্সগুলিতে ফাইলটি সংরক্ষণ করাও আমার পরিবর্তনগুলি স্থির করে না।
ক্রিস্পি

2
Chrome 46 পরিদর্শকের মধ্যে একটি ত্রুটি রয়েছে বলে মনে হচ্ছে যে পৃষ্ঠাটি লোড করার সময় ম্যাপযুক্ত স্থানীয় ফাইলটি কেবল তখনই প্রয়োগ করা হবে যখন আপনি এটি উত্স প্যানেলে পরিবর্তন করবেন। আপনি এটি কোনও বহিরাগত সম্পাদকেও পরিবর্তন করতে পারেন তবে আপনাকে এটি উত্স প্যানেলে খোলা এবং ফোকাস করতে হবে।
ক্রিস্পি

28

দেবটুলস প্রযুক্তির লেখক এবং বিকাশকারী অ্যাডভোকেট।

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

ওভাররাইড সেট আপ করুন

  1. সোর্স প্যানেলে যান ।
  2. ওভাররাইড ট্যাবে যান ।
  3. ওভাররাইডের জন্য ফোল্ডার নির্বাচন করুন ক্লিক করুন
  4. আপনি কোন ডিরেক্টরিতে আপনার পরিবর্তনগুলি সংরক্ষণ করতে চান তা নির্বাচন করুন।
  5. আপনার ভিউপোর্টের শীর্ষে, ডিভটুলগুলি ডিরেক্টরিতে পড়তে এবং লেখার অ্যাক্সেস দিতে মঞ্জুর করুন ক্লিক করুন ।
  6. আপনার পরিবর্তনগুলি করুন। নীচের জিআইএফ-তে আপনি দেখতে পাচ্ছেন যে background:rosybrownপরিবর্তনটি পৃষ্ঠার বোঝা জুড়েই রয়েছে।

ডেমোকে ওভাররাইড করে

ওভাররাইড কীভাবে কাজ করে

আপনি যখন ডিভুলসগুলিতে পরিবর্তন করেন, ডেভটুলস আপনার কম্পিউটারে ফাইলটির একটি পরিবর্তিত অনুলিপিতে পরিবর্তনটি সংরক্ষণ করে। আপনি পৃষ্ঠাটি পুনরায় লোড করার সময়, ডিভটুলগুলি নেটওয়ার্ক সংস্থানের পরিবর্তে পরিবর্তিত ফাইলটি সরবরাহ করে।

ওভাররাইড এবং কর্মক্ষেত্রের মধ্যে পার্থক্য

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


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

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

দুঃখিত স্যার লাইভএসসিএসএস অবহেলিত এবং আর বিকাশ হয় না? পড়ুন stackoverflow.com/a/57622797/10189759
Luk Aron

কেয়েস বাস্কস ক্রোম এক্সটেনশানগুলি বিকাশের বিষয়ে কী? আপনি যখন স্টাইলশিট (এবং জেএস) ইনজেকশন দিচ্ছেন, এই সমস্ত বৈশিষ্ট্যগুলি কাজ করছে না, তাই না? এই জাতীয় বিকাশের জন্য যে কোনও সমাধান (ক্রোম ডেভ সরঞ্জামগুলি থেকে এক্সটেনশনের স্থানীয় উত্স ফাইলগুলিতে সিএসএস / জেএস আপডেটের গতি বাড়ানো)। ধন্যবাদ
অ্যান্ড্রু

19

ক্রোমের নতুন সংস্করণগুলিতে ওয়ার্কস্পেস নামে একটি বৈশিষ্ট্য রয়েছে যা এই সমস্যাটিকে সম্বোধন করে। আপনার ওয়েবসারভারের কোন পাথগুলি আপনার সিস্টেমে কোন পাথের সাথে সামঞ্জস্য করা যায় তা নির্ধারণ করতে পারেন, তারপরে সম্পাদনা করুন এবং কেবল ctrl-s দিয়ে সংরক্ষণ করুন।

দেখুন: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/


আমি মনে করি ওপি এলিমেন্টস প্যানেলের স্টাইলস ট্যাবে যে পরিবর্তনগুলি করেছে তা দেখতে চায়। এই পরিবর্তনগুলি কোনও নির্দিষ্ট উত্স ফাইলে আবশ্যক নয়।
রন ইনবার

13

আমি জানি এটি একটি পুরানো পোস্ট, তবে আমি এটি এইভাবে সংরক্ষণ করি:

  1. সোর্স ফলকে যান।
  2. নেভিগেটর দেখান ক্লিক করুন (বাম দিকে নেভিগেটর ফলকটি দেখানোর জন্য)এখানে চিত্র বর্ণনা লিখুন
  3. আপনি চান সিএসএস ফাইল ক্লিক করুন। (এটি আপনার সম্পাদিত সমস্ত পরিবর্তন সহ সম্পাদকটিতে খোলা হবে)
  4. সম্পাদক এ ডান ক্লিক করুন এবং আপনার পরিবর্তনগুলি সংরক্ষণ করুন।

আপনার সংশোধনীগুলি দেখতে খুব আকর্ষণীয় বৈশিষ্ট্যটি দেখতে আপনি স্থানীয় পরিবর্তনও দেখতে পারেন । স্ক্রিপ্টগুলি নিয়েও কাজ করুন।


আমি "নেভিগেটর দেখান" সনাক্ত করতে পারিনি
নিকিলারসন

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

মূল প্রশ্নটি আবার পড়ুন। তিনি কোনও সিএসএস ফাইল সম্পাদনা করছেন না। তিনি এলিমেন্টস প্যানেলের স্টাইলস ট্যাবটিতে পরিবর্তন আনছেন।
রন ইনবার

11

আপনি "সংস্থানসমূহ" এর ভুল বিভাগটি সন্ধান করছেন।

এটি "স্থানীয় স্টোরেজ" এর অধীনে নয়, এটি "ফ্রেমস" এর অধীনে রয়েছে:

উপরের স্ক্রিনশটটি দেবতুলগুলিতে তৈরি নতুন পরিবর্তনের বিরুদ্ধে মূল শৈলীর একটি পৃথক চিত্র দেখায়। আপনি বাম ফলকে আইটেমটি ডান-ক্লিক করতে পারেন এবং এটি ডিস্কে আবার সংরক্ষণ করতে পারেন।


ফ্রেমের ভিতরেও আমার কিছুই নেই। আমি প্রশ্নে আরও একটি স্ক্রিনশট যুক্ত করেছি
জিতেন্দ্র ব্যাস

আমি নিশ্চিত না যে আপনার "ফ্রেম" কীভাবে খালি থাকতে পারে। ভাঙা শব্দ। ক্যানারি বিল্ডে এটি ব্যবহার করে দেখুন (আপনি এটি আপনার বর্তমান সংস্করণ বরাবর ইনস্টল করতে পারেন): সরঞ্জাম. google.com/dlpage/chromesxs
থার্ডডট

ক্যানারি খুলতে অক্ষম। আমি এই সমাধানটি justin.my/2011/04/why-my-google-chrome-canary-cannot-run এও খুঁজে পেয়েছি তবে এটি এখনও কার্যকর হচ্ছে না। K.min.us/iefbE2.jpg
জিতেন্দ্র ব্যাস

2
এই সপ্তাহান্তে (5/21/2012) হিসাবে, এই সমাধানটি আর বিশ্বাস করে না। আপনি নতুন সিএসএসের বড় অংশগুলি (পুরানো নয়, বা সম্পাদনাগুলি) লিখতে আপনি একই জিনিসটি ব্যবহার করতেন । তবে এখন কমপক্ষে আমার জন্য, এইচটিএমএল ফাইলটিতে ক্লিক করা কেবল নতুন সিএসএস বিধিগুলি না দেখিয়ে কাঁচা এইচটিএমএল দেখায়। এটি কি এখনও আপনার পক্ষে কাজ করছে এবং যদি না হয় তবে এটি সম্পাদন করার জন্য আপনার কাছে নতুন সমাধান রয়েছে?
নিউক্লিওন

এটি ক্রোম 48-এ আমার পক্ষে কাজ করছে না Any যাইহোক এখনও এই কাজটি করতে চান?
ডিএমটিন্টনার

10

টিনক্র ক্রোম এক্সটেনশনটি ইনস্টল করা সহজ (নোড সার্ভার চালানোর দরকার নেই) এবং লাইভরেলোডের সাথে বাক্সের বাইরে কার্যকারিতার মতো আসে! দ্বি-দিকীয় সম্পাদনা সম্পর্কে কথা বলুন! :)

Tin.cr ওয়েবসাইট

ক্রোম ওয়েব স্টোর লিঙ্ক

অ্যান্ডির ব্লগ নিবন্ধ


ব্রাউজারসাইএন.ইও-র মতো মুক্ত-উত্স সরঞ্জামগুলি আরও ভাল, সমস্ত আধুনিক ব্রাউজারগুলিকে সমর্থন করে এবং আরও অনেক কিছু সরবরাহ করে
Gianfranco P.

8

যেহেতু প্রয়োজনীয় এপিআইগুলি সহ গত সপ্তাহে ক্রোম 18 প্রকাশিত হয়েছিল, আমি ক্রোম ওয়েব স্টোরটিতে আমার ক্রোম এক্সটেনশন প্রকাশ করেছি । এক্সটেনশনটি স্বয়ংক্রিয়ভাবে সিএসএস বা জেএস এর বিকাশকারী সরঞ্জামগুলিতে স্থানীয় ডিস্কে পরিবর্তনগুলি সংরক্ষণ করে। এটি পরীক্ষা করে দেখুন।


4

এফওয়াইআই, আপনি যদি ইনলাইন স্টাইলগুলি ব্যবহার করেন বা ডমকে সরাসরি সংশোধন করেন (উদাহরণস্বরূপ কোনও উপাদান যুক্ত করা), ওয়ার্কস্পেসগুলি এই সমস্যার সমাধান করে না। এর কারণ এটি হয় যে ডম স্মৃতিতে বাস করছে এবং সেখানে ডমের সক্রিয় অবস্থার সাথে সম্পর্কিত কোনও আসল ফাইল নেই।

তার জন্য, আমি কনসোল থেকে একটি "আগে" এবং "পরে" ডোমের স্ন্যাপশট নিতে চাই: copy(document.getElementsByTagName('html')[0].outerHTML)

তারপরে আমি আমার পরিবর্তনগুলি দেখতে এটি একটি আলাদা সরঞ্জামে রেখেছি।

ডিফ সরঞ্জাম সরঞ্জাম

সম্পূর্ণ নিবন্ধ: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a


1

পরিবর্তনগুলি সংরক্ষণ করতে পারে এমন কোনও এক্সটেনশান সম্পর্কে আপনার প্রশ্নের শেষ অংশের উত্তর দেওয়ার জন্য, হটফিক্স রয়েছে

এটি আপনাকে ক্রোম দেব সরঞ্জামগুলি থেকে সরাসরি গিটহাবে পরিবর্তনগুলি সংরক্ষণ করতে দেয়। সেখান থেকে আপনি নিজের ওয়েবসাইটটি স্বয়ংক্রিয়ভাবে আপডেট করতে গিটহাবে একটি পোস্ট-রিসিভ হুক সেট আপ করতে পারেন।


1

আপনি যতক্ষণ না সিএসএসকে স্টিক করেন না element.style:

  1. আপনি যে স্টাইল যুক্ত করেছেন সেটিতে যান। ইন্সপেক্টর-স্টাইলশিট বলার জন্য একটি লিঙ্ক থাকতে হবে:

এখানে চিত্র বর্ণনা লিখুন

  1. এটিতে ক্লিক করুন, এবং এটি উত্স প্যানেলে আপনার যুক্ত করা সমস্ত সিএসএস খুলবে

  2. এটি অনুলিপি করুন এবং পেস্ট করুন - ইয়ে!

আপনি যদি আছে ব্যবহার করছেন element.style:

আপনি কেবল আপনার এইচটিএমএল উপাদানটিতে ডান ক্লিক করতে পারেন, HTML হিসাবে সম্পাদনা ক্লিক করুন এবং তারপরে ইনলাইন শৈলীর সাহায্যে HTML অনুলিপি করুন এবং আটকান।


1
এবং যদি আপনি সেই পরিদর্শক-স্টাইলশিটটি খুঁজে না পান কারণ আপনি ডমটির মাধ্যমে অনুসন্ধান হারিয়ে ফেলেছেন, ডিভটুলস যখন মনোনিবেশ করছেন তখন "Ctrl + P (বা সিএমডি + পি)" এটি "ইনস্পেক্টর" লেখা শুরু করবেন ... এটি ঠিক পপ হবে, এবং তারপরে কেবল প্রবেশ করুন। i.imgur.com/WSWcbh8.png
কার্লস

1

আপডেট 2019: অন্যান্য উত্তরগুলি কিছুটা পুরানো হওয়ায় আমি এখানে একটি আপডেট করা যুক্ত করব। সর্বশেষ সংস্করণে ফাইল সিস্টেমে ক্রোম ফোল্ডারটি মানচিত্রের দরকার নেই।

এখানে চিত্র বর্ণনা লিখুন

সুতরাং, ধরুন আমার ডেস্কটপে এইচটিএমএল, সিএসএস, জেএস ফাইলযুক্ত একটি ওয়েব ফোল্ডার রয়েছে যা আমি ক্রোম পরিবর্তন করার সময় আপডেট করতে চাই: =

1) আপনার একটি চলমান লোকাল সার্ভারের প্রয়োজন হবে যেমন নোড ইত্যাদি, বিকল্পভাবে এই vscode এক্সটেনশনটি আপনার জন্য সার্ভার তৈরি করে: লাইভ সার্ভার ভিএসকোড এক্সটেনশন , এটি ইনস্টল করুন, সার্ভারটি চালান।

2) স্থানীয় সার্ভার চালানো থেকে ক্রোমে html পৃষ্ঠাটি লোড করুন।

3) ডিভটুলগুলি খুলুন-> উত্স-> ফাইলসিস্টেম-> ওয়ার্কস্পেসে ফোল্ডার যুক্ত করুন

এখানে চিত্র বর্ণনা লিখুন

4) স্থানীয় সার্ভার চলমান ব্যবহৃত ফোল্ডার যোগ করুন। সর্বশেষ ক্রোমে কোনও অতিরিক্ত ম্যাপিংয়ের প্রয়োজন নেই! Ta-দা!

এটি আরও কর্মক্ষেত্র সহ ফাইলগুলি সম্পাদনা করুন

নোট করুন যে স্টাইল ট্যাবে করা পরিবর্তনগুলি ফাইল সিস্টেম ফাইলগুলিতে প্রতিফলিত হবে না।
এখানে চিত্র বর্ণনা লিখুন
পরিবর্তে আপনাকে devtools-> উত্স-> আপনার_ ফোল্ডারে যেতে হবে এবং তারপরে সেখানে আপনার পরিবর্তনগুলি করতে হবে এবং প্রভাবটি দেখতে পৃষ্ঠাটি পুনরায় লোড করুন।


1
তবে ওপি বিশেষত স্টাইলস ট্যাবে করা পরিবর্তনগুলি সম্পর্কে জিজ্ঞাসা করেছিল ...
রন ইনবার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.