DevTools ایکسٹینشن کا استعمال کرتے ہوئے کارکردگی کے آڈٹس کو AI remediation prompts میں کیسے تبدیل کیا جائے۔

کارکردگی کے ٹولز یہ دکھانے کے لیے بہترین ہیں کہ کیا سست ہے۔ آپ کہہ سکتے ہیں کہ مواد کے ساتھ زیادہ سے زیادہ پینٹ 4.2 سیکنڈ ہے، JavaScript بنڈل بہت بڑا ہے، یا اوپر والی تصویر بہت جلد لوڈ ہو رہی ہے۔

تاہم، یہ عام طور پر آپ کو درج ذیل معلومات نہیں بتاتا ہے جس کی آپ کو بطور ڈیولپر ضرورت ہے: مجھے اپنے کوڈر کو تبدیل کرنے کے لیے کیا کہنا چاہیے؟

AI کوڈنگ ایجنٹ کارکردگی کے مسائل کو حل کرنے میں مدد کر سکتے ہیں، لیکن انہیں واضح سیاق و سباق کی ضرورت ہوتی ہے۔ "اس سائٹ کو تیز تر بنائیں” ٹائپ کرنے سے اکثر آپ کو وسیع مشورہ ملے گا۔ اگر آپ ایجنٹ کو میٹرکس، متاثرہ وسائل، ممکنہ وجوہات، اور کون سی فائلوں کو پہلے چیک کرنا ہے فراہم کرتے ہیں، تو آپ کے پاس مفید پیچ ​​حاصل کرنے کا بہت بہتر موقع ہے۔

اس ٹیوٹوریل میں، براؤزر کی کارکردگی کے نتائج کو ساختی AI اصلاحی اشارے میں تبدیل کرنے کا طریقہ سیکھیں۔ آپ اپنے Chrome DevTools ایکسٹینشن میں "کاپی AI ایڈیٹ پرامپٹ” بٹن کو شامل کرنے کا طریقہ بھی سیکھیں گے۔

میں مثال کے طور پر، PerfLens، ایک Chrome DevTools ایکسٹینشن استعمال کروں گا، جسے میں نے بنایا ہے۔ تاہم، ایک ہی پیٹرن کسی بھی ٹول کے ساتھ کام کرتا ہے جو کارکردگی کا ڈیٹا اکٹھا کرسکتا ہے۔

کیا تعمیر کرنا ہے

ہم اس طرح ایک چھوٹی پائپ لائن بناتے ہیں:

Performance finding
  -> Structured issue object
  -> AI fix prompt
  -> Clipboard
  -> Coding agent
  -> Code change
  -> Re-run audit

آخر میں آپ کے پاس ہوگا:

• کوئی راستہ نہیں Finding آڈٹ کے نتائج کو ذخیرہ کرنے کی اقسام

• فوری بلڈر کی خصوصیات

• کلپ بورڈ فنکشن میں کاپی کریں۔

• جنریٹڈ پرامپٹس کاپی کرنے کے لیے DevTools پینل بٹن

• یہ چیک کرنے کا ایک آسان طریقہ کہ آیا آپ کی درستگی کام کرتی ہے۔

شرائط

پیروی کرنے کے لیے، آپ کو سمجھنے کی ضرورت ہے:

• بنیادی JavaScript یا TypeScript

• براؤزر کی توسیع کے بنیادی تصورات

• Chrome DevTools پینل اعلی سطح پر کیسے کام کرتا ہے۔

• AI کوڈنگ ایجنٹ جیسے کرسر، کلاڈ کوڈ، GitHub Copilot، یا اسی طرح کے ٹولز کا استعمال کیسے کریں۔

اس ٹیوٹوریل میں آپ کو مکمل کارکردگی کا آڈٹ انجن بنانے کی ضرورت نہیں ہے۔ توجہ کارکردگی کے ٹولز اور کوڈنگ ایجنٹوں کے درمیان ہینڈ آف پر ہے۔

انڈیکس

کارکردگی کی رپورٹوں کو کوڈ کی تبدیلیوں میں تبدیل کرنا کیوں مشکل ہے۔

کارکردگی کا سکور ایک علامت ہے۔ مثال کے طور پر، آپ کی رپورٹ یہ کہہ سکتی ہے:

Largest Contentful Paint: 4.2 seconds

