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

Kayce Basques

নমস্কার! Chrome 76-এ Chrome DevTools- এ নতুন কী রয়েছে তা এখানে।

CSS মান সহ স্বয়ংসম্পূর্ণ

একটি DOM নোডে শৈলী ঘোষণা যোগ করার সময় কখনও কখনও ঘোষণার নামের চেয়ে ঘোষণার মানটি মনে রাখা সহজ হয়। উদাহরণস্বরূপ, একটি <p> নোড বোল্ড করার সময়, font-weight নামের তুলনায় মান bold মনে রাখা সহজ হতে পারে। স্টাইল প্যানের স্বয়ংসম্পূর্ণ UI এখন CSS মান সমর্থন করে। আপনি যদি মনে রাখেন কোন কীওয়ার্ডের মান আপনি চান, কিন্তু সম্পত্তির নামটি মনে রাখতে না পারেন, তাহলে মানটি টাইপ করার চেষ্টা করুন এবং স্বয়ংসম্পূর্ণ আপনি যে নামটি খুঁজছেন সেটি খুঁজে পেতে সহায়তা করবে।

'বোল্ড' টাইপ করার পরে শৈলী ফলকটি 'ফন্ট-ওয়েট: বোল্ড'-এ স্বয়ংসম্পূর্ণ হয়।

চিত্র 1. bold টাইপ করার পরে শৈলী ফলকটি font-weight: bold স্বয়ংসম্পূর্ণ হয়।

Chromium সমস্যা #931145- এ এই নতুন বৈশিষ্ট্যটির বিষয়ে প্রতিক্রিয়া পাঠান।

নেটওয়ার্ক সেটিংসের জন্য একটি নতুন UI

নেটওয়ার্ক প্যানেলে পূর্বে একটি ব্যবহারযোগ্যতার সমস্যা ছিল যেখানে DevTools উইন্ডো সংকীর্ণ হলে থ্রটলিং মেনুর মতো বিকল্পগুলি পৌঁছানো যায় না। এই সমস্যাটি সমাধান করতে এবং নেটওয়ার্ক প্যানেলটিকে বিশৃঙ্খলামুক্ত করতে, নতুন নেটওয়ার্ক সেটিংসের পিছনে কয়েকটি কম-ব্যবহৃত বিকল্প সরানো হয়েছে নেটওয়ার্ক সেটিংস বোতাম ফলক

নেটওয়ার্ক সেটিংস

চিত্র 2. নেটওয়ার্ক সেটিংস।

নিম্নলিখিত বিকল্পগুলি নেটওয়ার্ক সেটিংসে স্থানান্তরিত হয়েছে: বড় অনুরোধ সারি ব্যবহার করুন , ফ্রেম অনুসারে গ্রুপ করুন , ওভারভিউ দেখান , স্ক্রিনশট ক্যাপচার করুন । চিত্র 3 পুরানো অবস্থানগুলিকে নতুনগুলির সাথে মানচিত্র করে৷

নতুনের সাথে পুরানো অবস্থানের ম্যাপিং।

চিত্র 3. পুরানো অবস্থানগুলিকে নতুনের সাথে ম্যাপ করা৷

Chromium সমস্যা #892969- এ এই UI পরিবর্তনের বিষয়ে প্রতিক্রিয়া পাঠান।

HAR রপ্তানিতে WebSocket বার্তা

আপনার সহকর্মীদের সাথে নেটওয়ার্ক লগ শেয়ার করার জন্য নেটওয়ার্ক প্যানেল থেকে একটি HAR ফাইল রপ্তানি করার সময়, আপনার HAR ফাইলে এখন WebSocket বার্তা অন্তর্ভুক্ত থাকে। _webSocketMessages বৈশিষ্ট্য একটি আন্ডারস্কোর দিয়ে শুরু হয় যে এটি একটি কাস্টম ক্ষেত্র।

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Chromium সমস্যা #496006- এ এই নতুন বৈশিষ্ট্যটির বিষয়ে প্রতিক্রিয়া পাঠান।

HAR আমদানি এবং রপ্তানি বোতাম

নতুন Export All As HAR উইথ কনটেন্ট সহ সহকর্মীদের সাথে নেটওয়ার্ক লগগুলি আরও সহজে ভাগ করুন৷ রপ্তানি এবং HAR ফাইল আমদানি করুন আমদানি বোতাম HAR আমদানি ও রপ্তানি কিছু সময়ের জন্য DevTools-এ বিদ্যমান। আরো আবিষ্কারযোগ্য বোতাম নতুন পরিবর্তন.

