0Pricing
Browser Extensions Development (Chrome & Edge) · Lekcja

Debugowanie komponentów rozszerzenia

Korzystaj z Chrome and Edge Developer Tools, aby sprawnie debugować usługi service worker działające w tle, wyskakujące okna i skrypty treści.

Debugowanie komponentów rozszerzenia to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Welcome to Extension Debugging

Debugging is the process of finding and fixing errors in your code. For browser extensions, it's crucial to understand how to debug different parts, like background scripts, popups, and content scripts.

Since extensions run in unique environments, the standard web debugging techniques need a slight adjustment. We'll explore how to use Chrome and Edge Developer Tools effectively.

Opening Extension DevTools

To debug your extension, you'll primarily use the browser's Developer Tools (DevTools). The way you open them depends on which part of your extension you want to inspect.

  • Go to chrome://extensions (or edge://extensions).
  • Ensure "Developer mode" is enabled.
  • Find your extension and click "Inspect views" for background scripts or specific popups.

Inspecting Background Scripts

Background service workers are event-driven scripts that run in the background. They don't have a visible UI, so their DevTools instance is separate.

  • On the chrome://extensions page, under your extension, look for the "Inspect views" link, specifically for "service worker" or "background page."
  • Clicking this link opens a dedicated DevTools window where you can see console logs, set breakpoints, and inspect variables for your background script.

Hands-on: Background Script

Let's see a simple background script in action and how to debug it. This script just logs a message when the extension starts up.

After loading this extension, open its background service worker DevTools from chrome://extensions. You'll see "Background script loaded!" and other messages in the console.

// background.js
console.log("Background script loaded!");

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed or updated!");
});

chrome.action.onClicked.addListener((tab) => {
  console.log("Extension icon clicked!");
  // This would typically trigger a popup or other action
});

Inspecting Popups & Options

Popups and options pages are essentially regular HTML pages with their own JavaScript and CSS. This means you debug them just like any other webpage.

  • For a popup: Right-click anywhere on the popup when it's open and select "Inspect" or "Inspect Element."
  • For an options page: Open the options page (usually from the extension management page or a direct link) and then right-click and "Inspect."

This opens a standard DevTools window for that specific UI component.

Hands-on: Popup UI

Here's the JavaScript for a basic popup. When you open the popup, this script runs and logs a message. You can inspect this popup's elements and console output directly.

To debug: Click your extension icon to open the popup, then right-click on the popup and choose "Inspect". Check the Console and Elements tabs.

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Popup script loaded!');
  const button = document.getElementById('myButton');
  if (button) {
    button.addEventListener('click', () => {
      alert('Button clicked!');
      console.log('Button was clicked!');
    });
  }
});

Inspecting Content Scripts

Content scripts run in the context of a web page. This means they can interact with the page's DOM, but also that their DevTools are linked to the page itself.

  • Open the web page where your content script is injected.
  • Open the page's DevTools (usually F12 or right-click -> "Inspect").
  • In the "Sources" tab, you'll often find your content script under a special chrome-extension:// or moz-extension:// URL.

Be aware that content scripts run in an isolated world, meaning they don't directly share global variables with the page's own JavaScript.

Hands-on: Content Script

This content script changes the background color of the body and logs a message when injected into a web page. Load this as part of an extension configured to run on a specific site (e.g., *://*/*).

To debug: Navigate to a web page where your script is injected, open the page's DevTools, and check the Console. You can also find the script in the Sources tab.

// content.js
console.log("Content script injected!");

// Example: Change background color
document.body.style.backgroundColor = "lightblue";

// Example: Add a button to the page
const newButton = document.createElement("button");
newButton.textContent = "Extension Button";
newButton.style.position = "fixed";
newButton.style.bottom = "10px";
newButton.style.right = "10px";
newButton.addEventListener("click", () => {
  alert("Button from extension clicked!");
});
document.body.appendChild(newButton);

Essential Debugging Tools

Beyond just seeing errors, DevTools offer powerful features:

  • Breakpoints: Pause execution at specific lines of code to inspect variables and step through your program. Click on the line number in the "Sources" tab to set one.
  • Console API: Use console.log(), console.warn(), console.error() for quick output. Also, console.dir() for object inspection.
  • Network Tab: Monitor all network requests made by your extension or the page it interacts with.
  • Elements Tab: Inspect and modify the HTML and CSS of your popup, options page, or the web page (for content scripts).

Advanced Debugging Tips

Here are a few more tips for effective debugging:

  • Source Maps: If you're using a build tool (like Webpack or Rollup), ensure source maps are generated for easier debugging of original source code.
  • debugger; statement: Add debugger; directly in your JavaScript code to programmatically trigger a breakpoint when DevTools are open.
  • Preserve Log: In the DevTools console settings, enable "Preserve log" to prevent the console from clearing on navigation or service worker restarts.
  • Conditional Breakpoints: Right-click a breakpoint to add conditions, so it only pauses when a specific expression is true.

Debugging Component Quiz

You've learned how to access DevTools for different parts of your extension. Let's test your understanding.

Debugging Extension Recap

Great job! You've learned the essentials of debugging browser extensions.

  • Background service workers are debugged via their dedicated "Inspect views" link on chrome://extensions.
  • Popups and options pages are debugged like regular web pages: right-click and "Inspect."
  • Content scripts are debugged by opening DevTools for the web page they are injected into.
  • Utilize breakpoints, console logging, and other DevTools features to efficiently find and fix issues in your extension.

Mastering these techniques is key to building robust and error-free extensions!

Często zadawane pytania

Czy lekcja „Debugowanie komponentów rozszerzenia” jest bezpłatna?

Tak — pełny tekst „Debugowanie komponentów rozszerzenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.

Co nauczysz się w „Debugowanie komponentów rozszerzenia”?

Korzystaj z Chrome and Edge Developer Tools, aby sprawnie debugować usługi service worker działające w tle, wyskakujące okna i skrypty treści. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?

Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Debugowanie komponentów rozszerzenia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?

Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Debugowanie komponentów rozszerzenia
  2. Pisanie testów jednostkowych rozszerzeń
  3. Strategie optymalizacji wydajności
  4. Logowanie, raportowanie błędów i diagnostyka
← Powrót do Browser Extensions Development (Chrome & Edge)