وہ نمبر اہم ہیں، لیکن وہ آپ کو یہ نہیں بتاتے کہ درست کہاں ہے۔

اسباب درج ذیل ہیں۔

ڈویلپرز کو عام طور پر رپورٹس کو کوڈ لیول کے کاموں میں ترجمہ کرنے کی ضرورت ہوتی ہے۔

ترجمہ کے اس مرحلے میں وقت لگتا ہے۔ یہ وہ مرحلہ بھی ہے جہاں کوڈنگ ایجنٹ سب سے زیادہ مددگار ثابت ہو سکتا ہے اگر آپ کافی سیاق و سباق فراہم کرتے ہیں۔

اپنے ایجنٹ سے "میری سائٹ کو تیز تر بنانے” کے لیے کہنے کے بجائے، آپ توجہ مرکوز، مختصر بیان دے سکتے ہیں:

The homepage has a 258.1 KB image affecting load performance.
Inspect the hero section and image component first.
Resize or compress the image without changing the layout.
Then explain how to verify the improvement.

یہ ایک مخصوص مسئلے کی نشاندہی کرتا ہے، جس سے ایجنٹوں کے لیے کارروائی کرنا آسان ہو جاتا ہے۔

AI ترمیم کے اشارے میں کیا شامل ہونا چاہئے۔

ایک اچھا AI فکس پیغام ایک مختصر انجینئرنگ جائزہ کی طرح پڑھنا چاہیے۔

اس میں شامل ہونا چاہئے:

• کارکردگی کے مسائل

• ماپا ثبوت

• متاثرہ صفحات یا وسائل

• ممکنہ وجہ

• پہلے چیک کرنے کے لیے فائلیں یا پیٹرن

• تجویز کردہ اصلاحات

• تبدیلی پر پابندیاں

• تصدیقی اقدامات

ذیل میں ایک مثال کا اشارہ ہے:

You are helping optimize a Next.js app in a production build.

Problem: Image is 258.1 KB and may be slowing down the page.
Evidence: Image size = 258.1 KB
Page: http://localhost:3000
Affected resource: http://localhost:3000/_next/image?url=%2Fhome%2Four_story.webp&w=3840&q=75

Likely cause:
The page is loading an image that is larger than needed for its rendered size.

Inspect first:
- app/page.tsx or pages/index.tsx
- components/**/*.{tsx,jsx}
- next.config.js
- the hero section or image component

Recommended fix:
Resize or compress the image, use an appropriate modern format, and keep explicit width and height values so the layout does not shift.

Constraints:
- Keep the change local to the route or component causing the issue.
- Do not add a new dependency unless there is no reasonable alternative.
- Explain the change before applying it.

After the change:
- Re-run the performance audit.
- Confirm the image transfer size is lower.
- Confirm the layout still looks correct.

یہ پیغام مخصوص ہے۔ یہ ایجنٹوں کو بتاتا ہے کہ کیا ہوا، کہاں دیکھنا ہے، کیا تبدیل کرنا ہے، اور نتائج کو کیسے چیک کرنا ہے۔

یہ AI پیچ بریفنگ کا بنیادی خیال ہے۔

یہ ہے کہ PerfLens کا اندرونی حصہ کیسا لگتا ہے: ایک واحد کارکردگی کا نتیجہ ایک AI پیچ کے جائزہ میں پیش کیا جاتا ہے جو پیمائش شدہ اقدار، متاثرہ وسائل، اور پیدا کردہ اشارے کو ایک جگہ پر جمع کرتا ہے۔ پھر ایک کلک کے ساتھ اپنے کوڈنگ ایجنٹ کو پورا جائزہ فراہم کرنے کے لیے "Copy AI Edit Prompt” بٹن پر کلک کریں۔

کارکردگی کے سروے کے نتائج کو سٹرکچرڈ ڈیٹا کے طور پر کیسے اسٹور کیا جائے۔

پرامپٹ بنانے سے پہلے، آپ کو کارکردگی کے مسئلے کو ڈیٹا کے طور پر محفوظ کرنا چاہیے۔

یہاں ایک سادہ TypeScript قسم ہے:

type Finding = {
  id: string;
  title: string;
  metric: string;
  measured: string;
  budget?: string;
  resource?: string;
  likelyCause: string;
  recommendedFix: string;
  inspectFirst: string[];
  severity: "low" | "medium" | "high";
};

