ব্রাউজারে সিউডো-উপাদানগুলির আগে এবং: পরে আমি কীভাবে পরিদর্শন ও টুইট করতে পারি?

Question

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

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

তদ্ব্যতীত, এই ব্লগ পোস্টে (তারিখ ২০০৯!) এই ডেভেলপমেন্ট সরঞ্জামগুলিতে এই ক্ষমতাটি বিদ্যমান রয়েছে, তবে আমি বর্তমানে ম্যাক ওএস ব্যবহার করছি, সুতরাং এটি আমার কোনও সহায়তা নয়। অতিরিক্তভাবে, আইই ব্রাউজার নয় যা আমি প্রাথমিকভাবে লক্ষ্য করছি ing

এই ছদ্ম উপাদানগুলি নিরীক্ষণের কোনও উপায় আছে কি?

সম্পাদনা: ফায়ারবাগ এই উপাদানগুলি পরিদর্শন করতে না পারার বিষয়ে ভুল হওয়ার পাশাপাশি, অপেরাকেও পরিদর্শন করতে: বেশিরভাগ আগে এবং: বাক্সের বাইরে উপাদানগুলি খুঁজে পেয়েছিল found

Comments

ফায়ারব্যাগের সাহায্যে আপনি সেই সিউডোমিলিন্টগুলির স্টাইল পরিদর্শন করতে পারেন ।

— ফ্যাবরিজিও ক্যাল্ডেরান

@ এফ.কালদারান কিভাবে? আমি যদি পৃষ্ঠাটি তাদের সংশোধন করি তবে তা কী আপডেট হয়?

— majackson

হ্যাঁ, আমি Fx11 / MacOS এ ফায়ারব্যাগ 1.9.1 এর মাধ্যমে সিউডোলেমেন্টের জন্য বৈশিষ্ট্যগুলি পরিবর্তন করতে সক্ষম হয়েছি

— ফ্যাব্রিজিও ক্যাল্ডেরান

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

— মজাকসন

Chrome এ পরীক্ষা pseudoelements এবং Firefox এই উত্তর চেক stackoverflow.com/a/20716179/1868660

— সুবোধ Ghulaxe

Answer 1

ইন Chrome এর দেবের সরঞ্জাম , একটি সিউডো-উপাদান শৈলী প্যানেলে দৃশ্যমান:

অন্যথায়, আপনি জাভাস্ক্রিপ্ট কনসোলে নিম্নলিখিত লাইনটি ইনপুট করতে পারেন এবং প্রত্যাবর্তিত CSSStyleDeclarationঅবজেক্টটি পরীক্ষা করতে পারেন :

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Comments

আমি এটা দেখতে পাচ্ছি না। এটি প্যানেলে উপস্থিত হওয়ার জন্য আপনি কোন উপাদানটি পরিদর্শন করছেন? এছাড়াও, আপনি Chrome এর কোন সংস্করণ ব্যবহার করছেন?

— majackson

@ মাজ্যাকসন ক্রোম 18.0 উবুন্টু ১১.১০। পরিদর্শন করুন x: এই ডেমো jsfiddle.net/2M6JA

— রব ডব্লিউ

আমি আপনার ডেমোতে ছদ্ম চশমা দেখতে পাচ্ছি, তবে আমার কোডে নয়, যা আমার সন্দেহ করে যে আমার অন্যরকম সমস্যা হচ্ছে different যাই হোক না কেন, এটি স্পষ্টতই আপনি সঠিক তাই আমি এটিকে সমাধান হিসাবে চিহ্নিত করব - অনেক ধন্যবাদ!

— মজ্যাকসন

এটি seams: সিউডো শৈলীগুলি কিছু ক্ষেত্রে পরিদর্শন করা যায় না। @ রব ডাব্লু ফিডলের এই কাঁটাচটিটি দেখুন: jsfiddle.net/RQsY6 => কোনও ট্যাগে সিউডো উপাদানটি পরীক্ষা করা যায় না cannot

— ফ্যাবিয়েন কোয়াটারভাক্স

@ ফ্যাবিএনক্যাট্রাভাক্স কমপক্ষে ক্রোম 23 এ, আমি স্ক্রিনশট div::beforeসহ দেখতে পাচ্ছি content: 'x';: i.stack.imgur.com/nQ2TZ.png । সম্পাদনা: আমাদের ফিডলগুলি মোটেই আলাদা হয় না। আপনি কি divসাথে প্রতিস্থাপন করতে চান a? তবুও, সিউডো-এলিমেন্টটি এখনও পরিদর্শন করা যেতে পারে: jsfiddle.net/RQsY6/1 (কেবলমাত্র ডিওএম গাছের অ্যাঙ্কর ট্যাগ নির্বাচন করুন)।