নতুন HAR বোতাম।

চিত্র 4. নতুন HAR বোতাম।

Chromium সমস্যা #904585- এ এই UI পরিবর্তনের বিষয়ে প্রতিক্রিয়া পাঠান।

রিয়েল-টাইম মোট মেমরি ব্যবহার

মেমরি প্যানেল এখন রিয়েল-টাইমে মোট মেমরি ব্যবহার দেখায়।

রিয়েল-টাইম মোট মেমরি ব্যবহার।

চিত্র 5. মেমরি প্যানেলের নীচে দেখায় যে পৃষ্ঠাটি মোট 43.4 MB মেমরি ব্যবহার করছে৷ 209 KB/s নির্দেশ করে যে মোট মেমরি ব্যবহার প্রতি সেকেন্ডে 209 KB বৃদ্ধি পাচ্ছে।

রিয়েল-টাইমে মেমরির ব্যবহার ট্র্যাক করার জন্য পারফরম্যান্স মনিটরও দেখুন।

Chromium সমস্যা #958177- এ এই নতুন বৈশিষ্ট্যটির বিষয়ে প্রতিক্রিয়া পাঠান।

পরিষেবা কর্মী নিবন্ধন পোর্ট নম্বর

আপনি কোন পরিষেবা কর্মীকে ডিবাগ করছেন তার ট্র্যাক রাখা সহজ করতে পরিষেবা কর্মী প্যানে এখন তার শিরোনামে পোর্ট নম্বরগুলি অন্তর্ভুক্ত করে৷

সেবা কর্মী বন্দর.

চিত্র 6. সার্ভিস ওয়ার্কার পোর্ট।

Chromium সমস্যা #601286- এ এই UI পরিবর্তনের বিষয়ে প্রতিক্রিয়া পাঠান।

ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট পরিদর্শন করুন

ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি নিরীক্ষণ করতে অ্যাপ্লিকেশন প্যানেলের নতুন পটভূমি পরিষেবা বিভাগটি ব্যবহার করুন৷ প্রদত্ত যে ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি... ভাল... ব্যাকগ্রাউন্ডে ঘটে, এটি খুব কার্যকর হবে না যদি DevTools খোলা থাকাকালীন শুধুমাত্র ব্যাকগ্রাউন্ড ফেচ এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্ট রেকর্ড করে। সুতরাং, আপনি একবার রেকর্ডিং শুরু করলে, আপনি ট্যাব বন্ধ করার পরেও, এমনকি আপনি Chrome বন্ধ করার পরেও, পটভূমি নিয়ে আসা এবং পটভূমি সিঙ্ক ইভেন্টগুলি রেকর্ড হতে থাকবে৷

অ্যাপ্লিকেশন প্যানেলে যান, ব্যাকগ্রাউন্ড ফেচ বা ব্যাকগ্রাউন্ড সিঙ্ক ট্যাব খুলুন, তারপর রেকর্ড ক্লিক করুন রেকর্ড লগিং ইভেন্ট শুরু করতে. এটি সম্পর্কে আরও তথ্য দেখতে একটি ইভেন্ট ক্লিক করুন.

ব্যাকগ্রাউন্ড ফেচ প্যান।

চিত্র 7. ব্যাকগ্রাউন্ড ফেচ প্যান। ম্যাক্সিম সালনিকভের ডেমো ।

পটভূমি সিঙ্ক ফলক।

চিত্র 8. ব্যাকগ্রাউন্ড সিঙ্ক প্যান।

Chromium সমস্যা #927726- এ এই নতুন বৈশিষ্ট্যগুলির বিষয়ে প্রতিক্রিয়া পাঠান।

ফায়ারফক্সের জন্য পুতুল

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

node example.js চালানোর পরে, ফায়ারফক্স খোলে এবং পাঠ্য page Puppeteer-এর ডকুমেন্টেশন সাইটে অনুসন্ধান বাক্সে ঢোকানো হয়। তারপর একই কাজ Chromium এ পুনরাবৃত্তি হয়।

ফায়ারফক্সের জন্য Puppeteer এবং Puppeteer সম্পর্কে আরও জানতে Google I/O 2019 থেকে জোয়েল এবং আন্দ্রেয়ের পাপেটিয়ার আলোচনা দেখুন। ফায়ারফক্স ঘোষণা প্রায় 4:05 ঘটবে।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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

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

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

