DevTools এ নতুন কি আছে (Chrome 66)

কেইস বাস্ক
Kayce Basques
X GitHub

Chrome 66-এ DevTools-এ আসা নতুন বৈশিষ্ট্য এবং বড় পরিবর্তনগুলির মধ্যে রয়েছে:

নীচের রিলিজ নোটগুলির ভিডিও সংস্করণটি পড়ুন, অথবা দেখুন।

নেটওয়ার্ক প্যানেলে স্ক্রিপ্ট উপেক্ষা করুন

নেটওয়ার্ক প্যানেলের ইনিশিয়েটার কলাম আপনাকে বলবে কেন একটি রিসোর্স অনুরোধ করা হয়েছিল। উদাহরণস্বরূপ, যদি জাভাস্ক্রিপ্টের কারণে কোনও ছবি আনা হয়, তাহলে ইনিশিয়েটার কলাম আপনাকে জাভাস্ক্রিপ্ট কোডের সেই লাইনটি দেখাবে যা অনুরোধটি করেছে।

পূর্বে, যদি আপনার ফ্রেমওয়ার্ক নেটওয়ার্ক অনুরোধগুলিকে একটি র‍্যাপারে মোড়ানো হত, তাহলে ইনিশিয়েটর কলামটি তেমন সহায়ক হত না। সমস্ত নেটওয়ার্ক অনুরোধ একই লাইনের র‍্যাপার কোডের দিকে নির্দেশ করত।

এই পরিস্থিতিতে আপনি আসলে যা চান তা হল অনুরোধের কারণ হিসেবে ব্যবহৃত অ্যাপ্লিকেশন কোডটি দেখা। এখন এটি সম্ভব:

  1. ইনিশিয়েটার কলামের উপর কার্সর রাখুন। যে কল স্ট্যাকটির কারণে অনুরোধটি করা হয়েছিল সেটি একটি পপ-আপে প্রদর্শিত হবে।
  2. ইনিশিয়েটর ফলাফল থেকে আপনি যে কলটি লুকাতে চান তাতে ডান-ক্লিক করুন।
  3. "অবজ্ঞা করার জন্য স্ক্রিপ্ট যোগ করুন" তালিকা নির্বাচন করুন। " ইনিশিয়েটার " কলামটি এখন আপনার উপেক্ষা করা স্ক্রিপ্ট থেকে যেকোনো কল লুকিয়ে রাখে।

'requests.js' উপেক্ষা করা হচ্ছে।

চিত্র ১। requests.js উপেক্ষা করা

সেটিংস এর "অবজ্ঞা তালিকা" ট্যাব থেকে আপনার উপেক্ষা করা স্ক্রিপ্টগুলি পরিচালনা করুন।

স্ক্রিপ্ট উপেক্ষা করার বিষয়ে আরও জানতে স্ক্রিপ্ট বা স্ক্রিপ্টের ধরণ উপেক্ষা করুন দেখুন।

প্রিভিউ এবং রেসপন্স ট্যাবে প্রিটি-প্রিন্টিং

নেটওয়ার্ক প্যানেলের প্রিভিউ ট্যাব এখন ডিফল্টরূপে রিসোর্সগুলিকে প্রিটি-প্রিন্ট করে যখন এটি সনাক্ত করে যে সেই রিসোর্সগুলি মিনিফাই করা হয়েছে।

প্রিভিউ ট্যাবটি ডিফল্টরূপে analytics.js-এর বিষয়বস্তু সুন্দরভাবে প্রিন্ট করে।

চিত্র ২। প্রিভিউ ট্যাবটি ডিফল্টরূপে analytics.js এর বিষয়বস্তু সুন্দরভাবে মুদ্রণ করে।

কোনও রিসোর্সের আনমিনিফায়েড ভার্সন দেখতে, রেসপন্স ট্যাবটি ব্যবহার করুন। আপনি নতুন ফর্ম্যাট বোতামের মাধ্যমে রেসপন্স ট্যাব থেকে ম্যানুয়ালি প্রিটি-প্রিন্ট রিসোর্সগুলিও করতে পারেন।

ফরম্যাট বোতামের মাধ্যমে analytics.js-এর বিষয়বস্তু ম্যানুয়ালি প্রিটি-প্রিন্ট করা।

চিত্র ৩. ফরম্যাট বোতামের মাধ্যমে analytics.js এর বিষয়বস্তু ম্যানুয়ালি প্রিটি-প্রিন্ট করা

প্রিভিউ ট্যাবে HTML কন্টেন্টের প্রিভিউ দেখা

পূর্বে, নেটওয়ার্ক প্যানেলের প্রিভিউ ট্যাবটি নির্দিষ্ট পরিস্থিতিতে HTML রিসোর্সের কোড দেখাত, অন্য পরিস্থিতিতে HTML এর প্রিভিউ রেন্ডার করত। প্রিভিউ ট্যাবটি এখন সর্বদা HTML এর একটি মৌলিক রেন্ডারিং করে। এটি একটি সম্পূর্ণ ব্রাউজার হওয়ার উদ্দেশ্যে নয়, তাই এটি আপনার প্রত্যাশা অনুযায়ী HTML ঠিকভাবে প্রদর্শন নাও করতে পারে। আপনি যদি HTML কোড দেখতে চান, তাহলে প্রতিক্রিয়া ট্যাবে ক্লিক করুন, অথবা একটি রিসোর্সে ডান-ক্লিক করুন এবং Open in Sources প্যানেল নির্বাচন করুন।

