পপওভার পরিদর্শনের জন্য ক্রোম ডিবাগার / ডেভটুলস প্যানেলে স্ক্রীন হিমায়িত করবেন?

Question

আমি z-indexএকটি টুইটার বুটস্ট্র্যাপ পপওভারটির চেষ্টা ও বিশ্লেষণ করতে ক্রোম পরিদর্শকটি ব্যবহার করছি এবং এটি অত্যন্ত হতাশাব্যঞ্জিত ...

পপওভারকে হিমায়িত করার কোনও উপায় আছে (দেখানোর সময়) যাতে আমি সম্পর্কিত সিএসএসকে মূল্যায়ন ও সংশোধন করতে পারি?

সম্পর্কিত লিঙ্কে একটি স্থির 'হোভার' স্থাপনের ফলে পপওভারটি প্রদর্শিত হবে না।

Comments

পপআপ দেখানোর সাথে সাথেই আপনার জাভাস্ক্রিপ্টে ব্রেকপয়েন্ট স্থাপন করার চেষ্টা করুন ( debugger;)

— ইউ

আমি 5 সেকেন্ডের মধ্যে window.setTimeoutট্রিগার করতে ব্যবহার করি debugger, তারপরে উপাদানটির উপর ঘুরে বেড়াও এবং অপেক্ষা করুন।

— গ্রিমডুড

হ্যালো, এখানে দেবটুলস প্রযুক্তিবিদ। আপনি কি সবাই আমাকে এমভিসিইগুলি সমস্যাটি দেখিয়ে পাঠাতে পারেন ? 2019 হিসাবে আমাদের কাছে কয়েকটি সরঞ্জাম রয়েছে যা কৌশলটি করা উচিত ( ইভেন্ট শ্রোতার ব্রেকপয়েন্টস , সিউডো-ক্লাস টগলস ) তবে আমি আপনার পরিস্থিতি পুনরুত্পাদন না করা পর্যন্ত আমি একটি বিশদ উত্তর দিতে পারি না।

— কায়েস বাসকস

আপনি এখানে অন্যান্য সমাধান ক্রোম এবং ফায়ারফক্সের জন্য খুঁজে পেতে পারেন

— মুহাম্মাদ আবদেলফাতাহ

@ কেইসবাসেস এখানে একটি উদাহরণ রয়েছে: টেলিআরকএকএন্ডো-angular-ui / components / DPdowns / roddownlist এটি খোলার জন্য ড্রপডাউন তালিকায় ক্লিক করুন, তারপরে এলিমেন্ট ভিউতে তালিকার সামগ্রী পপওভারটি পরীক্ষা করার চেষ্টা করুন।

— RMorrisey

Answer 1

এটা কাজ করে। এখানে আমার পদ্ধতি ছিল:

1. পছন্দসই পৃষ্ঠায় ব্রাউজ করুন
2. ডেভ কনসোলটি খুলুন - F12উইন্ডোজ / লিনাক্সে বা ম্যাকোস-এ option+ ⌘+ Jকরুন
3. Sourcesক্রোম ইন্সপেক্টরতে ট্যাবটি নির্বাচন করুন
4. ওয়েব ব্রাউজার উইন্ডোতে, পপওভার শুরুর জন্য পছন্দসই উপাদানটির উপর ঘুরে দেখুন
5. পপওভারটি দেখানোর সময় F8উইন্ডোজ / লিনাক্সে (অথবা fn+ F8ম্যাকোএসে) হিট করুন । আপনি যদি আসল পৃষ্ঠায় কোথাও ক্লিক করেন তবে F8 কিছুই করবে না will আপনার শেষ ক্লিকটি সূত্রের ট্যাবের মতো পরিদর্শকের কোথাও হওয়া দরকার
6. Elementsপরিদর্শক ইন ট্যাবে যান
7. আপনার পপওভারটি সন্ধান করুন (এটি ট্রিগার উপাদানটির এইচটিএমএল এ নেস্ট করা হবে)
8. সিএসএস পরিবর্তন করে মজা করুন

Comments

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

— ট্রেভর পিয়ার্স

যদি ডম উপাদানটি লুকানোর জন্য ফোকাসআউট ইভেন্টটি ব্যবহার করে তবে আপনার এফ 8-তে আঘাত হানার কোনও সুযোগ নেই!

— মার্সেল

@ ডিউন এফ 8 টি ট্রিগার করতে আপনার প্রয়োজন fn!

— mik01aj

আরও তথ্যের জন্য, F8শর্টকাট যা করে তা আসলে ডিবাগারকে থামিয়ে দেয় (স্ক্রিপ্ট সম্পাদন)। এবং ctrl + \ কাজ করে। ( cmd + \ ম্যাকোজে)