ہر شعبے کا ایک کام ہے۔

• id مسئلہ کی قسم کی شناخت کریں۔

• title انسانی پڑھنے کے قابل خلاصہ فراہم کرتا ہے۔

• metric پیمائش کا نام بتائیں۔

• measured اصل قیمت ذخیرہ کرتا ہے۔

• budget اگر آپ کے پاس ٹارگٹ ویلیو ہے تو اسے محفوظ کریں۔

• resource متاثرہ یو آر ایل، فائل یا اثاثہ محفوظ کریں۔

• likelyCause یہ بتاتا ہے کہ مسئلہ کیوں پیدا ہوتا ہے۔

• recommendedFix ایجنٹوں کو ہدایت فراہم کرتا ہے۔

• inspectFirst ایجنٹ ممکنہ فائل کی طرف اشارہ کرتا ہے۔

• severity اس سے آپ کو یہ فیصلہ کرنے میں مدد ملے گی کہ پہلے کیا دکھانا ہے۔

یہاں ایک بڑی تصویر تلاش کرنے کی ایک مثال ہے:

const finding: Finding = {
  id: "image-weight",
  title: "Image is 258.1 KB and may be slowing down the page",
  metric: "Image size",
  measured: "258.1 KB",
  resource: "http://localhost:3000/_next/image?url=%2Fhome%2Four_story.webp&w=3840&q=75",
  likelyCause:
    "The page is loading an image that is larger than needed for its rendered size.",
  recommendedFix:
    "Resize or compress the image, use an appropriate modern format, and keep explicit width and height values.",
  inspectFirst: [
    "app/page.tsx or pages/index.tsx",
    "components/**/*.{tsx,jsx}",
    "next.config.js",
    "the hero section or image component",
  ],
  severity: "high",
};

اس مرحلے پر ہم ابھی تک AI کے ساتھ کچھ نہیں کر رہے ہیں۔ یہ صرف کارکردگی کے نتیجے کو صاف آبجیکٹ میں تبدیل کرنا ہے۔

وہ اعتراض کچھ مستحکم فراہم کرتا ہے جسے بعد میں فوری طور پر تبدیل کیا جاسکتا ہے۔

سب سے اہم نتائج کا انتخاب کیسے کریں۔

ایک ساتھ ایجنٹ کو کارکردگی کے 10 غیر متعلقہ مسائل نہ بھیجیں۔

بہت سے مسائل کے ساتھ ایک بڑا اشارہ ایک بڑے پیچ کا باعث بن سکتا ہے۔ اس سے نتائج کا جائزہ لینا زیادہ مشکل ہو جاتا ہے۔

ایک بہتر طریقہ یہ ہے کہ فی نتیجہ ایک پرامپٹ بنایا جائے۔

آپ ایک سادہ سیوریٹی سکور کے ساتھ شروع کر سکتے ہیں۔

function scoreFinding(finding: Finding): number {
  const severityWeight = {
    low: 1,
    medium: 2,
    high: 3,
  };

  return severityWeight[finding.severity];
}

اس کے بعد آپ نتائج کو سکور کے حساب سے ترتیب دے سکتے ہیں۔

function sortFindings(findings: Finding[]): Finding[] {
  return [...findings].sort(
    (a, b) => scoreFinding(b) - scoreFinding(a)
  );
}

یہ ایک سادہ ورژن ہے، لیکن یہ آپ کو شروع کرنے کے لیے کافی ہے۔

آپ بعد میں غور کر کے اپنے سکور کو بہتر بنا سکتے ہیں:

• میٹرک بجٹ سے کتنا بڑھ گیا۔

• کیا مسئلہ مواد کے ساتھ زیادہ سے زیادہ پینٹ کو متاثر کرتا ہے؟

• کیا مسئلہ ترتیب میں تبدیلیوں یا تعامل میں تاخیر کو متاثر کرتا ہے؟

• آیا متاثرہ وسیلہ پہلے صفحہ کے لوڈ کا حصہ ہے۔

• آپ تجویز کردہ اصلاحات کے بارے میں کتنے پر اعتماد ہیں؟

