পছন্দসমূহ

সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova

DevTools এবং এর প্যানেল ব্যবহার করে চেহারা এবং আচরণ কনফিগার করুন সেটিংস. সেটিংস > পছন্দসমূহ । এই ট্যাবটি সাধারণ কাস্টমাইজেশন বিকল্প এবং প্যানেল-নির্দিষ্ট উভয়ই তালিকাভুক্ত করে।

পছন্দ সেট করতে, খুলুন সেটিংস. সেটিংস > পছন্দসমূহ এবং পরবর্তীতে বর্ণিত বিভাগগুলির একটিতে স্ক্রোল করুন।

পছন্দ ট্যাবে উপস্থিতি বিভাগ।

প্রতিটি সেটিং কি করে তা জানতে, সেটিং এর নামের জন্য এই পৃষ্ঠাটি অনুসন্ধান করুন এবং add_circle এর বিবরণ প্রসারিত করুন।

এই রেফারেন্সটি নিম্নলিখিত আইকনগুলির সাথে বিভিন্ন সেটিংস নির্দেশ করে:

  • চেকবক্স। চেকবক্স
  • ড্রপ-ডাউন তালিকা ড্রপ-ডাউন
  • অবচয়। অবচয়

ডিফল্ট পছন্দগুলি পুনরুদ্ধার করতে, পছন্দ ট্যাবের শেষে স্ক্রোল করুন এবং ডিফল্টগুলি পুনরুদ্ধার করুন এবং পুনরায় লোড করুন ক্লিক করুন।

চেহারা

এই বিভাগে DevTools উপস্থিতি কাস্টমাইজ করে এমন বিকল্পগুলির তালিকা রয়েছে৷

থিম ড্রপ-ডাউন DevTools UI এর জন্য একটি রঙের থিম সেট করে।

থিম: DevTools থিমকে সিস্টেম পছন্দ থেকে অন্ধকার থেকে আলোতে পরিবর্তন করা হচ্ছে।
  • সিস্টেম পছন্দ
  • আলো
  • অন্ধকার

প্যানেল লেআউট ড্রপ-ডাউন প্যানেলে প্যানেল সাজায়।

উপাদান > শৈলী এবং বোন ট্যাব এবং উত্স > ডিবাগার ফলককে প্রভাবিত করে। স্বয়ংক্রিয় বিকল্পটি লেআউটটিকে DevTools প্রস্থের উপর নির্ভর করে।

প্যানেল বিন্যাস: উপাদানের প্যানেল বিন্যাস অনুভূমিক থেকে উল্লম্ব পরিবর্তন করা হচ্ছে।
  • অনুভূমিক
  • উল্লম্ব
  • স্বয়ংক্রিয়

ভাষা ড্রপ-ডাউন DevTools UI এর জন্য লোকেল সেট করে।

এই সেটিং প্রয়োগ করতে, DevTools পুনরায় লোড করুন।

ভাষা: চীনা ভাষায় সেটিংস প্যানেল।
  • ব্রাউজার UI ভাষা
  • স্থানীয় বিকল্পগুলির মধ্যে একটি, এই উদাহরণে, চাইনিজ

চেকবক্স। প্যানেল পরিবর্তন করতে Ctrl/Cmd + 0 - 9 শর্টকাট সক্ষম করুন আপনাকে কীবোর্ড ব্যবহার করে প্যানেল খুলতে দেয়৷

এই ভিডিওটি দেখায় কিভাবে সংশ্লিষ্ট কীবোর্ড শর্টকাটগুলি ব্যবহার করে ট্যাবগুলির মধ্যে স্যুইচ করতে হয়৷

চেকবক্স। পজড স্টেট ওভারলে অক্ষম করে ডিবাগারে পজ করা লুকিয়ে রাখে বোতামগুলি খেলুন এবং স্টেপ ওভার করুন। কোড এক্সিকিউশন পজ করা হলে ভিউপোর্টে ওভারলে।

