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

Kayce Basques

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

• নেটওয়ার্ক প্যানেলে স্ক্রিপ্ট উপেক্ষা করুন
• ডিভাইস মোডে জুমিং স্বয়ংক্রিয়ভাবে সামঞ্জস্য করুন
• প্রিভিউ এবং রেসপন্স ট্যাবে প্রিটি-প্রিন্টিং
• প্রিভিউ ট্যাবে HTML বিষয়বস্তুর পূর্বরূপ দেখা হচ্ছে
• এইচটিএমএল এর ভিতরে শৈলী সহ স্থানীয় ওভাররাইড

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

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

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

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

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

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

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

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

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

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

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

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

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

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

প্রিভিউ ট্যাবে HTML বিষয়বস্তুর পূর্বরূপ দেখা হচ্ছে

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

চিত্র 4 । প্রিভিউ ট্যাবে HTML প্রিভিউ করা হচ্ছে

ডিভাইস মোডে জুমিং স্বয়ংক্রিয়ভাবে সামঞ্জস্য করুন

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

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

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

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

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

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

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

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

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

চিত্র 7 । কল স্ট্যাক ফলক থেকে Vue.js স্ক্রিপ্ট উপেক্ষা করা

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

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

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

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

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

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

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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