مقصد ایک بہترین درجہ بندی کا نظام بنانا نہیں ہے۔ مقصد ایک وقت میں ایک اہم مسئلے پر توجہ مرکوز کرنے میں آپ کی مدد کرنا ہے۔

AI ایڈیٹ پرامپٹ کیسے لکھیں۔

ایک بار آپ Findingپرامپٹ بنانا سٹرنگ فارمیٹنگ کا کام بن جاتا ہے۔

اس کے لیے صفحہ کے سیاق و سباق کی ایک چھوٹی سی مقدار بھی درکار ہے۔

type PageContext = {
  framework: string;
  mode: string;
  pageUrl: string;
};

صفحہ کا سیاق و سباق اس صفحہ کے بارے میں کچھ حقیقت ہے جس سے نتیجہ آیا ہے۔ یعنی، ایپ کون سا فریم ورک استعمال کرتی ہے، چاہے یہ ڈیولپمنٹ ہے یا پروڈکشن کی تعمیر، اور کون سے یو آر ایل کا آڈٹ کیا جا رہا ہے۔

نتائج ایجنٹ کو مطلع کر دیے جاتے ہیں۔ کیا یہ سست ہے۔ صفحہ کا سیاق و سباق آپ کو یہ بتاتا ہے۔ کہاں فکس زمینیں اور کس طرح آپ کا کوڈ بنایا گیا ہے۔ یہ ضروری ہے کیونکہ ایک ہی مسئلہ مختلف اسٹیکوں میں مختلف طریقے سے حل ہوتا ہے۔ بڑی تصاویر پر اس کے ذریعے کارروائی کی جاتی ہے: next/image اور next.config.js یہ Next.js میں ممکن ہے، لیکن دوسری جگہوں پر مختلف فائلوں اور قواعد کے ذریعے۔ کہ mode فیلڈ اس بات کا بھی اشارہ کرتا ہے کہ آیا پیداوار کی اصلاح پہلے سے موجود ہونی چاہیے۔

ایجنٹوں کو یہ معلومات پہلے سے فراہم کرنے سے وہ سیٹنگز کا اندازہ لگانے میں کم محنت اور حقیقی تبدیلیوں کے لیے زیادہ کوششیں کر سکتے ہیں۔

اس کے بعد آپ فوری بلڈر بنا سکتے ہیں۔

function buildFixPrompt(finding: Finding, ctx: PageContext): string {
  const lines = [
    "You are helping optimize a " + ctx.framework + " app in a " + ctx.mode + " build.",
    "",
    "Problem: " + finding.title,
    "Evidence: " + finding.metric + " = " + finding.measured +
      (finding.budget ? " (budget: " + finding.budget + ")" : ""),
    "Page: " + ctx.pageUrl,
  ];

  if (finding.resource) {
    lines.push("Affected resource: " + finding.resource);
  }

  lines.push(
    "",
    "Likely cause:",
    finding.likelyCause,
    "",
    "Inspect first:",
    ...finding.inspectFirst.map((file) => "- " + file),
    "",
    "Recommended fix:",
    finding.recommendedFix,
    "",
    "Constraints:",
    "- Keep the change local to the route or component causing the measured cost.",
    "- Do not add new dependencies unless there is no reasonable alternative.",
    "- Explain the change before applying it.",
    "",
    "After the change:",
    "- Re-run the performance audit.",
    "- Confirm the measured issue improved.",
    "- Check that the UI still works correctly.",
  );

  return lines.join("n");
}

آپ اسے اس طرح کہہ سکتے ہیں:

const pageContext: PageContext = {
  framework: "Next.js",
  mode: "production",
  pageUrl: "http://localhost:3000",
};

const prompt = buildFixPrompt(finding, pageContext);

آؤٹ پٹ ایک پرامپٹ ہے جسے آپ اپنے کوڈنگ ایجنٹ میں چسپاں کر سکتے ہیں۔

کہ framework فیلڈز خاص طور پر مفید ہیں۔ اگر ایجنٹ جانتا ہے کہ آپ کی ایپ Next.js استعمال کرتی ہے، تو وہ اس طرح کی فائلیں تلاش کر سکتا ہے: app/page.tsx، pages/index.tsx، next.config.jsاور تصاویر کے استعمال کے ذریعے۔ next/image.

کلپ بورڈ پر پرامپٹ کاپی کرنے کا طریقہ