চেকবক্স। প্রতিটি আপডেটের পরে নতুন কী তা দেখান প্রতিটি Chrome আপডেটের পরে স্বয়ংক্রিয়ভাবে নতুন কী ড্রয়ার ট্যাব খোলে৷

কি নতুন ড্রয়ার ট্যাব.

সূত্র

এই বিভাগে সোর্স প্যানেল কাস্টমাইজ করা বিকল্পগুলি তালিকাভুক্ত করা হয়েছে।

চেকবক্স। বেনামী এবং বিষয়বস্তু স্ক্রিপ্টে অনুসন্ধান আপনাকে অনুসন্ধান ট্যাব ব্যবহার করে Chrome এক্সটেনশন সহ সমস্ত লোড করা JavaScript ফাইলগুলি অনুসন্ধান করতে দেয়৷

এই ভিডিওটি দেখায় কিভাবে একটি এক্সটেনশন সোর্স ফাইলে টেক্সট সার্চ করতে হয়।

চেকবক্স। সাইডবারে ফাইলগুলি স্বয়ংক্রিয়ভাবে প্রকাশ করুন যখন আপনি সম্পাদকে ট্যাবগুলির মধ্যে স্যুইচ করেন তখন উত্স > পৃষ্ঠা ফলকে ফাইলগুলি নির্বাচন করে৷

এই ভিডিওটি দেখায় কিভাবে, এই বিকল্পটি সক্ষম করে, সোর্স প্যানেল নেভিগেশন ট্রিতে ফাইলগুলি নির্বাচন করে যখন আপনি ট্যাবগুলির মধ্যে স্যুইচ করেন৷

চেকবক্স। JavaScript সোর্স ম্যাপ সক্ষম করুন DevTools-কে জেনারেট করা বা ছোট করা JavaScript ফাইলগুলির উত্স খুঁজে পেতে দেয়৷

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

চেকবক্স। ট্যাব সক্রিয় ফোকাস সরানো হয় ট্যাব কী। ট্যাব কী এডিটরে একটি ট্যাব অক্ষর সন্নিবেশ করার পরিবর্তে DevTools-এর ভিতরে ফোকাস সরান।

DevTools পুনরায় লোড করতে হবে।

এই ভিডিওটি প্রথমে ট্যাব কী দিয়ে ঢোকানো ট্যাব অক্ষর দেখায়। তারপর যখন আপনি এই বিকল্পটি সক্ষম করুন এবং DevTools পুনরায় লোড করুন, তখন ট্যাব কী ফোকাসকে সরিয়ে দেয়।

চেকবক্স। ডিটেক্ট ইন্ডেন্টেশন এডিটরে খোলা সোর্স ফাইলের একটিতে ইন্ডেন্টেশন সেট করে।

DevTools পুনরায় লোড করতে হবে।

এই ভিডিওটি প্রথমে আটটি স্থানের ডিফল্ট ইন্ডেন্টেশন দেখায়। তারপর যখন আপনি এই বিকল্পটি সক্ষম করেন, এটি উৎস ফাইলের ডিফল্ট ইন্ডেন্টেশনকে ওভাররাইড করে।

চেকবক্স। স্বয়ংসম্পূর্ণতা সম্পাদকে সহজ পরামর্শ সক্ষম করে।

এই ভিডিওটি প্রথম কোনো পরামর্শ দেখায় না। তারপর যখন আপনি এই বিকল্পটি সক্ষম করেন, তখন সম্পাদক কমান্ড সমাপ্তির জন্য পরামর্শ দেখায়।

চেকবক্স। স্বয়ংক্রিয় বন্ধনী বন্ধকরণ স্বয়ংক্রিয়ভাবে একটি বন্ধ বন্ধনী বা ট্যাগ যোগ করে যখন আপনি একটি খোলার টাইপ করেন।

