اشکال زدایی پسوندها

افزونه‌ها می‌توانند از همان مزایای اشکال‌زدایی که Chrome DevTools برای صفحات وب فراهم می‌کند، بهره ببرند، اما ویژگی‌های رفتاری منحصر به فردی دارند. تبدیل شدن به یک اشکال‌زدای حرفه‌ای افزونه، مستلزم درک این رفتارها، نحوه‌ی عملکرد اجزای افزونه با یکدیگر و محل رفع اشکالات است. این آموزش به توسعه‌دهندگان درک اولیه‌ای از اشکال‌زدایی افزونه‌ها می‌دهد.

لاگ‌ها را پیدا کنید

افزونه‌ها از اجزای مختلفی ساخته شده‌اند و این اجزا مسئولیت‌های جداگانه‌ای دارند. برای شروع یافتن گزارش‌های خطا برای اجزای مختلف افزونه، یک افزونه‌ی خراب را از اینجا دانلود کنید.

اسکریپت پس‌زمینه

Navigate to the chrome extensions management page at chrome://extensions and ensure developer mode is on. Click the Load Unpacked button and select the broken extension directory. After the extension is loaded, it should have three buttons: Details , Remove and Errors in red letters.

برای مشاهده گزارش خطا، روی دکمه خطاها کلیک کنید. سیستم افزونه‌ها مشکلی در اسکریپت پس‌زمینه پیدا کرده است.

Uncaught TypeError: Cannot read property 'addListener' of undefined

علاوه بر این، پنل Chrome DevTools را می‌توان با انتخاب لینک آبی کنار Inspect views برای اسکریپت پس‌زمینه باز کرد.

به کد برگردید.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

The background script is attempting to listen for the onInstalled event, but the property name requires an upper case "I". Update the code to reflect the correct call, click the Clear all button in the upper right hand corner, then reload the extension.

پاپ‌آپ

حالا که افزونه به درستی راه‌اندازی شده است، می‌توان سایر اجزا را آزمایش کرد. این صفحه را رفرش کنید، یا یک تب جدید باز کنید و به هر صفحه‌ای در developer.chrome.com بروید، پنجره‌ی بازشو را باز کنید و روی مربع سبز کلیک کنید. و... هیچ اتفاقی نمی‌افتد.

به صفحه مدیریت افزونه‌ها برگردید، دکمه خطاها دوباره ظاهر شده است. برای مشاهده گزارش جدید، روی آن کلیک کنید.

Uncaught ReferenceError: tabs is not defined

خطاهای پاپ‌آپ را می‌توان با بررسی پاپ‌آپ نیز مشاهده کرد.

خطای tabs is undefined می‌گوید که افزونه نمی‌داند اسکریپت محتوا را کجا تزریق کند. این مشکل را می‌توان با فراخوانی متد tabs.query() و سپس انتخاب تب فعال برطرف کرد.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

کد را به‌روزرسانی کنید، روی دکمه‌ی «پاک کردن همه» در گوشه‌ی بالا سمت راست کلیک کنید و سپس افزونه را مجدداً بارگذاری کنید.

اسکریپت محتوا

صفحه را رفرش کنید، پنجره بازشو را باز کنید و روی کادر سبز کلیک کنید. و... نه، رنگ پس‌زمینه هنوز تغییر نکرده است! به صفحه مدیریت افزونه‌ها برگردید و... دکمه خطا وجود ندارد. احتمالاً مقصر، اسکریپت محتوا است که درون صفحه وب اجرا می‌شود.

پنل DevTools صفحه وبی که افزونه سعی در تغییر آن دارد را باز کنید.

فقط خطاهای زمان اجرا، console.warning و console.error در صفحه مدیریت افزونه‌ها ثبت خواهند شد.

برای استفاده از DevTools از داخل اسکریپت محتوا، روی فلش کشویی کنار بالا کلیک کنید و افزونه را انتخاب کنید.

خطا می‌گوید color تعریف نشده است. افزونه نباید متغیر را به درستی ارسال کند. اسکریپت تزریق شده را اصلاح کنید تا متغیر رنگ را به کد ارسال کند.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

زبانه‌های افزونه

گزارش‌های مربوط به صفحات افزونه که به صورت یک تب نمایش داده می‌شوند، مانند صفحات لغو شده و گزینه‌های تمام صفحه ، را می‌توانید در کنسول صفحه وب و در صفحه مدیریت افزونه‌ها پیدا کنید.

نظارت بر درخواست‌های شبکه

این پنجره اغلب تمام درخواست‌های شبکه مورد نیاز را قبل از اینکه حتی سریع‌ترین توسعه‌دهندگان بتوانند DevTools را باز کنند، انجام می‌دهد. برای مشاهده این درخواست‌ها، از داخل پنل شبکه، صفحه را رفرش کنید. این کار پنجره را بدون بستن پنل DevTools دوباره بارگذاری می‌کند.

اعلام مجوزها

اگرچه افزونه‌ها قابلیت‌های مشابهی با صفحات وب دارند، اما اغلب برای استفاده از ویژگی‌های خاصی مانند کوکی‌ها ، فضای ذخیره‌سازی و Cross-Origin XMLHttpRequest به مجوز نیاز دارند. برای اطمینان از اینکه یک افزونه مجوزهای صحیح را در مانیفست خود درخواست می‌کند، به مقاله مجوزها و APIهای موجود کروم مراجعه کنید.

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

مراحل بعدی

برای اطلاعات بیشتر در مورد اشکال‌زدایی افزونه‌ها، بخش توسعه و اشکال‌زدایی را مشاهده کنید. با مطالعه مستندات، درباره Chrome Devtools بیشتر بدانید.