আমি কীভাবে ব্রাউজারে অন্তর্ধানের উপাদানটি পরীক্ষা করতে পারি?

Question

আমার মাউসটি সরে গেলে আমি যে উপাদানটি অদৃশ্য হয়ে যাব তা কীভাবে পর্যালোচনা করতে পারি?

আমি এটি আইডি, শ্রেণি বা অন্য কিছু জানি না তবে এটি পরিদর্শন করতে চাই।

সমাধানগুলি আমি চেষ্টা করেছি:

কনসোলের ভিতরে জিকুয়ারি নির্বাচনকারী চালান $('*:contains("some text")')তবে কোনও ভাগ্য হয়নি প্রধানত কারণ উপাদানটি লুকানো নেই তবে সম্ভবত ডিওএম গাছ থেকে সরানো হয়েছে।

পরিবর্তনের জন্য ডিওএম ট্রি ম্যানুয়ালি পরিদর্শন করা আমাকে কিছুই দেয় না কারণ এটি কী পরিবর্তন হয়েছে তা লক্ষ্য করা খুব দ্রুত fast

সাফল্য:

ইভেন্ট ইভেন্ট ব্রেকপয়েন্টগুলি নিয়ে আমি সফল হয়েছি। বিশেষত - আমার ক্ষেত্রে মাউসডাউন। কেবল Sources-> Event Listener Breakpoints-> Mouse-> mousedownক্রোমে যান। এর পরে আমি যে উপাদানটি আমি পরিদর্শন করতে চেয়েছিলাম সেটি ক্লিক করেছি এবং এর ভিতরে Scope Variablesআমি কয়েকটি দরকারী দিক দেখলাম।

Comments

আপনার প্রশ্নটি সহায়তা করেছে যদিও আমি উত্সগুলি ব্যবহার করে ব্রেকপয়েন্টে উঠিনি, আমি কনসোলে নিম্নলিখিত স্ক্রিপ্টটি সম্পাদন করেছি: document.body.addEventListener('mouseup',function(){ debugger; })এটি আমাকে একটি বিরতিতে পেয়েছে এবং আমি তৈরি উপাদানগুলি পরিদর্শন করতে পারি।

— এইচএমআর

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

— অ্যারাইসবেক

Answer 1

(এই উত্তরটি কেবল ক্রোম বিকাশকারী সরঞ্জামগুলিতে প্রযোজ্য below নীচের আপডেট দেখুন))

অন্তর্ধানকারী উপাদান রয়েছে এমন একটি উপাদান সন্ধান করুন। উপাদানটিতে রাইট ক্লিক করুন এবং "ব্রেক অন ...> সাবট্রি মডিফিকেশন" প্রয়োগ করুন। এটি উপাদানটি অদৃশ্য হওয়ার আগে একটি ডিবাগার বিরতি দেয়, যা আপনাকে বিরতি অবস্থায় উপাদানটির সাথে ইন্টারঅ্যাক্ট করতে দেয়।

অক্টোবর 22 2019 আপডেট করুন: ভি। 70 প্রকাশের সাথে, দেখে মনে হচ্ছে ফায়ারফক্স অবশেষে এই ধরণের ডিবাগিং 2 3 সমর্থন করে :

Comments

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

— ডিলান পিয়ার্স

পৃষ্ঠাটি ডান-ক্লিকটি ধারণ করেছে এবং ডান-ক্লিকে এটি নিজস্ব জিনিস করে যদি এটি কাজ করে না।

— মাইকেল

এটি একই

— ধারকটিতে

@ স্টিল_আলিয়ারিং "একই পাত্রে দুটি কথোপকথন" বলতে কী বোঝাতে চেয়েছেন আপনি কি তা ব্যাখ্যা করতে পারেন?

— আর্ক্সপেটিকা

<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- আমার ক্ষেত্রে প্রথম ডায়ালগটি কেবলমাত্র ডিবি থেকে তথ্য না আসা পর্যন্ত প্রদর্শিত হয়, প্রায় 1 সেকেন্ড

— স্থির_চলাচল

Answer 2

ক্রোমে একটি বিকল্প পদ্ধতি:

• ডিভটুলগুলি খুলুন (এফ 12)।
• "উত্স" ট্যাবটি নির্বাচন করুন।
• আপনি যে উপাদানটি চান তা প্রদর্শিত হচ্ছে, F8 টিপুন (বা Ctrl + /)। এটি স্ক্রিপ্টের প্রয়োগ কার্যকর করবে এবং ডমকে প্রদর্শিত হ'ল "হিমায়িত" করবে।
• এই বিন্দু থেকে উপাদানটি নির্বাচন করতে Ctrl + Shift + C ব্যবহার করুন।

Comments

পারফেক্ট !! এটি আমি যা চেয়েছিলাম ঠিক

— তেমনটি করে

আমি লক্ষ্য করেছি যে এটি তখনই কাজ করে যখন আপনার বিকাশকারী সরঞ্জামগুলি ইতিমধ্যে 'উত্স' ট্যাবে খোলা আছে।