এই ভিডিওটি স্বয়ংক্রিয় বন্ধনী বন্ধ করার আগে এবং পরে খোলার বন্ধনী টাইপ করা দেখায়৷

চেকবক্স। বন্ধনী মিলে যাওয়া আন্ডারলাইন এবং হাইলাইট এডিটরে হালকা লালে একটি বর্গাকার বন্ধনী, কোঁকড়া বন্ধনী, বা একটি জোড়া ছাড়া বন্ধনী।

একটি জোড়া ছাড়া একটি কোঁকড়া বন্ধনী লাল দিয়ে আন্ডারলাইন করা।

চেকবক্স। কোড ফোল্ডিং আপনাকে এডিটরে কোঁকড়া বন্ধনীতে কোড ব্লকগুলি ভাঁজ করতে এবং প্রকাশ করতে দেয়।

DevTools পুনরায় লোড করতে হবে।

এই ভিডিওটি দেখায় যে আপনি যখন এই বিকল্পটি সক্ষম করবেন তখন কোড ব্লকগুলি কীভাবে ভাঁজ করবেন৷

হোয়াইটস্পেস অক্ষর দেখান ড্রপ-ডাউন এডিটরে হোয়াইটস্পেস অক্ষর প্রদর্শন করে।

DevTools পুনরায় লোড করতে হবে। বিকল্পগুলি নিম্নলিখিতগুলি করে:

  • সবগুলি সমস্ত হোয়াইটস্পেস অক্ষরকে বিন্দু ( ... ) হিসাবে বোঝায়। অতিরিক্তভাবে, সম্পাদক ট্যাব অক্ষরটিকে একটি লাইন ( ) হিসাবে নির্দেশ করে।
  • ট্রেলিং হালকা লাল রঙে লাইনের শেষে সাদা স্থানের অক্ষরগুলিকে হাইলাইট করে।
হোয়াইটস্পেস অক্ষর দেখান: নির্বাচিত বিকল্পগুলি: সমস্ত এবং ট্রেইলিং৷
  • কোনোটিই নয়
  • সব ( ... )
  • অনুগামী

চেকবক্স। ডিবাগিং করার সময় ইনলাইনে ভেরিয়েবল মান প্রদর্শন করুন যখন এক্সিকিউশন পজ করা হয় তখন অ্যাসাইনমেন্ট স্টেটমেন্টের পাশে আপনাকে পরিবর্তনশীল মান দেখায়।

ফাংশন এক্সিকিউশনের সময় বিরাম দেওয়া ডিবাগার অ্যাসাইনমেন্ট স্টেটমেন্টের পাশে পরিবর্তনশীল মান প্রদর্শন করে।

চেকবক্স। একটি ব্রেকপয়েন্ট ট্রিগার করার সময় ফোকাস সোর্স প্যানেল ব্রেকপয়েন্টের সাথে লাইনে সোর্স > এডিটর খোলে যা এক্সিকিউশন পজ করে।

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

চেকবক্স। স্বয়ংক্রিয়ভাবে সুন্দর প্রিন্ট মিনিফাইড সোর্স সেই উৎসগুলিকে পাঠযোগ্য করে তোলে।

যখন সুন্দর-মুদ্রিত হয় , তখন সম্পাদক একাধিক লাইনে একটি একক দীর্ঘ কোড লাইন দেখাতে পারে, এর আগে - এটি একটি লাইনের ধারাবাহিকতা নির্দেশ করতে।

উত্স প্যানেলে সুন্দর-মুদ্রিত কোড।

চেকবক্স। CSS সোর্স ম্যাপ সক্ষম করুন DevTools-কে জেনারেট করা CSS ফাইলের উৎস খুঁজে বের করতে দেয়, উদাহরণস্বরূপ, .scss , এবং সেগুলি আপনাকে দেখায়।