سب سے محفوظ انضمام کلپ بورڈ-پہلا ہے۔

بہت سے کوڈنگ ایجنٹس اور ایڈیٹرز مختلف اسٹارٹ اپ طریقوں کی حمایت کرتے ہیں۔ کچھ گہرے ربط کی حمایت کرتے ہیں۔ کچھ ٹرمینل میں چلتے ہیں۔ کچھ ایڈیٹر کے اندر رہتے ہیں۔ تاہم، تمام ایجنٹ چسپاں متن کو قبول کر سکتے ہیں۔

یہاں ایک چھوٹا سا کاپی فنکشن ہے:

async function copyPrompt(prompt: string): Promise {
  await navigator.clipboard.writeText(prompt);
}

براؤزر ایکسٹینشن UI میں، صارف کے اعمال جیسے بٹن کال پر کلک کرنا:

copyButton.addEventListener("click", async () => {
  const prompt = buildFixPrompt(finding, pageContext);

  await copyPrompt(prompt);

  copyButton.textContent = "Prompt copied";
});

آپ پرامپٹ کو کاپی کرنے اور اسے ایڈیٹر میں کھولنے کی بھی کوشش کر سکتے ہیں۔

type AgentTarget = "cursor" | "vscode" | "copy-only";

async function sendToAgent(
  prompt: string,
  target: AgentTarget
): Promise {
  await navigator.clipboard.writeText(prompt);

  if (target === "cursor") {
    window.location.href = "https://www.freecodecamp.org/news/how-to-turn-performance-audits-into-ai-fix-prompts-with-a-devtools-extension/cursor://";
    return;
  }

  if (target === "vscode") {
    window.location.href = "vscode://";
    return;
  }
}

یہ پرامپٹس کو ایجنٹ میں خود بخود چسپاں ہونے سے روک دے گا۔ صرف پرامپٹ کو کاپی کرتا ہے اور منتخب ٹول کو کھولنے کی کوشش کرتا ہے۔

یہ ایک مفید حد ہے۔ آپ اپنے ورک فلو کو قابل قیاس رکھ سکتے ہیں اور پیغامات بھیجنے سے پہلے ان کا جائزہ لے سکتے ہیں۔

آپ اسے کروم ایکسٹینشن کے طور پر ڈیو ٹولز پینل میں ظاہر کرنے کے لیے بنا سکتے ہیں۔

پہلے، DevTools صفحہ کھولیں۔ manifest.json فائل:

{
  "manifest_version": 3,
  "name": "PerfLens",
  "version": "1.0.0",
  "devtools_page": "devtools.html",
  "permissions": ["clipboardWrite", "activeTab", "scripting"]
}

پھر اپنے DevTools اسکرپٹ میں پینل بنائیں۔

chrome.devtools.panels.create(
  "PerfLens",
  "icons/icon-32.png",
  "panel.html"
);

ہر نتیجہ کو پیش کرنے کے لیے پینل کے اندر موجود بٹنوں کا استعمال کریں۔

function renderFinding(
  finding: Finding,
  ctx: PageContext
): HTMLElement {
  const item = document.createElement("article");
  const title = document.createElement("h3");
  const button = document.createElement("button");

  title.textContent = finding.title;
  button.textContent = "Copy AI fix prompt";

  button.addEventListener("click", async () => {
    const prompt = buildFixPrompt(finding, ctx);

    await sendToAgent(prompt, "copy-only");

    button.textContent = "Prompt copied";
  });

  item.append(title, button);

  return item;
}

اہم حصہ بٹن ہینڈلر ہے۔

جب آپ بٹن پر کلک کرتے ہیں تو توسیع کی خصوصیات:

1. کارکردگی کے نتائج سے اشارے بنائیں۔

2. پرامپٹ کو کلپ بورڈ پر کاپی کریں۔

3. تاثرات فراہم کرتا ہے کہ پرامپٹ کاپی کر دیا گیا ہے۔

اس کے بعد آپ اپنے کوڈنگ ایجنٹ میں پرامپٹ کو چسپاں کر سکتے ہیں اور تجویز کردہ پیچ کا جائزہ لے سکتے ہیں۔

ترمیم کی جانچ کیسے کریں۔

AI سے تیار کردہ پیچ صرف اس صورت میں مفید ہیں جب وہ آپ کے میٹرکس کو بہتر بنائیں۔