,

Kayce Basques

নমস্কার! Chrome 76 এ ক্রোম ডেভটুলগুলিতে নতুন কী।

সিএসএস মানগুলির সাথে স্বয়ংক্রিয়ভাবে সম্পূর্ণ

কোনও ডোম নোডে স্টাইলের ঘোষণা যুক্ত করার সময় কখনও কখনও ঘোষণার মানটি ঘোষণার নামের চেয়ে মনে রাখা সহজ হয়। উদাহরণস্বরূপ, একটি <p> নোড সাহসী করার সময়, মান bold font-weight নামের চেয়ে মনে রাখা আরও সহজ হতে পারে। স্টাইল পেনের স্বতঃপূর্বক ইউআই এখন সিএসএস মানগুলিকে সমর্থন করে। আপনি যদি কী কীওয়ার্ডের মানটি চান তা মনে রাখেন তবে সম্পত্তির নামটি মনে রাখতে পারবেন না, তবে মানটি টাইপ করার চেষ্টা করুন এবং স্বতঃপূত্রটি আপনাকে যে নামটি খুঁজছেন তা খুঁজে পেতে আপনাকে সহায়তা করা উচিত।

'বোল্ড' টাইপ করার পরে স্টাইলগুলি 'ফন্ট-ওজন: বোল্ড' তে অটোক কমপ্লিটসকে ফলক দেয়।

চিত্র 1. bold টাইপ করার পরে স্টাইলগুলি font-weight: bold ।

ক্রোমিয়াম ইস্যুতে এই নতুন বৈশিষ্ট্যটিতে প্রতিক্রিয়া প্রেরণ করুন #931145 ।

নেটওয়ার্ক সেটিংসের জন্য একটি নতুন ইউআই

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

নেটওয়ার্ক সেটিংস

চিত্র 2. নেটওয়ার্ক সেটিংস।

নিম্নলিখিত বিকল্পগুলি নেটওয়ার্ক সেটিংসে স্থানান্তরিত হয়েছে: বড় অনুরোধ সারিগুলি ব্যবহার করুন , ফ্রেম দ্বারা গ্রুপ , ওভারভিউ দেখান , স্ক্রিনশটগুলি ক্যাপচার করুন । চিত্র 3 পুরানো অবস্থানগুলি নতুনগুলিতে মানচিত্র করে।

পুরানো অবস্থানগুলি নতুনটিতে ম্যাপিং।

চিত্র 3. নতুনটিতে পুরানো অবস্থানগুলি ম্যাপিং।

ক্রোমিয়াম ইস্যুতে এই ইউআই পরিবর্তনের বিষয়ে প্রতিক্রিয়া প্রেরণ করুন #892969 ।

এইচআর রফতানিতে ওয়েবসকেট বার্তা

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

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

ক্রোমিয়াম ইস্যুতে এই নতুন বৈশিষ্ট্যটিতে প্রতিক্রিয়া প্রেরণ করুন #496006 ।

হার আমদানি ও রফতানি বোতাম

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

নতুন হার বোতাম।

চিত্র 4. নতুন হার বোতাম।

ক্রোমিয়াম ইস্যুতে এই ইউআই পরিবর্তনের বিষয়ে প্রতিক্রিয়া প্রেরণ করুন #904585 ।

রিয়েল-টাইম মোট মেমরি ব্যবহার

মেমরি প্যানেলটি এখন রিয়েল-টাইমে মোট মেমরির ব্যবহার দেখায়।

রিয়েল-টাইম মোট মেমরি ব্যবহার।

চিত্র 5. মেমরি প্যানেলের নীচে দেখায় যে পৃষ্ঠাটি মোট 43.4 এমবি মেমরি ব্যবহার করছে। 209 কেবি/এস ইঙ্গিত দেয় যে মোট মেমরির ব্যবহার প্রতি সেকেন্ডে 209 কেবি বৃদ্ধি পাচ্ছে।

রিয়েল-টাইমে মেমরি ব্যবহারের ট্র্যাকিংয়ের জন্য পারফরম্যান্স মনিটরও দেখুন।

ক্রোমিয়াম ইস্যুতে এই নতুন বৈশিষ্ট্যটিতে প্রতিক্রিয়া প্রেরণ করুন #958177 ।