উত্স প্যানেল নেভিগেশন ট্রির অথরেড বিভাগে .scss ফাইলগুলি দেখায়। এলিমেন্টস প্যানেলের শৈলী ফলক CSS নিয়মের পাশে .scss উত্সগুলির লিঙ্ক দেখায়।

চেকবক্স। ফাইলের শেষ প্রান্তে স্ক্রোল করার অনুমতি দিন আপনাকে এডিটরের শেষ লাইনের চেয়ে আরও বেশি স্ক্রোল করতে দেয়।

এই ভিডিওটি আপনাকে দেখায় কিভাবে আপনি এই বিকল্পটি সক্ষম করার সময় ফাইলের শেষের দিকে স্ক্রোল করবেন।

চেকবক্স। DevTools-কে রিমোট ফাইল পাথ থেকে সোর্স ম্যাপের মতো রিসোর্স লোড করার অনুমতি দিন । নিরাপত্তার কারণে ডিফল্টরূপে অক্ষম।

অক্ষম রেখে দিলে, DevTools নিম্নলিখিতগুলির মতো কনসোল বার্তাগুলিতে লগ করে:

কনসোলে একটি বার্তা যা জানিয়ে দেয় যে দূরবর্তী ফাইল পাথ থেকে লোড করা নিরাপত্তার কারণে নিষিদ্ধ।

ডিফল্ট ইন্ডেন্টেশন ড্রপ-ডাউন আপনাকে স্পেস সংখ্যা নির্বাচন করতে দেয় ট্যাব কী। এডিটরে ট্যাব কী সন্নিবেশ করান।

ডিফল্ট ইন্ডেন্টেশন: ওভাররাইডিং বিকল্পগুলি অক্ষম করা এবং ডিফল্ট ইন্ডেন্টেশন দুটি স্পেস থেকে আট, তারপর ট্যাব কীতে পরিবর্তন করা।
  • 2 স্পেস
  • 4টি স্পেস
  • 8টি স্পেস
  • ট্যাব চরিত্র

এই উদাহরণটি দেখায় কিভাবে ডিফল্ট ইন্ডেন্টেশনকে প্রথমে আটটি স্পেস এবং তারপরে একটি ট্যাব অক্ষরে সেট করতে হয়।

উপাদান

এই বিভাগে উপাদান প্যানেল কাস্টমাইজ করা বিকল্প তালিকা.

চেকবক্স। ব্যবহারকারী এজেন্ট শ্যাডো দেখান DOM DOM ট্রিতে ছায়া DOM নোড প্রদর্শন করে।

এলিমেন্টস প্যানেল ছায়া DOM নোড দেখায়।

চেকবক্স। শব্দ মোড়ানো DOM গাছে লম্বা লাইন ভেঙ্গে পরবর্তী লাইনে মোড়ানো হয়।

এলিমেন্টস প্যানেল শব্দ দ্বারা দীর্ঘ লাইন ভেঙ্গে পরবর্তী লাইনে মোড়ানো হয়।

চেকবক্স। HTML মন্তব্য দেখান DOM ট্রিতে HTML মন্তব্য প্রদর্শন করে।

এলিমেন্টস প্যানেল HTML মন্তব্য দেখায়।

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

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

চেকবক্স। বিশদ পরিদর্শন টুলটিপ দেখান ভিউপোর্টে টুলটিপ প্রদর্শন করে পরিদর্শন করুন। আপনি একটি উপাদানের উপর হভার করার সাথে সাথে মোড পরিদর্শন করুন।

পরিদর্শন মোডে দেখানো বিস্তারিত টুলটিপ।

চেকবক্স। হোভারে শাসক দেখান ভিউপোর্টে শাসকগুলিকে প্রদর্শন করে যখন আপনি DOM গাছের উপাদানগুলির উপর হোভার করেন৷

ভিউপোর্টে দেখানো শাসক।

