পরিদর্শক (সিলেক্ট ওয়েব সাইট, ফায়ারব্যাগ ইত্যাদি) থেকে সিএসএস পরিবর্তন রফতানি করুন

Question

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

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

এর মতো কিছু আছে কি?

Comments

এর জন্য একটি সাফারি / ক্রোম এক্সটেনশন লেখা শক্ত হওয়া উচিত নয়। ব্যবহারকারীকে কোনও উপাদানকে ডান ক্লিক করতে অনুমতি দেওয়ার জন্য প্রসঙ্গ মেনুটি ব্যবহার করুন, তারপরে অবজেক্টের বর্তমান স্টাইল সম্পত্তিটি ধরুন, ক্লিপবোর্ডে প্রেরণ করবেন?

— tbeseda

এখানে মন্তব্য করার আগে আমার অনুসন্ধান করা উচিত ছিল। সম্ভাব্য সদৃশ stackoverflow.com/questions/162644/...

— MiffTheFox

আহ ভাল। আমি ক্রোম / ওয়েব-কিটের জন্য কিছু উত্তর দেখতে পছন্দ করব তবে সেগুলি এখানে কয়েকটি দুর্দান্ত উত্তর। ধন্যবাদ @ মিফফক্স

— হুকডাউনউইনটার

ব্যাকফায়ার পরীক্ষা করুন: blog.quplo.com/2010/08/… এটি চেষ্টা করে দেখেনি , তবে আশাব্যঞ্জক মনে হচ্ছে।

— ব্রায়ান ডাউনিং

@ ব্রায়ানডাউনিং সম্পন্ন! এটি দুর্দান্ত দুর্দান্ত। পিং জন্য ধন্যবাদ।

— hookedonwinter

Answer 1

আমি কমপক্ষে ক্রোম ভি 14 হিসাবে এর উত্তর পেয়েছি।

এলিমেন্ট বিভাগে থাকা অবস্থায়, সিএসএস বিধিগুলির পাশে কেবল "ফাইলের নাম: লিনেনম্বার" লিঙ্কটি ক্লিক করুন। সিএসএস ফাইল যা দেখায় তাতে সমস্ত পরিবর্তন রয়েছে।

এই জায়গাটি ঠিক:

Comments

নোট করুন যে এটি নতুন সিএসএস নির্বাচনকারীদের জন্যও কাজ করে যা +আইকনটির মাধ্যমে ইন্সপেক্টরে যোগ করা হয়

— জোনাথন ডে

এটি কেবলমাত্র পরিবর্তনের জন্য কাজ করবে যা পরিদর্শকের স্টাইলশিটে যুক্ত করা হয়েছে। এটি বিদ্যমান শ্রেণি নির্বাচকদের জন্য নিয়মসেটগুলিতে পরিবর্তনের জন্য কাজ করবে না।

— ian.pvd

Answer 2

ক্রোমে আপনি সোর্স ট্যাবে একটি সিএসএস ফাইল ডান ক্লিক করতে পারেন এবং "স্থানীয় পরিবর্তন" ক্লিক করতে পারেন

এটি আপনাকে আপনার স্থানীয় পরিবর্তনগুলির সমস্ত দেখায়। প্রতিটি সংশোধন টাইমস্ট্যাম্পড হয় এবং আপনি কোনও পূর্ববর্তী পুনর্বিবেচনায় রোলব্যাক করতে পারেন।

এই টিউটোরিয়ালের লাইভ এডিটিং এবং রিভিশন ইতিহাস বিভাগটি দেখুন।

Comments

দেখে মনে হচ্ছে আপনি কেবল আপনার শেষ রেফারে রোলব্যাক করতে পারেন। সুতরাং আপনি যদি দুর্ঘটনাক্রমে রিফ্রেশ / ট্যাব ইত্যাদি বন্ধ করে দেন তবে আপনি পরিবর্তনগুলি হারাবেন

— টেম্বলাহ

ওয়েবপ্যাকের মতো আধুনিক বান্ডেলারের সাথে এটি কীভাবে কাজ করে যেখানে আপনার সমস্ত CSS এর একটি ফাইলে বান্ডিল করা আছে?

