পছন্দসমূহ

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

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

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

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

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

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

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

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

চেহারা

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

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

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

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

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

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

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

সূত্র

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

উপাদান

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

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

নেটওয়ার্ক

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

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

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

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

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

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

কর্মক্ষমতা

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

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

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

কনসোল

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

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

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

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

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

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

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

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

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

এক্সটেনশন

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

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

জেদ

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

ডিবাগার

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

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

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

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

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

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

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

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

গ্লোবাল

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

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

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

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

সিঙ্ক

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