চেকবক্স। CSS ডকুমেন্টেশন দেখান টুলটিপ একটি ছোট বিবরণ সহ একটি টুলটিপ প্রদর্শন করে যখন আপনি শৈলী ফলকে একটি সম্পত্তির উপর হোভার করেন।

আরও জানুন লিঙ্কটি আপনাকে সম্পত্তিতে একটি MDN CSS রেফারেন্স নিয়ে যায়।

একটি CSS সম্পত্তির ডকুমেন্টেশন সহ টুলটিপ।

অন্তর্জাল

এই বিভাগে নেটওয়ার্ক প্যানেল কাস্টমাইজ করা বিকল্পগুলি তালিকাভুক্ত করা হয়েছে। বেশিরভাগ বিকল্প প্যানেলের সেটিংসের মতই।

চেকবক্স। সংরক্ষণ লগ নেটওয়ার্ক প্যানেলে সংরক্ষণ লগের মতই। পৃষ্ঠা লোড জুড়ে অনুরোধ সংরক্ষণ করে.

এই ভিডিওটি প্রথমে পৃষ্ঠা পুনরায় লোড করার সময় রিফ্রেশ করা অনুরোধগুলি দেখায়, তারপর আপনি যখন এই বিকল্পটি সক্ষম করেন তখন অব্যাহত থাকে৷

চেকবক্স। রেকর্ড নেটওয়ার্ক লগ হিসাবে একই নেটওয়ার্ক লগ রেকর্ড করুন। নেটওয়ার্ক প্যানেলে নেটওয়ার্ক লগ রেকর্ড করুন । নেটওয়ার্ক লগে অনুরোধ রেকর্ড করা শুরু বা বন্ধ করে।

নেটওয়ার্ক প্যানেলে রেকর্ড নেটওয়ার্ক লগ বোতাম।

চেকবক্স। নেটওয়ার্ক অনুরোধ ব্লকিং ব্লকের অনুরোধ সক্রিয় করুন যা নেটওয়ার্ক অনুরোধ ব্লকিং ড্রয়ারে প্যাটার্নের সাথে মেলে।

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

চেকবক্স। ক্যাশে নিষ্ক্রিয় করুন (যখন DevTools খোলা থাকে) নেটওয়ার্ক প্যানেলে ক্যাশে নিষ্ক্রিয় করার মতই। ব্রাউজার ক্যাশে নিষ্ক্রিয় করে।

অক্ষম ক্যাশে চেকবক্স.

চেকবক্স। রঙ-কোড রিসোর্স প্রকারগুলি নেটওয়ার্ক লগের জলপ্রপাত কলামে তাদের প্রকারের উপর নির্ভর করে বিভিন্ন রঙে অনুরোধগুলিকে হাইলাইট করে৷

রঙ-কোডিং ছাড়া এবং সহ নেটওয়ার্ক ট্যাবে জলপ্রপাত কলাম।

চেকবক্স। ফ্রেম দ্বারা গ্রুপ নেটওয়ার্ক লগ নেটওয়ার্ক প্যানেলে ফ্রেমের দ্বারা গ্রুপের মতই। এই বিকল্পটি ইনলাইন ফ্রেম দ্বারা শুরু করা অনুরোধগুলিকে গোষ্ঠীভুক্ত করে৷

ইনলাইন ফ্রেম দ্বারা গোষ্ঠীবদ্ধ অনুরোধ সহ নেটওয়ার্ক অনুরোধ লগ.

চেকবক্স। DevTools খোলা থাকা অবস্থায় এই সাইটে জোর করে বিজ্ঞাপন ব্লক করা পৃষ্ঠায় শনাক্ত করা বিজ্ঞাপনগুলিকে ব্লক করে।

ব্লকড রিকোয়েস্ট ফিল্টার সক্ষম করে নেটওয়ার্ক প্যানেলে দেখানো বিজ্ঞাপন-সম্পর্কিত নেটওয়ার্ক অনুরোধ।