ایجنٹ کی تبدیلی کی تجویز کے بعد، آپ کو:

1. کوڈ کے فرق کا جائزہ لیں۔

2. ایپ کو مقامی طور پر چلائیں۔

3. براہ کرم صفحہ دوبارہ لوڈ کریں۔

4. کارکردگی کا آڈٹ دوبارہ چلائیں۔

5. نئی پیمائشوں کا اصل پیمائش سے موازنہ کریں۔

تصویر کی مثال کے لیے، درج ذیل کو چیک کریں:

• کیا تصویر کی منتقلی کا سائز کم ہو گیا ہے؟

• کیا تصویر اب بھی کافی تیز نظر آتی ہے؟

• کیا صفحہ کی ترتیب مستحکم ہے؟

• کیا مواد کے ساتھ زیادہ سے زیادہ پینٹ میں بہتری آئی ہے؟

• کیا تبدیلیوں نے دوسرے راستوں کو متاثر کیا؟

یہ ایک سادہ لوپ بناتا ہے۔

Measure -> Prompt -> Patch -> Measure again

ایجنٹ کے جوابات کو حتمی اختیار نہیں سمجھا جانا چاہیے۔ براؤزر کی پیمائش حتمی اتھارٹی ہے۔

یہ لائٹ ہاؤس کے ساتھ کیسے فٹ بیٹھتا ہے؟

لائٹ ہاؤس اب بھی کارآمد ہیں۔ تفصیلی لیبارٹری آڈٹ اور مستقل اسکور فراہم کرتا ہے۔ یہ ورک فلو ایک اور مسئلہ حل کرتا ہے۔

لائٹ ہاؤس جواب فراہم کرتا ہے:

How does this page perform under controlled conditions?

AI پیچ کا جائزہ درج ذیل سوالات کے جوابات دینے میں آپ کی مدد کرے گا۔

What should I ask my coding agent to fix right now?

آپ دونوں استعمال کر سکتے ہیں۔

گریڈنگ، ریگریشن ٹریکنگ، اور گہری آڈیٹنگ کے لیے لائٹ ہاؤس کا استعمال کریں۔ مخصوص نتائج سے تیزی سے کوڈ کی تبدیلیوں کی طرف جانے کے لیے AI سے اشارہ کیے گئے ورک فلوز کا استعمال کریں۔

رازداری پر نوٹ کریں۔

AI ترمیم کے اشارے میں URL، وسائل کا نام، راستہ، فائل کا نام، اور نفاذ کی تفصیلات شامل ہوسکتی ہیں۔

اپنے کلاؤڈ بیسڈ کوڈنگ ایجنٹ میں پرامپٹ کو چسپاں کرنے سے پہلے، یقینی بنائیں کہ اس میں یہ شامل نہیں ہے:

پرامپٹس کو کارکردگی کے مسائل پر مرکوز رکھیں۔ ایجنٹوں کو ان کی مدد کے لیے کافی سیاق و سباق دیں، لیکن ان کی ضرورت سے زیادہ نہیں۔

نتیجہ

اس ٹیوٹوریل میں، آپ نے سیکھا کہ کارکردگی کے آڈٹ کے نتائج کو AI remediation prompts میں کیسے تبدیل کیا جائے۔

آپ نے کیا بنایا:

• ساختہ Finding زمرہ

• دریافتوں کی درجہ بندی کیسے کریں۔

• کوئی راستہ نہیں buildFixPrompt فنکشن

• کلپ بورڈ – پہلے ایجنٹ کی ترسیل

• DevTools پینل کے بٹن

• نتائج چیک کرنے کے لیے تصدیقی لوپ

مرکزی خیال سادہ ہے۔ کارکردگی کے اوزار ثبوت پیدا کرتے ہیں، اور کوڈنگ ایجنٹوں کو سیاق و سباق کی ضرورت ہوتی ہے۔ ایک اچھا AI پیچ کا جائزہ دونوں کو جوڑتا ہے۔

PerfLens اس ورک فلو کی ایک مثال ہے۔ اگر آپ ایکسٹینشن کو آزمانا چاہتے ہیں یا اس بہاؤ کو لاگو کرنے کا طریقہ دیکھنا چاہتے ہیں تو آپ اسے یہاں تلاش کر سکتے ہیں۔