হোভার কোড দেখতে ক্রোম ওয়েব ইন্সপেক্টর কীভাবে ব্যবহার করবেন


99

কোড দেখার জন্য ক্রোমস ওয়েব ইন্সপেক্টর ব্যবহার করা খুব দরকারী। তবে আপনি উদাহরণস্বরূপ কোনও বোতামের জন্য হোভার কোডটি কীভাবে দেখেন? আপনাকে মাউসটি বোতামের ওপরে ঘোরাতে হবে এবং সুতরাং এটি পরিদর্শকের (মাউস) ব্যবহার করতে পারবেন না। পরিদর্শক এটি সম্পন্ন করার জন্য কোন শর্টকাট বা অন্য উপায় আছে?


4
এটি কি এর সদৃশ? stackoverflow.com/questions/4515124/...
Mixologic

উত্তর:


157

এখন আপনি ছদ্ম-শ্রেণীর উভয় স্টাইলের নিয়ম দেখতে এবং উপাদানগুলিতে জোর করতে পারেন।

:hoverস্টাইলস ফলকের মতো নিয়মগুলি দেখতে উপরের ডানদিকে ছোট ডটেড বক্স বোতামটি ক্লিক করুন।

কোনও উপাদানকে :hoverরাজ্যে জোর করতে , ডানদিকে ক্লিক করুন।

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


4
ক্রোম ৪৮ (এবং পেরে এর আগে) -তে, ডটেড বাক্সটি একটি পুশপিন আইকন দ্বারা প্রতিস্থাপন করা হয়েছে যা আপনি যখন ঘোরাবেন তখন এলিমেন্ট স্টেট টগল করুন says তারপরে আপনি ড্রপ ডাউন তালিকা থেকে "হোভার" নির্বাচন করুন।
সমাহারগুলি

15

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


6

এটি সামান্য বিরক্তিকর, তবে আপনাকে এলিমেন্টটিতে ডান ক্লিক করতে হবে এবং তারপরে আপনার মাউসটিকে লিঙ্কের উপরে রেখে আপনার কীবোর্ডটি 'ইলেক্টমেন্ট এলিমেন্ট' পরিদর্শন করুন এবং এন্টার টিপুন use এটি আপনাকে নির্বাচিত উপাদানটির জন্য হোভার সিউডো ক্লাসের সিএসএস প্রদর্শন করবে।

ভবিষ্যতের বিল্ডগুলিতে তারা এটিকে কিছুটা সহজ করে দেবে বলে আশা করছি।


জেনে রাখা ভাল, তবে হ্যাঁ এটি অত্যন্ত হতাশার জন্য যে মাউসটিকে লিঙ্কটি ধরে রাখা প্রয়োজন ... এমনকি আপনি কেবল কীবোর্ডটি ব্যবহার করে এলিমেন্ট পরিদর্শন উইন্ডোটিতে ঘুরে দেখছেন। কি আপদ!
চাদ শুল্টজ

প্রকৃত উপাদান ফোর্সিং পুরো প্রক্রিয়া :hover, রাষ্ট্র ( as in the accepted answer), এছাড়াও উপাদান উপর মাধ্যমে ডান ক্লিক অর্জিত হয়,> পরিদর্শন, এবং পয়েন্টার রাখা, এবং তারপর এই জন্য ছদ্ম কোড চেক করতে কীবোর্ড কী ব্যবহার .. ধন্যবাদ কাজ বিকল্প .... তাই না আসলে একটি উত্পাত ! :) +1
ইরফান

5

ক্রোমে:

আপনি কোনও উপাদানটিতে মাউসওভারও করতে পারেন এবং তারপরে ক্লিক করুন CTRL+SHIFT+C উপাদানটি পরিদর্শন করতে করতে পারেন।

ফায়ারফক্সে:

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

ফায়ারব্যাগে:

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

উত্স: https://stackoverflow.com/a/11272205/2165415


1

আমি নিশ্চিত না যে আমি আপনার প্রশ্নটি ঠিক বুঝতে পেরেছি তবে আপনি ইভেন্টের হ্যান্ডলার কোডটি দেখতে চাইলে আপনি কেবল উপাদানটি পরীক্ষা করতে পারেন এবং ইভেন্ট শ্রোতাদের এলিমেন্ট প্যানেলের সাইডবার ফলকে দেখতে পারেন। অন্য উপায় হ'ল স্ক্রিপ্টস প্যানেলে কেবল বিরতি বোতাম টিপুন এবং কেবল উপাদানটি হোভার করুন। প্রথম ইভেন্ট হ্যান্ডলারের প্রথম নির্দেশে ডিবাগারটি থামবে।


আপনি কীভাবে এটি করেন সে সম্পর্কে আপনি কি আরও কিছু নির্দিষ্ট হতে পারেন? একটি সাধারণ কেসটি আমার পছন্দ মতো একটি বোতাম হবে এবং সাধারণ পরিদর্শনের মতো একই সহজ পদ্ধতিতে কীভাবে হোভারিং এফেক্টটি সম্পন্ন হয় তা দেখতে চান।
বো।

0

উত্তরের জন্য দয়া করে নীচের লিঙ্কটি দেখুন

দেখুন: ক্রোম বিকাশকারী সরঞ্জামগুলিতে হোভারের অবস্থা


লিঙ্কটির মেয়াদ উত্তীর্ণ হতে পারে এবং আপনার উত্তরটি অকেজো করে দেয়। এটি রোধ করতে দয়া করে আপনার উত্তরে কিছু তথ্য সরবরাহ করুন।
বোজিদার স্টানচেভ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.