— লিওন - হ্যান লি

অথবা আপনি F8দুবার টিপতে পারেন

— শে

Answer 2

যে কোনও উপাদান পরিদর্শন করতে সক্ষম হতে নিম্নলিখিত করুন। হোভারের রাজ্যের নকল করা শক্ত হয়ে থাকলেও এটি কাজ করা উচিত:

• কনসোলে নিম্নলিখিত জাভাস্ক্রিপ্ট চালান। এটি 5 সেকেন্ডের মধ্যে ডিবাগারে প্রবেশ করবে।

  setTimeout(function(){debugger;}, 5000)

• আপনার উপাদানটি দেখান (ঘোরাফেরা করে বা তবে) এবং Chrome ডিবাগারে না ফেলা পর্যন্ত অপেক্ষা করুন।

• এখন Elementsক্রোম ইন্সপেক্টরটির ট্যাবে ক্লিক করুন এবং আপনি সেখানে নিজের উপাদানটি সন্ধান করতে পারেন।
• আপনি Find Elementআইকনে ক্লিক করতে সক্ষম হতে পারেন (ম্যাগনিফাইং গ্লাসের মতো দেখায়) এবং ক্রোম আপনাকে পৃষ্ঠায় ডান ক্লিক করে তারপরে আপনার উপাদানটি পরিদর্শন এবং অনুসন্ধান করতে এবং তারপরে অনুসন্ধান করতে দেয়Inspect Element

নোট করুন যে এই পদ্ধতির এই পৃষ্ঠায় এই অন্যান্য দুর্দান্ত উত্তরের জন্য সামান্যতম প্রকরণ ।

Comments

আমি সম্মান করি যে আপনি ফ্রজসম্বরের উত্তরের যথাযথ সম্মান দিয়েছেন। সুন্দর।

— জেরেমি মরিটজ

এটি আমার দরকার ছিল, কারণ কার্যকারিতাটি কোনও ডিওএম উপাদান জেএস ফোকাসে যুক্ত হওয়ার কারণে এবং ঝাপসা করে মুছে ফেলার কারণে হয়েছিল, যখন আপনি দেব সরঞ্জামগুলিতে স্যুইচ করেন তখন সর্বদা ঘটে happens

— ট্রুডসাইন

আব্রামের F8 সমাধানটি আমার পক্ষে কার্যকর হয়নি for এই এক করেছে। ধন্যবাদ!

— রাল্ফ

ধন্যবাদ. আমি একটি বুকমার্ক তৈরি শিরোনাম : ❚❚, ঠিকানা : javascript:debugger;। F8কাজ করে, তবে যারা মাউস ব্যবহার করতে পছন্দ করেন তাদের পক্ষে এটি আরও সুবিধাজনক হতে পারে।

— টাইমেক

অন্যরা যেমন মন্তব্য করেছেন F8 উত্তরটি আমার পক্ষে কাজ করছে না, এবং আমাকে সম্পূর্ণ বাদাম চালাচ্ছে! এটি একটি কবজির মতো কাজ করে। ধন্যবাদ!

— ডুউইউইভেনকোডব্রো

Answer 3

আপডেট: ব্র্যাড পার্কস যেমন তাঁর মন্তব্যে লিখেছেন, কেবলমাত্র জেএস কোডের একটি লাইন সহ একটি আরও ভাল এবং সহজ সমাধান রয়েছে:

চালান setTimeout(function(){debugger;},5000);, তারপরে আপনার উপাদানটি দেখান এবং এটি ডিবাগারে না ফেলা পর্যন্ত অপেক্ষা করুন

---

আসল উত্তর:

আমার ঠিক একই সমস্যা ছিল এবং আমি মনে করি একটি "সর্বজনীন" সমাধান পেয়েছি। (ধরে নিচ্ছি সাইটটি jQuery ব্যবহার করে)
আশা করি এটি কারও সহায়তা করে!

1. পরিদর্শকের উপাদান ট্যাবে যান
2. রাইট ক্লিক <body>করুন এবং "ক্লিক HTML হিসাবে সম্পাদনা "
3. এর পরে নিম্নলিখিত উপাদান যুক্ত করুন <body>Ctrl + Enter টিপুন:
   <div id="debugFreeze" data-rand="0"></div>
4. এই নতুন উপাদানটিতে ডান ক্লিক করুন এবং "ব্রেক করুন ..." -> "বৈশিষ্ট্য পরিবর্তনগুলি" নির্বাচন করুন
5. এখন কনসোল ভিউতে যান এবং নিম্নলিখিত কমান্ডটি চালান:
   setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