— রব ডাব্লু

Answer 2

ক্রোম হিসাবে 31 সিউডো উপাদানগুলি নীচের চিত্রটিতে যেমন দেখানো হয়েছে তেমন উপাদানগুলির প্যানেলে তাদের পিতামাতার সন্তানের উপাদান হিসাবে দেখায়:

আপনি এটিকে সাধারণ উপাদান হিসাবে বেছে নিতে পারেন তবে আপনি যদি contentশৈলীটি সরিয়ে থাকেন তবে ছদ্ম উপাদানটিও সরানো হবে এবং দেবতাদের ফোকাসটি তার পিতামাতার কাছে পরিবর্তিত হবে।

এটি প্রদর্শিত হয় যে উত্তরাধিকারসূত্রে প্রাপ্ত সিএসএস শৈলীগুলি পারা যায় না এবং আপনি উপাদান প্যানেল থেকে CSS সামগ্রী সম্পাদনা করতে পারবেন না।

Answer 3

ক্রোম প্রদর্শন করবে না: আগে এবং: ডিওএম-ট্রিতে সিউডো উপাদানগুলির পরে, যদি তারা "সামগ্রী" বৈশিষ্ট্য মিস করে। এটি সেট করা উচিত, এমনকি যদি এটি কিছু না সেট করা থাকে।

এটি প্রদর্শিত হবে না:

:after {
  background-color: red;
}

এটি পরিদর্শকের মধ্যে প্রদর্শিত হবে:

:after {
  content: "";   
  background-color: red;    
}

আশা করি এটা সাহায্য করবে.

Answer 4

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

স্পষ্টতই, ক্রোম / ক্রোমিয়ামের সিউডো উপাদানগুলির হ্যান্ডলিংগুলি অনেক বেশি উন্নত, কারণ এগুলি (ডকুমেন্ট ট্রি এবং সরাসরি পৃষ্ঠায় উভয়ই) বেছে নেওয়া যেতে পারে এবং নিয়মিত উপাদানগুলির মতোই বিন্যাস, বৈশিষ্ট্য এবং অন্যান্য সমস্ত কিছু দিয়ে তাদের "মালিকের থেকে পৃথক করে পরিদর্শন করা যায়" "।

ব্রাউজার সংস্করণগুলি আমি বর্তমানে ব্যবহার করছি: ক্রোমিয়াম 40.0.2214.91, ফায়ারফক্স 31.3.0।

Answer 5

ফায়ারফক্সের কিছুক্ষণের জন্য এই বৈশিষ্ট্যটি রয়েছে, ঠিক ডান ক্লিক করুন, "উপাদানটি পরীক্ষা করুন", এবং পরিদর্শকের ডান প্যানেলে উপাদানগুলির আগে এবং পরে দেখুন।

Comments

আমি দেখতে পাচ্ছি না :afterএবং :beforeছদ্ম উপাদানের দিকে টগল করানোর মাধ্যমে আমাকে দেয় - "আদি" পরিদর্শক সরঞ্জামে ছদ্ম উপাদান hover, activeএবং focusশুধুমাত্র। যদিও আমি ফায়ারবগে তাদের দেখতে পাচ্ছি।

— সমরাহ

@ সমীরা আপনি কি ডান ক্লিক মেনুতে টগলগুলি নিয়ে কথা বলছেন? কারণ: আগে এবং: পরে আপনি সেখানে টগল করার কিছু নয়, সেগুলি সবসময় সিএসএস পরিদর্শককে দেখাতে হবে।

— NoBugs

Answer 6

উপাদান নির্বাচন করুন -> চেক করা হোভার নির্বাচন করুন ---> আপনি :: উপাদানগুলির আগে এবং পরে দেখতে পারেন

Answer 7

কমপক্ষে Chrome 62 এর পরে ডেভটুলগুলিতে 'ব্যবহারকারী এজেন্ট ছায়া DOM দেখানোর' জন্য একটি সেটিং রয়েছে যা ইনপুট প্লেসোল্ডারদের মতো অতিরিক্ত সিউডো উপাদানগুলি প্রদর্শন করে which প্রদর্শন করে, যা অন্যথায় ডোম ট্রিতে প্রদর্শিত হবে না।

আরও তথ্য: https://stackoverflow.com/a/26853319/3963594