কর্মক্ষমতা

এই বিভাগে পারফরম্যান্স প্যানেল কাস্টমাইজ করার বিকল্পগুলি তালিকাভুক্ত করা হয়েছে।

ফ্লেমচার্ট মাউস হুইল অ্যাকশন ড্রপ-ডাউন আপনি যখন শিখা চার্ট নেভিগেট করেন তখন আপনার মাউস হুইলে স্ক্রোল বা জুম অ্যাকশন নির্ধারণ করে।

ফ্লেম চার্ট মাউস হুইল অ্যাকশন: শিখা চার্টের জন্য স্ক্রোল থেকে জুম করার জন্য মাউস হুইল অ্যাকশন পরিবর্তন করা।
  • স্ক্রল করুন
  • জুম

এই উদাহরণটি পারফরম্যান্স প্যানেলে একটি শিখা চার্টে স্ক্রোল এবং জুম মাউস হুইল উভয় ক্রিয়া দেখায়।

কনসোল

এই বিভাগে কনসোল কাস্টমাইজ করা বিকল্পগুলি তালিকাভুক্ত করা হয়েছে। বেশিরভাগ বিকল্পগুলি কনসোল সেটিংসের মতই।

কনসোলে এবং সেটিংসে অনুরূপ বিকল্প।

চেকবক্স। নেটওয়ার্ক বার্তাগুলি লুকান কনসোলে নেটওয়ার্ক বার্তাগুলিকে লুকিয়ে রাখে৷

এই ভিডিওটি দেখায় কিভাবে নেটওয়ার্ক বার্তাগুলিকে এই বিকল্পের মাধ্যমে লুকিয়ে রাখতে হয় সেটিংস. সেটিংস এবং কনসোল সেটিংসে

চেকবক্স। নির্বাচিত প্রসঙ্গ শুধুমাত্র কনসোলকে শুধুমাত্র নির্বাচিত প্রসঙ্গের জন্য বার্তা প্রদর্শন করে: শীর্ষ, iframe, কর্মী, বা এক্সটেনশন।

এই ভিডিওটি দেখায় কিভাবে এই বিকল্পটি উভয় ক্ষেত্রেই সক্রিয় করতে হয় সেটিংস. সেটিংস এবং কনসোলে > সেটিংসে এবং কনসোলে প্রসঙ্গ নির্বাচন করুন।

চেকবক্স। লগ XMLHttpRequests কনসোল লগ XHR করে এবং অনুরোধ আনয়ন করে।

এই ভিডিওটি দেখায় কিভাবে এই বিকল্পটি উভয় ক্ষেত্রেই সক্রিয় করতে হয় সেটিংস. সেটিংস এবং কনসোল > সেটিংস এবং XHR finished loading বার্তাগুলি কনসোলে লগ করুন।

চেকবক্স। টাইমস্ট্যাম্প দেখান কনসোল বার্তাগুলির পাশে টাইমস্ট্যাম্প দেখায়।

কনসোলে তালিকাভুক্ত টাইমস্ট্যাম্প সহ বার্তা।

চেকবক্স। ইতিহাস থেকে স্বয়ংসম্পূর্ণ হওয়া কনসোলকে আপনার টাইপ করার সাথে সাথে আগে চালানো কমান্ডের পরামর্শ দেয়।

আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

কনসোল ইতিহাস থেকে একটি কমান্ড বিকল্প সহ স্বয়ংসম্পূর্ণ ড্রপ-ডাউন।

চেকবক্স। এন্টারে স্বয়ংসম্পূর্ণ প্রস্তাবনা গ্রহণ করলে আপনি এন্টার চাপলে কনসোল স্বয়ংসম্পূর্ণ ড্রপ-ডাউন থেকে নির্বাচিত প্রস্তাবনা গ্রহণ করে।