6. এখন ব্রাউজার উইন্ডোতে ফিরে যান এবং আপনার উপাদানটি সন্ধান করতে আপনার কাছে 5 সেকেন্ড থাকতে হবে এবং ব্রেক-পয়েন্টটি আঘাত হানার আগে ব্রাউজারটি "হিমশীতল" ক্লিক করে / হোভার / ফোকাস / ইত্যাদি ক্লিক করুন।
7. এখন আপনি আপনার ক্লিক করা / আচ্ছাদিত / দৃষ্টি নিবদ্ধ করা / ইত্যাদি উপাদান শান্তিতে পরিদর্শন করতে পারেন।

ধারণাটি পাওয়া গেলে অবশ্যই আপনি জাভাস্ক্রিপ্ট এবং সময় পরিবর্তন করতে পারেন।

Comments

হে! দুর্দান্ত ধারণা ... আপনার অতিরিক্ত ডিভিও যুক্ত করার দরকার নেই যদিও ... কেবল পরিবর্তে এই জাভাস্ক্রিপ্টটি চালান setTimeout(function(){debugger;}, 5000);, তারপরে আপনার উপাদানটি দেখান এবং এটি ডিবাগারে না ফেরা পর্যন্ত অপেক্ষা করুন। তারপরে ক্রোম ইন্সপেক্টরটির "উপাদানসমূহ" ট্যাবে ক্লিক করুন এবং আপনি সেখানে নিজের উপাদানটি সন্ধান করতে পারেন। আপনি "এলিমেন্ট ফাইন্ড" আইকনটিতে ক্লিক করতে সক্ষম হতে পারেন (ম্যাগনিফাইং গ্লাসের মতো দেখায়) এবং ক্রোম আপনাকে পৃষ্ঠায় ডানদিকের উপর ক্লিক করে তারপরে পরিদর্শন করতে এবং আপনার উপাদানটি অনুসন্ধান করতে এবং তারপরে "উপাদানটি পরিদর্শন করুন" বাছাই করতে দেয়।

— ব্র্যাড পার্কগুলি

আমি মনে করি আপনার এটিকে একটি উত্তর হিসাবে যুক্ত করা উচিত, কারণ এই সমাধানটি আমার চেয়ে ভাল নয়, তবে এখানকার অন্যদের চেয়ে ভাল। সত্যিই সুন্দর!

— ফ্রিজসম্বোর

Answer 4

1. এলিমেন্ট ট্যাব এর ভিতরে যে কোনও জায়গায় ডান ক্লিক করুন
2. পছন্দ করা Breakon... > subtree modifications
3. আপনি যে পপআপটি দেখতে চান তা ট্রিগার করুন এবং এটি ডিওমে পরিবর্তনগুলি দেখলে তা হিমশীতল হয়ে যায়
4. আপনি যদি এখনও পপআপটি না দেখতে পান তবে আপনি যে পপআপটি দেখতে চান তা স্থির না করা অবধি ক্রমের উপরের শীর্ষে অবস্থিত Step over the next function(F10)পাশে বোতামটি টিপুন Resume(F8)।

Comments

ধন্যবাদ! আমি এটিকে জানতাম না এবং এটি আমাকে রক্ষা করত

— R Claven

Answer 5

আমি খুঁজে পেয়েছি যে এটি ক্রোমে সত্যই ভাল কাজ করে।

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

Comments

এটি তখনই কাজ করবে যদি পপওভারটি CSS দ্বারা ট্রিগার করা হয়।

— mik01aj

Answer 6

এটি কনসোল ট্যাবে রাখুন:

setTimeout(function(){debugger;}, 5000)

তারপরে 5s পরে পপআপটি কোথায় প্রদর্শন করতে হবে তার উপর ক্লিক করুন - স্ক্রিন হিমশীতল হয়ে যাবে এবং সিএসএসের কাস্টমাইজ করতে মজা পাবেন।

Answer 7

আমার সহজ উপায়:

setTimeout(function(){ debugger; }, 3000);

Comments

এটি 3 বছর আগে ব্র্যাড পার্কের সমাধানের

— মতোই হ'ল

Answer 8

আমি অন্যান্য সমাধানগুলি এখানে চেষ্টা করেছিলাম, তারা কাজ করে তবে আমি অলস তাই এটি আমার সমাধান

1. প্রসারিত অবস্থায় ট্রিগার করতে এলিমেন্টটির উপরে ঘোরা
2. ctrl+ shift+c
3. আবার এলিমেন্টের উপরে ঝাঁকুনি
4. সঠিক পছন্দ
5. ডিবাগারে নেভিগেট করুন

ডান ক্লিক করে এটি আর মাউসের ইভেন্টটিকে নিবন্ধভুক্ত করে না কারণ একটি প্রসঙ্গ মেনু পপ আপ হয়, তাই আপনি মাউসটিকে নিরাপদে সরিয়ে নিতে পারেন