প্রিভিউ ট্যাবে HTML এর প্রিভিউ দেখা।

চিত্র ৪. প্রিভিউ ট্যাবে HTML প্রিভিউ করা

ডিভাইস মোডে জুমিং অটো-অ্যাডজাস্ট করুন

ডিভাইস মোডে থাকাকালীন, জুম ড্রপডাউনটি খুলুন এবং ডিভাইসের ওরিয়েন্টেশন পরিবর্তন করার সময় ভিউপোর্টের আকার পরিবর্তন করতে স্বয়ংক্রিয়ভাবে জুম সামঞ্জস্য করুন নির্বাচন করুন।

লোকাল ওভাররাইড এখন HTML-এ সংজ্ঞায়িত কিছু স্টাইলের সাথে কাজ করে

যখন DevTools Chrome 65 এ Local Overrides চালু করেছিল, তখন একটি সীমাবদ্ধতা ছিল যে এটি HTML এর মধ্যে সংজ্ঞায়িত স্টাইলের পরিবর্তনগুলি ট্র্যাক করতে পারেনি। উদাহরণস্বরূপ, চিত্র 7 এ ডকুমেন্টের head একটি স্টাইল নিয়ম রয়েছে যা h1 উপাদানগুলির জন্য font-weight: bold ঘোষণা করে।

HTML-এর মধ্যে সংজ্ঞায়িত শৈলীর একটি উদাহরণ

চিত্র ৫। HTML-এর মধ্যে সংজ্ঞায়িত শৈলীর একটি উদাহরণ

Chrome 65-এ, যদি আপনি DevTools Style প্যানের মাধ্যমে font-weight ঘোষণা পরিবর্তন করেন, তাহলে Local Overrides পরিবর্তনটি ট্র্যাক করবে না। অন্য কথায়, পরবর্তী রিলোডে, স্টাইলটি font-weight: bold তে ফিরে যাবে। কিন্তু Chrome 66-এ, এই ধরণের পরিবর্তনগুলি এখন পৃষ্ঠা লোড জুড়েই অব্যাহত থাকে।

বোনাস টিপ: ইভেন্ট লিসেনার ব্রেকপয়েন্টগুলিকে আরও কার্যকর করতে ফ্রেমওয়ার্ক স্ক্রিপ্টগুলি উপেক্ষা করুন

যখন আমি " Get Started With Debugging JavaScript" ভিডিওটি তৈরি করেছিলাম, তখন কিছু দর্শক মন্তব্য করেছিলেন যে ইভেন্ট লিসেনার ব্রেকপয়েন্টগুলি ফ্রেমওয়ার্কের উপরে তৈরি অ্যাপগুলির জন্য কার্যকর নয়, কারণ ইভেন্ট লিসেনাররা প্রায়শই ফ্রেমওয়ার্ক কোড দিয়ে মোড়ানো থাকে। উদাহরণস্বরূপ, চিত্র 8- এ আমি DevTools-এ একটি click ব্রেকপয়েন্ট সেট আপ করেছি। যখন আমি ডেমোতে বোতামটি ক্লিক করি, তখন DevTools স্বয়ংক্রিয়ভাবে লিসেনার কোডের প্রথম লাইনে বিরতি নেয়। এই ক্ষেত্রে, এটি 1802 লাইনে Vue.js-এর র‍্যাপার কোডে বিরতি দেয়, যা খুব একটা সহায়ক নয়।

Vue.js এর র‍্যাপার কোডে ক্লিক ব্রেকপয়েন্ট বিরতি দেয়।

চিত্র ৬। Vue.js এর র‍্যাপার কোডে click ব্রেকপয়েন্ট বিরতি নেয়।

যেহেতু Vue.js স্ক্রিপ্টটি একটি পৃথক ফাইলে আছে, তাই এই click ব্রেকপয়েন্টটিকে আরও কার্যকর করার জন্য আমি কল স্ট্যাক প্যান থেকে সেই স্ক্রিপ্টটি উপেক্ষা করতে পারি।

কল স্ট্যাক প্যান থেকে Vue.js স্ক্রিপ্ট উপেক্ষা করা।

চিত্র ৭. কল স্ট্যাক প্যান থেকে Vue.js স্ক্রিপ্ট উপেক্ষা করা

পরের বার যখন আমি বোতামটি ক্লিক করি এবং click ব্রেকপয়েন্টটি ট্রিগার করি, তখন এটি কোনও বিরতি ছাড়াই Vue.js কোডটি কার্যকর করে এবং তারপর আমার অ্যাপের লিসেনারের কোডের প্রথম লাইনে বিরতি দেয়, যেখানে আমি সত্যিই পুরোটা সময় ধরে বিরতি দিতে চেয়েছিলাম।

ক্লিক ব্রেকপয়েন্ট এখন অ্যাপের লিসেনার কোডে বিরতি দেয়।

চিত্র ৮। click ব্রেকপয়েন্ট এখন অ্যাপের লিসেনার কোডে বিরতি দেয়।

প্রিভিউ চ্যানেলগুলি ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev , অথবা Beta ব্যবহার করার কথা বিবেচনা করুন। এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

DevTools সম্পর্কিত নতুন বৈশিষ্ট্য, আপডেট বা অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন।

DevTools-এ নতুন কী আছে

DevTools সিরিজে নতুন কী কী বিষয় অন্তর্ভুক্ত করা হয়েছে তার একটি তালিকা।