এই ভিডিওটি দেখায় যে আপনি এই বিকল্পটি সক্রিয় করার আগে এবং পরে এন্টার চাপলে কী ঘটে।

চেকবক্স। কনসোলে অনুরূপ বার্তাগুলিকে গোষ্ঠীভুক্ত করা কনসোলকে একই বার্তাগুলিকে একত্রিত করে।

আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

কনসোলে একই ধরনের মেসেজ একসাথে গ্রুপ করা হয়েছে।

চেকবক্স। কনসোলে CORS ত্রুটিগুলি দেখান কনসোলটি লগ করা CORS ত্রুটিগুলি দেখায়৷

আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

কনসোল CORS ত্রুটি দেখায়।

চেকবক্স। আপনি একটি কমান্ড টাইপ করার সাথে সাথে আগ্রহী মূল্যায়ন কনসোলকে একটি আউটপুটের একটি পূর্বরূপ দেখায়।

আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

এই ভিডিওটি বিভিন্ন আউটপুট পূর্বরূপ দেখায়।

চেকবক্স। কোড মূল্যায়নকে ব্যবহার করুন কারণ ব্যবহারকারীর ক্রিয়া আপনার কনসোলে চালানো যেকোনো কমান্ডকে ব্যবহারকারীর ইন্টারঅ্যাকশনে পরিণত করে।

অন্য কথায়, এটি navigator.userActivation.isActive মূল্যায়নের সময় true হিসাবে সেট করে। আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

এই ভিডিওটি এই বিকল্পটি সক্রিয় করার আগে এবং পরে navigator.userActivation.isActive এর মূল্যায়নের ফলাফল দেখায়৷

চেকবক্স। স্বয়ংক্রিয়ভাবে প্রসারিত console.trace() বার্তাগুলি কনসোল প্রদর্শনকে প্রসারিত console.trace() বার্তাগুলিকে লগ করার সময় প্রদর্শন করে৷

কনসোলে একটি প্রসারিত console.trace() বার্তা৷

চেকবক্স। নেভিগেশনে লগ সংরক্ষণ করুন কনসোল লগকে প্রতিটি নেভিগেশনের সময় বার্তা পাঠানোর Navigated to করে তোলে এবং সমস্ত পৃষ্ঠায় লগ সংরক্ষণ করে৷

আপনি কনসোল > সেটিংসে একই বিকল্প খুঁজে পেতে পারেন।

কনসোল 'নেভিগেট টু' বার্তা দেখায় এবং বিভিন্ন পৃষ্ঠায় লগ সংরক্ষণ করে।

এক্সটেনশন

এই বিভাগে Chrome DevTools এক্সটেনশনগুলির জন্য লিঙ্ক হ্যান্ডলিং কাস্টমাইজ করে এমন বিকল্পগুলি তালিকাভুক্ত করে৷

লিঙ্ক হ্যান্ডলিং: এর সাথে লিঙ্কগুলি খুলতে একটি বিকল্প নির্বাচন করা হচ্ছে।
  • অটো। ডিফল্টরূপে উৎস প্যানেলে ফাইল খোলে।
  • ইচ্ছামত বিকল্প যা একটি DevTools এক্সটেনশন দ্বারা যোগ করা যেতে পারে।

জেদ

এই বিভাগে আপনার করা পরিবর্তনগুলি কীভাবে DevTools সংরক্ষণ করে তা নিয়ন্ত্রণ করে এমন বিকল্পগুলি তালিকাভুক্ত করে৷

চেকবক্স। স্থানীয় ওভাররাইডগুলি সক্ষম করলে DevTools পৃষ্ঠা লোড জুড়ে সোর্সগুলিতে আপনার করা পরিবর্তনগুলি বজায় রাখে৷

আরও তথ্যের জন্য, স্থানীয় ওভাররাইড দেখুন।

ডিবাগার

এই বিভাগে ডিবাগার আচরণ নিয়ন্ত্রণ করে এমন বিকল্পগুলি তালিকাভুক্ত করা হয়েছে।