— ম্যাটগ্যাবর

আমি এই "স্থানীয় পরিবর্তন" দেখছি না, এই উত্তরটি কি পুরানো?

— লুক পিঘেটি

@ লুকে পিঘেটি আমি v79 (12/2019) এ দেখতে পাচ্ছি যদি আমি উত্স ফাইলটি খুলি তবে আমি> রাইট ক্লিক> স্থানীয় পরিবর্তনগুলিতে আগ্রহী। এটি "পরিবর্তনগুলি" শীর্ষক "কনসোল ড্রয়ারে" একটি ট্যাব খুলবে যা আমার সমস্ত পরিবর্তিত ফাইলের সাথে একটি বাম মেনু রয়েছে। আপনি মেনু উপবৃত্ত> আরও সরঞ্জাম> পরিবর্তনগুলি ক্লিক করে এটিকে দেখতে পারেন।

— xr280xr

Answer 3

ফায়ারডিফ একটি ফায়ারব্যাগ অ্যাড-অন যা ফায়ারব্যাগে করা পরিবর্তনগুলি ট্র্যাক করে । এটি আপনি HTML প্যানে (দুর্দান্ত) সমস্ত কিছু লগ করেন তবে ওয়েব বিকাশকারী সরঞ্জামদণ্ডের এক্সটেনশনের সংক্ষিপ্ত ব্যবহার (এত দুর্দান্ত নয়), px-এ একটি ফন্ট-আকারের তথ্য পেতে Shift-Ctrl-F বলুন।

আমি ক্রোমে একটি ফায়ারব্যাগ এক্সটেনশন দেখেছি কিন্তু এটি পরীক্ষা করে দেখিনি, আমি ফায়ারডফ ব্যবহার করে ফায়ারডক্স ব্যবহার করি।

Comments

দুর্দান্ত প্লাগইন অবশ্যই আমি যেখানে চাই কাছাকাছি পেতে। অপেক্ষা করতে যেতে এবং দেখতে আরও ভাল কিছু আসে কিনা তা দেখতে (উদাহরণস্বরূপ, ক্লিপবোর্ডে অনুলিপি করা সিএসএসে পূর্ণ) full

— hookedonwinter

Answer 4

আমি একটি ক্রোম এক্সটেনশন তৈরি করেছি যা ঠিক এটি করে।

একে স্টাইলআরএল বলা হয় - এটি ক্রোম ইন্সপেক্টর-এ আপনি যে কোনও সিএসএস পরিবর্তন করেছেন এবং বৈধ সিএসএসকে পৃথক হিসাবে আউটপুট করে: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

এই পৃষ্ঠায় আমি "প্যাডিং-নীচে: 50px" যুক্ত করেছি এমন একটি উদাহরণ এখানে রয়েছে:

এটি ওপেন-সোর্স এবং গিটহাবের উপরও: https://github.com/Jarred-Sumner/styleurl- এক্সটেনশন

Comments

খুব সহজ হাতিয়ার!

— ড্যান

সমস্ত লিঙ্ক কাজ করছে না গিথুবকে গ্রহণ করে। দয়া করে আপডেট করুন, প্রতিশ্রুতিবদ্ধ শোনান

— মিরোসো