পরিষেবা কর্মী নিবন্ধকরণ পোর্ট নম্বর

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

পরিষেবা কর্মী বন্দর।

চিত্র 6. পরিষেবা কর্মী বন্দর।

ক্রোমিয়াম ইস্যুতে এই ইউআই পরিবর্তনের বিষয়ে প্রতিক্রিয়া প্রেরণ করুন #601286 ।

ব্যাকগ্রাউন্ড আনতে এবং পটভূমি সিঙ্ক ইভেন্টগুলি পরিদর্শন করুন

ব্যাকগ্রাউন্ড আনতে এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি পর্যবেক্ষণ করতে অ্যাপ্লিকেশন প্যানেলের নতুন ব্যাকগ্রাউন্ড পরিষেবাদি বিভাগটি ব্যবহার করুন। প্রদত্ত যে ব্যাকগ্রাউন্ড আনতে এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি ... ভাল ... ব্যাকগ্রাউন্ডে ঘটে, এটি খুব কার্যকর হবে না যদি ডেভটুলগুলি কেবল ব্যাকগ্রাউন্ড আনতে এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি রেকর্ড করে যখন ডিভটুলগুলি খোলা ছিল। সুতরাং, একবার আপনি রেকর্ডিং শুরু করার পরে, ব্যাকগ্রাউন্ড আনতে এবং ব্যাকগ্রাউন্ড সিঙ্ক ইভেন্টগুলি রেকর্ড করা অব্যাহত থাকবে, এমনকি আপনি ট্যাবটি বন্ধ করার পরেও এবং ক্রোম বন্ধ করার পরেও।

অ্যাপ্লিকেশন প্যানেলে যান, ব্যাকগ্রাউন্ড আনতে বা ব্যাকগ্রাউন্ড সিঙ্ক ট্যাবটি খুলুন, তারপরে রেকর্ড ক্লিক করুন রেকর্ড লগিং ইভেন্টগুলি শুরু করতে। এটি সম্পর্কে আরও তথ্য দেখতে কোনও ইভেন্টে ক্লিক করুন।

পটভূমি আনার ফলক।

চিত্র 7. ব্যাকগ্রাউন্ড আনার ফলক। ম্যাক্সিম সালনিকভ দ্বারা ডেমো ।

পটভূমি সিঙ্ক ফলক।

চিত্র 8. ব্যাকগ্রাউন্ড সিঙ্ক ফলক।

ক্রোমিয়াম ইস্যুতে এই নতুন বৈশিষ্ট্যগুলিতে প্রতিক্রিয়া প্রেরণ করুন #927726 ।

ফায়ারফক্সের জন্য কুকুরছানা

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

node example.js চালানোর পরে, ফায়ারফক্স খোলে এবং পাঠ্য page পুতুলের ডকুমেন্টেশন সাইটে অনুসন্ধান বাক্সে serted োকানো হয়। তারপরে একই কাজটি ক্রোমিয়ামে পুনরাবৃত্তি হয়।

ফায়ারফক্সের জন্য কুকুরছানা এবং পুতুলের সম্পর্কে আরও জানতে গুগল আই/ও 2019 থেকে জোয়েল এবং অ্যান্ড্রেয়ের পপ্টিয়ার টকটি দেখুন। ফায়ারফক্সের ঘোষণাটি 4:05 টার দিকে ঘটে।

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

আপনার ডিফল্ট ডেভলপমেন্ট ব্রাউজার হিসাবে ক্রোম ক্যানারি , দেব বা বিটা ব্যবহার করার বিষয়টি বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষতম ডেভটুল বৈশিষ্ট্যগুলি, টেস্ট কাটিং-এজ ওয়েব প্ল্যাটফর্ম এপিআইগুলিতে অ্যাক্সেস দেয় এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি সন্ধান করে!

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

  • Crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
  • আরও বিকল্প ব্যবহার করে একটি ডিভটুল ইস্যু রিপোর্ট করুনআরও > সহায়তা > ডিভটুলগুলিতে একটি ডিভটুলস ইস্যুগুলির প্রতিবেদন করুন ।
  • @ক্রোমডেভটুলস এ টুইট করুন।
  • ডিভটুলস ইউটিউব ভিডিও বা ডিভটুলস টিপস ইউটিউব ভিডিওগুলিতে আমাদের নতুন কী সম্পর্কে মন্তব্যগুলি ছেড়ে দিন।

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।