চেকবক্স। JavaScript নিষ্ক্রিয় করলে জাভাস্ক্রিপ্ট নিষ্ক্রিয় থাকলে আপনার ওয়েব পৃষ্ঠাটি কেমন দেখায় এবং আচরণ করে তা দেখতে দেয়।

লোড করার সময় পৃষ্ঠাটি জাভাস্ক্রিপ্টের উপর নির্ভর করে কিনা তা দেখতে পৃষ্ঠাটি পুনরায় লোড করুন।

জাভাস্ক্রিপ্ট অক্ষম করা হলে, ক্রোম সংশ্লিষ্ট দেখায় নিষ্ক্রিয় জাভাস্ক্রিপ্ট. ঠিকানা বারে আইকন এবং DevTools একটি সতর্কতা দেখায় সতর্কতা। উৎসের পাশে আইকন।

অ্যাড্রেস বারে একটি আইকন এবং DevTools-এর সোর্সের পাশে একটি সতর্কতা আইকন।

চেকবক্স। অ্যাসিঙ্ক স্ট্যাক ট্রেস অক্ষম করুন কল স্ট্যাকে অ্যাসিঙ্ক অপারেশনের "সম্পূর্ণ গল্প" লুকিয়ে রাখে।

ডিফল্টরূপে, ডিবাগার অ্যাসিঙ্ক অপারেশন ট্রেস করার চেষ্টা করে যদি আপনি যে ফ্রেমওয়ার্ক ব্যবহার করছেন তা এই ধরনের ট্রেসিং সমর্থন করে।

কল স্ট্যাকের মধ্যে অ্যাসিঙ্ক অপারেশন।

আরও তথ্যের জন্য, দেখুন অ্যাসিঙ্ক স্ট্যাক ট্রেস দেখুন।

গ্লোবাল

এই বিভাগে DevTools-এ বিশ্বব্যাপী প্রভাব রয়েছে এমন বিকল্পগুলির তালিকা রয়েছে৷

এই ভিডিওটি প্রথমে দেখায় কিভাবে একটি লিঙ্কে ক্লিক করতে হয় এবং DevTools ছাড়াই একটি নতুন ট্যাব খুলতে হয়। তারপর যখন আপনি এই বিকল্পটি সক্ষম করবেন, তখন একটি নতুন ট্যাব খুলবে * with* DevTools।

চেকবক্স। আপনি টাইপ করার সাথে সাথে সার্চ করলে আপনি আপনার সার্চ ক্যোয়ারী টাইপ করার সাথে সাথে DevToolsকে প্রথম সার্চ ফলাফলে "জাম্প" করে দেয়। অক্ষম থাকলে, আপনি Enter চাপলেই DevTools আপনাকে ফলাফলে নিয়ে যাবে।

এই ভিডিওটি প্রথমে দেখায় কিভাবে আপনি একটি অনুসন্ধান ক্যোয়ারী টাইপ করার সাথে সাথে DevTools "জাম্প" করে৷ তারপর যখন আপনি এই বিকল্পটি সক্ষম করেন, আপনি এন্টার টিপুন তখন DevTools আপনাকে প্রথম ফলাফলে নিয়ে যায়।

সুসংগত

এই বিভাগটি আপনাকে ডিভাইসগুলির মধ্যে সেটিংসের সিঙ্ক্রোনাইজেশন সেট আপ করতে দেয়৷

চেকবক্স। সেটিংস সিঙ্ক সক্ষম করুন আপনাকে একাধিক ডিভাইস জুড়ে DevTools সেটিংস সিঙ্ক করতে দেয়।

এই সেটিং ব্যবহার করতে, প্রথমে Chrome সিঙ্ক সক্ষম করুন ৷ আরও তথ্যের জন্য, সিঙ্ক সেটিংস দেখুন।