— hbulens

এটি কোডটি কার্যকর করে নিথর করে দেয় তবে উপাদানটি এখনও অদৃশ্য হয়ে যায় (আমি প্রতিক্রিয়া ব্যবহার করছি)।

— Lorem Ipsum ডলর

আমার ক্রোম F8 বা Crtl + says বলে (Crtl + / নয়)। এছাড়াও, Crtl + my আমার ক্ষেত্রে কাজ করে না ...

— রজার ভিসিয়ানা

এটি গুগল ভিডিও নিয়ন্ত্রণ পপ-আপগুলিতে কাজ করে না ... আপনি কীটি চাপার সাথে সাথে নিয়ন্ত্রণটি দৃশ্য থেকে হ্রাস হয়ে যায় এবং হিমশীতল হওয়ার আগেই সম্পূর্ণ বিবর্ণ হয়ে যায়।

— মাইকেল

Answer 3

1. কনসোল খুলুন
2. টাইপ করুন setTimeout(()=>{debugger;},5000);
3. টিপুন

আপনার উপাদানটি উপস্থিত হতে এখন আপনার কাছে 5 সেকেন্ড রয়েছে। এটি উপস্থিত হয়ে গেলে, ডিবাগারটি আঘাত না করা পর্যন্ত অপেক্ষা করুন। যতক্ষণ আপনি পুনরায় কাজ শুরু করবেন না, ততক্ষণ আপনি আপনার উপাদানটির সাথে খেলতে পারবেন এবং এটি অদৃশ্য হবে না।

---

এই ধাপগুলি প্রতিবারের উপরে পুনরাবৃত্তি করা এড়াতে দরকারী পরামর্শ:

এটি একটি বুকমার্কলেট হিসাবে যুক্ত করুন:

1. যে কোনও পৃষ্ঠা বুকমার্ক করুন
2. এই নতুন বুকমার্কটি সম্পাদনা করুন
3. URL / অবস্থানটি এর সাথে প্রতিস্থাপন করুন: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

পরবর্তী বার আপনি এটি ব্যবহার করতে ইচ্ছুক হলে, এই বুকমার্কটি ক্লিক করুন / আলতো চাপুন।

Comments

এটি অদৃশ্য হয়ে যাওয়া উপাদানগুলি ডিবাগ করার দ্রুততম এবং সর্বাধিক স্থিতিশীল উপায়

— wh

Answer 4

আমি ম্যাকের উপরে ক্রোম ব্যবহার করছি আমি উপরের পদক্ষেপগুলি অনুসরণ করেছি তবে আমি আরও কিছুটা ব্যাখ্যা করার চেষ্টা করব:

1. ডান ক্লিক করুন এবং উপাদান পরিদর্শন করতে যান।
2. উত্স ট্যাবে যান।
3. তারপরে এলিমেন্টে ঘুরে দেখুন।
4. তারপরে কি-বোর্ড ব্যবহার করুন F8 বা Command(Window) \ । এটি স্থিতিশীল অবস্থায় স্ক্রিনটি বিরতি দেবে এবং হোভার আউট করার সময় উপাদানটি অদৃশ্য হবে না।

Comments

আপনাকে ধন্যবাদ, বিস্তারিত নির্দেশাবলীর জন্য আপনাকে ধন্যবাদ! চূড়ান্ত কৌতূহল প্রদর্শনের পরে - একটি বোতামে ক্লিক করা, টিপুন Ctr + Shift + C, মাউসটিকে উপাদানটির উপরে F8ঘোরাতে সরাতে, এবং দেড় থেকে দেড়েক জায়গার মধ্যে টিপতে

— স্থির_সামগ্রী

Answer 5

ফায়ারব্যাগে এর বিভিন্ন সমাধান রয়েছে:

1. আপনি এইচটিএমএল প্যানেলের অভ্যন্তরে ব্রেক অন মিউটেট ব্যবহার করতে পারেন । (এটির সাহায্যে আপনি এটি কোন উপাদানটি আবিষ্কার করতে সক্ষম হবেন)
2. আপনি উপাদানটি ডান ক্লিক করতে পারেন এবং ফায়ারব্যাগ দিয়ে উপাদান পরিদর্শন করতে পারেন

এছাড়াও আপনি 551 ইস্যুটি অনুসরণ করতে চাইতে পারেন , যা নির্দিষ্ট ইভেন্টগুলিকে সাময়িকভাবে ব্লক করার জন্য জিজ্ঞাসা করে।

সম্পাদনা:

এটি কোন উপাদানটি তা খুঁজে বের করতে আপনি এইচটিএমএল প্যানেল বিকল্পগুলি হাইলাইট পরিবর্তনগুলি , প্রসারিত পরিবর্তনগুলি এবং স্ক্রোল পরিবর্তনগুলিকে HTML প্যানেলের অভ্যন্তরে দৃশ্যমান করতে সক্ষম করতে সক্ষম করতে পারবেন ।

