আমারও এই সমস্যাটি চিরকাল ধরে ছিল এবং অবশেষে সিদ্ধান্ত নিয়েছে যে আমাদের ওয়েব ইন্সপেক্টরটিতে কোনও জিনিস সম্পাদনা করা উচিত নয় এবং এর জন্য কিছু তৈরি করা উচিত ( https://github.com/viatropos/design.io )।
একটি ভাল সমাধান:
ব্রাউজারটি স্বয়ংক্রিয়ভাবে সিএসএস পরিবর্তনগুলি পুনরায় লোড না করে প্রতিফলিত করে যখন আপনি আপনার পাঠ্য সম্পাদকটিতে সংরক্ষণ টিপুন ।
ওয়েব ইন্সপেক্টরটিতে আমরা সিএসএস সম্পাদনা করার মূল কারণ (আমি ওয়েবকিট ব্যবহার করি তবে ফায়ারব্যাগ একই লাইনের সাথে রয়েছে) কারণ আমাদের ছোট সামঞ্জস্য করা দরকার, এবং পৃষ্ঠাটি পুনরায় লোড করতে খুব বেশি সময় লাগে takes
এই পদ্ধতির সাথে 2 টি প্রধান সমস্যা রয়েছে। প্রথমত, আপনাকে এমন একটি পৃথক উপাদান সম্পাদনা করার অনুমতি দেওয়া হয়েছে যার কোনও idনির্বাচক নাও থাকতে পারে । সুতরাং আপনি ওয়েব ইন্সপেক্টর থেকে উত্পন্ন সিএসএস অনুলিপি / পেস্ট করতে সক্ষম হলেও, এটি সিএসএসের idসুযোগ তৈরি করতে হবে । কিছুটা এইরকম:
#element-127 {
background: red;
}
এটি আপনার সিএসএসকে একটি জগাখিচুড়ি করা শুরু করবে।
আপনি কেবলমাত্র বিদ্যমান নির্বাচক ( .spaceনীচে ওয়েবকিট পরিদর্শক চিত্রের শ্রেণি নির্বাচক) এর জন্য শৈলী পরিবর্তন করে এটি পেতে পারেন ।
তবুও, দ্বিতীয় সমস্যা। জিনিসটির ইন্টারফেসটি বেশ রুক্ষ, বড় পরিবর্তনগুলি করা শক্ত - যেমন আপনি যদি এই জায়গায় সিএসএসের এই ব্লকটি অনুলিপি করার চেষ্টা করতে চান বা যাই হোক না কেন।
আমি বরং টেক্সটমেটে আটকে থাকি।
আদর্শটি হ'ল কেবলমাত্র আপনার পাঠ্য সম্পাদকে সিএসএস লিখুন এবং ব্রাউজারটি পৃষ্ঠাটি পুনরায় লোড না করে পরিবর্তনগুলি প্রতিবিম্বিত করুন । আপনি যখন সামান্য পরিবর্তন করছেন তখন আপনি আপনার চূড়ান্ত সিএসএস লিখবেন।
পরবর্তী স্তরটি হ'ল স্টাইলাস, কম, এসসিএসএস ইত্যাদির মতো একটি গতিশীল সিএসএস ভাষায় লিখতে হবে এবং তৈরি হওয়া সিএসএস সহ ব্রাউজারটি আপডেট করতে পারে। আপনি এই জাতীয় মিশ্রণ তৈরি করা শুরু করতে পারেন box-shadow(), যা জটিলতাগুলি দূরে সরিয়ে দেয়, যা ওয়েব পরিদর্শক অবশ্যই করতে পারেন নি।
এই ধরণের কাজটি করার জন্য এখানে কয়েকটি জিনিস রয়েছে তবে এটি আমার মতে আসলে কিছুই প্রবাহিত হচ্ছে না।
এই কাজগুলিকে সহজে কাস্টমাইজ করার ক্ষমতা না রাখাই আমি তাদের ব্যবহার না করার মূল কারণ।
এই সমস্যাটি সমাধান করার জন্য আমি বিশেষত https://github.com/viatropos/design.io একসাথে রেখেছি এবং এটি তৈরি করেছি:
- ব্রাউজারটি পৃষ্ঠাটি পুনরায় লোড না করে যে কোনও সময় আপনি সংরক্ষণ করুন CSS / js / html / ইত্যাদি প্রতিফলিত করে lects
- এটি যে কোনও টেম্পলেট / ভাষা / কাঠামো পরিচালনা করতে পারে (স্টাইলাস, কম, কফিস্ক্রিপ্ট, জ্যাড, হামল ইত্যাদি)
- এটি জাভাস্ক্রিপ্টে লেখা হয়েছে এবং আপনি জাভাস্ক্রিপ্টে এক্সটেনশনগুলি একসাথে চাবুক করতে পারেন।
এইভাবে, যখন আপনাকে সিএসএসে এই ছোট্ট পরিবর্তনগুলি করা দরকার, আপনি বলতে পারেন, পটভূমির রঙ সেট করতে পারেন, সংরক্ষণ করুন টিপুন, নোপ দেখুন, বেশ নয়, হিউটি 10 দ্বারা সামঞ্জস্য করুন, সংরক্ষণ করুন, নোপ করুন, 5 দ্বারা সামঞ্জস্য করুন, সংরক্ষণ করুন, ভাল দেখাচ্ছে।
এটি যেভাবে কাজ করে তা হ'ল যখনই আপনি কোনও ফাইল সংরক্ষণ করুন (ওএস স্তরে) ফাইলটি প্রক্রিয়াজাতকরণ (এটি এখানে এক্সটেনশনগুলি কাজ করে), এবং ওয়েবসকেটের মাধ্যমে ব্রাউজারে ডেটা পুশ করে, যা পরে পরিচালিত হয় (ক্লায়েন্টের পাশের অংশ) প্রসার).
প্লাগ বা কোনও কিছুর জন্য নয়, তবে আমি দীর্ঘ সমস্যার জন্য এই সমস্যাটির সাথে লড়াই করেছি।
আশা করি এইটি কাজ করবে.