এই প্রকল্পটি এখন পরিত্যক্ত। এটি লজ্জাজনক :-(

— ড্যামন হিল

Answer 5

ক্রোমে কনসোল ড্রয়ারে পরিবর্তন ট্যাবও রয়েছে যা CSS এর সমস্ত পরিবর্তন প্রদর্শন করে। এটি কোনও রফতানি নয়, কমপক্ষে কী পরিবর্তন হয়েছে তা দ্রুত উপলব্ধি করা খুব সুবিধাজনক।

Comments

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

— ian.pvd

9 বছর পরে এই উত্তরগুলিতে প্রচুর শব্দ আছে, তবে এটি সহজেই সেরা উত্তর। একমাত্র জিনিসটি হ'ল ভিন্নতা রফতানি করার একটি দ্রুত উপায় যাতে আপনি পাশের পাশাপাশি করার পরিবর্তে কোনও স্ক্রিপ্ট বা আইডিইতে স্বয়ংক্রিয়ভাবে পরিবর্তনগুলি প্রক্রিয়া করতে পারেন এবং ম্যানুয়ালি একটি শৈলীর শীটটি টুইঙ্ক করতে পারেন।

— সামি ফুয়াদ

Answer 6

আমি এই পণ্যটির আগে এসও তে পরামর্শ দিয়েছি (আমি কোনওভাবেই তাদের সাথে অনুমোদিত নই)।

http://www.skybound.ca/

দুর্দান্ত পণ্য। আপনি যা খুঁজছেন ঠিক তার মতো এবং আরও অনেক কিছু।

সম্পাদনা: অন্যান্য বেশ কয়েকটি উত্তর এখানে আপনার স্থানীয় ফাইলগুলির সাথে লিঙ্ক করার জন্য গুগল ক্রোমের ক্ষমতার কথা উল্লেখ করেছে (যা খুব দুর্দান্ত)। অন্যান্য উত্তরগুলি দেখুন!

Comments

দেখতে দুর্দান্ত লাগছে। খুব খারাপ এটি 80 ডলার। ধন্যবাদ @ ব্রায়ান, ভাল সন্ধান

— হুকডনউইনটার

উত্তরটি গত কয়েক বছরে পরিবর্তিত হয়েছে। ক্রোম ডেভটুলগুলি এখন আপনাকে ফাইলগুলিতে পরিবর্তনগুলি লেখার অনুমতি দেয় । উত্তেজনাপূর্ণ সময়!

— মেঘাবৃত্তি

Answer 7

আপনি যদি বাহ্যিক সিএসএস সম্পাদনা করেন তবে আপনি ডিএনডি সমর্থন করে এমন কোনও পাঠ্য সম্পাদককে রিসোর্স প্যানেল থেকে তার সর্বশেষ সংশোধনটি টেনে আনতে পারেন (দেখুন http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , আরও বিশদের জন্য "পার্সিং পরিবর্তনগুলি" বিভাগটি)) আপনি নিজের সিএসএস পরিবর্তনগুলি স্টাইলশিট সংস্থার যে কোনও পূর্ববর্তী সংস্করণে (যে কোনও স্টাইলশীট পুনর্বিবেচনার ডান-ক্লিকের পপআপ মেনুতে) ফিরিয়ে দিতে পারেন)

Answer 8

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

এছাড়াও একটি সহজ স্ক্রিনকাস্ট রয়েছে যা প্রসারণটির চেয়ে ভালভাবে বিশদ দেয়।

Answer 9

সঙ্গে ওয়ার্কস্পেস আপনি (Chrome এ) আপনার পরিদর্শক তাদের টাইপ করার আপনার সিএসএস সংরক্ষিত থাকতে পারে। সমস্যা হলো প্রতিটি পরিবর্তন স্বয়ংক্রিয়ভাবে সংরক্ষিত হয় এবং সেখানে এই বৈশিষ্ট্যকে অক্ষম করতে কোনো উপায় নেই, সরু যেমন http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ এবং Chrome বিকাশকারীর সরঞ্জামগুলিতে সিএসএস পরিবর্তনের অক্ষম স্বয়ংক্রিয় সংরক্ষণ ।

Answer 10

ফায়ারফক্স এবং ক্রোম উভয়ই এখন এই বৈশিষ্ট্যটিকে সমর্থন করে, তবে লক্ষণীয় যে কয়েকটি প্ল্যাটফর্মে যদি সমস্ত ক্রোম এটি ডিফল্টরূপে না দেখায়, এটি দেখার জন্য আপনাকে "পরিবর্তনগুলি" দৃষ্টিভঙ্গি সক্ষম করতে হবে (আমার কুবুন্টু লিনাক্স 20.04 এ এটি ছিল না) ডিফল্টরূপে), আপনি কীভাবে এটি সক্ষম করতে পারবেন তা এখানে রয়েছে: বিকাশকারী সরঞ্জামদণ্ডের "আরও সরঞ্জামগুলি"> "পরিবর্তনগুলি" এর "কাস্টমাইজ করুন এবং নিয়ন্ত্রণ ডিভটুলগুলি" বোতামে যান , তারপরে ট্যাবটি বোতামে উপস্থিত হবে:

ফায়ারফক্সে এটি সক্ষম করার দরকার নেই তবে আপনি যদি ক্রোম * থেকে এসে থাকেন তবে এটি খুঁজে পাওয়া শক্ত হতে পারে। "পরিদর্শক" ট্যাবে ডানদিকে কেবল শেষ বিভাগটি পরীক্ষা করুন:

Answer 11

আপনি যদি ফায়ারফক্স স্টক ডেভ সরঞ্জামগুলি ব্যবহার করে থাকেন তবে আপনি সরাসরি সরঞ্জাম সংলাপে সিএসএস সম্পাদনা করতে পারবেন - সিএসএস ভিউপোর্ট বোতামটি (এটি {}প্রতীক সহ শীর্ষে থাকা বোতাম ) এবং আপনার সিএসএস সরাসরি সম্পাদনা করতে পারেন। এটি ব্রাউজারে রিয়েলটাইমে আপডেট হবে এবং যখন আপনি কেবল নিজের সিএসএস ফাইলে এটি অনুলিপি করুন। নিস!

Answer 12

বিশেষত সাফারির জন্য একটি উত্তর যুক্ত করতে - এটি এক ধরণের সম্ভব।

আপনি যখন বিদ্যমান সিএসএস ফাইলের জন্য পরিদর্শকের স্টাইল বিভাগে সিএসএস সম্পাদনা করেন তখন আপনি আঘাত করতে পারেন Cmd-S পরিবর্তনগুলি সহ পুরো ফাইলটি পুনরায় সংরক্ষণ । তবে, আপনি যদি সাস / প্রিপ্রসেসর / বান্ডিলিং ইত্যাদির সাহায্যে আপনার সিএসএস তৈরির মতো একটি মেটা ভাষা ব্যবহার করেন তবে আমার মনে হয় না যে এটি সত্যই এই সমস্যার সমাধান করে, যদিও এটি সিএসএস উত্স মানচিত্রের দ্বারা সম্ভব হতে পারে।

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

অফিসিয়াল অ্যাপল ডক্সটি একটু তারিখযুক্ত তবে এখানে পাওয়া গেছে: ওয়েব ইন্সপেক্টর টিউটোরিয়াল - আপনার ওয়েবপৃষ্ঠাটি পরিবর্তন করতে কোড সম্পাদনা করুন ।

Answer 13

ক্রোমে, সিএসএস পরিদর্শকটিতে আপনি + বোতামটি ক্লিক করতে এবং ধরে রাখতে পারেন, তারপরে আপনার পরিবর্তনগুলি পরিদর্শক-স্টাইলশিটে যুক্ত করতে বেছে নিন। এটি আপনার সিএসএস-নির্বাচকগুলিতে সরাসরি সম্পাদনার মতো সুবিধাজনক নয় তবে আপনি যা লিখবেন তা সবই পরিদর্শক-স্টাইলশীট.এস.এস.

Answer 14

আমার ইন-বিটা-শিগগির পণ্য LIVEditor এটি হুবহু করে।

এটিকে সহজে বুঝতে দেওয়ার জন্য, আপনি ভাবতে পারেন ফায়ারব্যাগের পরিদর্শক আপনার পাঠ্য সম্পাদককে এম্বেড করেছেন।

এই ভাবে আপনি পরিবর্তন করতে হবে না নিজে তোমার পরে আপনার কোড সম্পাদকে আবার tweaking ফায়ারবাগকে বা WebKit এর ডেভেলপার টুলস ব্যবহার করে এটি।

Comments

শুনে ভালো লাগছে. উইন্ডোজের পক্ষে খুব খারাপ।

— কেপিএম

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

— স্যামুয়েল লিউ