সেবাস্টিয়ান

Comments

ক্রোমের পাশাপাশি শালীন পরিদর্শক রয়েছে। সমস্যাটি হ'ল - উপাদানটিতে রাইট ক্লিক করলে তা আমার ক্ষেত্রে অদৃশ্য হয়ে যায়। ক্রোমের ব্রেক অন ডিওএম মিউটেটও রয়েছে। এটির সাথে সমস্যা - আমি জানি না যে এটি কোন উপাদানটি গতিশীলভাবে উত্পন্ন হিসাবে এটি রয়েছে

— lukas.pukenis

আমি কীভাবে এটির উপাদানটি কীভাবে তা জানতে পারা একটি ইঙ্গিত দেওয়ার জন্য আমার উত্তরটি সম্পাদনা করেছি।

— সেবাস্তিয়ান জার্টনার

Answer 6

আমার ক্ষেত্রে, আমি গুগল ক্রোমে পুনরাবৃত্তির বিকল্পটি ব্যবহার করেছি :

পদক্ষেপগুলি হ'ল:

1. ড্রপডাউন ক্ষেত্রটি পরীক্ষা করুন
2. গতিশীল ডিওএম (বেগুনি হাইলাইট) সন্ধান করুন
3. ডায়নামিক ডিওমে ডান-মাউস ক্লিক করুন
4. পুনরাবৃত্তভাবে প্রসারণ চয়ন করুন :
5. আমরা দেখতে পাচ্ছি যে সমস্ত উপাদান রয়েছে

এখানে একটি ডেমো রয়েছে:

Answer 7

আপনার মাউসের সাহায্যে উপাদানটির উপর ঘুরে দেখুন এবং স্ক্রিপ্টের কার্যকারিতা বিরতি দিতে F8 (এটি ক্রোমে রয়েছে) টিপুন। হোভারের অবস্থা আপনার কাছে দৃশ্যমান থাকবে।

এটি আপনাকে সোর্স ট্যাবে নিয়ে যায়। উপাদানসমূহ ট্যাবে ফিরে যান। এই সময় কোড অদৃশ্য হবে না।

Answer 8

আপনি উপাদানগুলির অধীনে পরিদর্শকের উপস্থিতি এবং অদৃশ্য উপাদানগুলি দেখতে পারেন can আপনি যদি উপাদানটি দৃশ্যমান হয় সেটিতে নেভিগেট করেন তবে এটি স্থিতি পরিবর্তনের সাথে সাথে এটি অদৃশ্য হয়ে যাওয়ার বা এর CSS পরিবর্তন দেখতে পারা উচিত।

ফায়ারফক্সে ফায়ারব্যাগ বা ক্রোমে বিল্ট ইন্সপেক্টর দিয়ে এটি সম্ভব।

Comments

হ্যাঁ. আমি বলেছি যে ডিওমে পরিবর্তন খুব দ্রুত ঘটে এবং পৃষ্ঠায় ডমকে ভারী পরিবর্তন ঘটে তাই এটি আসলেই সমাধান নয় কারণ আমি আমার প্রয়োজনীয় উপাদানগুলিকে

— একত্রিত করে একত্রিত

আপনি কনসোল.লগ ব্যবহার করে যা চলছে তা সনাক্ত করার চেষ্টা করতে পারেন উদাহরণস্বরূপ যে ফাংশনটির শুরুতে আপনি যাচাই করার চেষ্টা করছেন যা অবজেক্ট সিএসএস ইত্যাদি দেখতে পারেন বা পরিবর্তনগুলি ধীর করে দিন যতক্ষণ না আপনি জানেন যে তারা সঠিকভাবে কাজ করছেন এবং তারপরে আপনি গতি পরিবর্তন করবেন এটি যেমন jquery এ লুকান ('ধীর') হতে চান

— ম্যাটপল

সমস্যাটি হ'ল - এটি আমার নিজস্ব কোডবেস নয়, এটি একটি উত্তরাধিকার, বড়, পুরানো, কোডবেস যেখানে ফাইলগুলির মাধ্যমে সরল অনুসন্ধান আমাকে কিছুই দেয় না .. :)

— lukas.pukenis

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

— ম্যাটপল

কিভাবে সম্পর্কে এই: stackoverflow.com/questions/10213703/...

— matpol

Answer 9

আমারও একই সমস্যা ছিল তবে আমি ফায়ারফক্স ব্যবহার করি এটি খোলার সাথে সাথেই সমাধানটি পাওয়া যায় এটির সমাধান হয়ে যায়: 4 টি ড্যাশগুলি (সেটিংস) খুলুন ওয়েব বিকাশকারী> ডিবাগারে যান এবং তত্ক্ষণাত F8 চাপুন যা স্ক্রিপ্ট থামিয়ে দেওয়ার জন্য শর্টকাট is এটি লাথি মেরে এবং সনাক্ত করার আগে আপনি বিকাশকারী সরঞ্জামগুলি খোলেন