Membangun Ekstensi Chrome DevTools Kustom: Meningkatkan Pengalaman Debugging Anda

1. Pendahuluan

Sebagai seorang developer web, Chrome DevTools adalah sahabat setia kita. Dari memeriksa elemen HTML, memantau permintaan jaringan, hingga menganalisis performa JavaScript, DevTools menyediakan segudang fitur untuk membantu kita membangun dan memperbaiki aplikasi. Namun, pernahkah Anda merasa ada sesuatu yang kurang? Mungkin Anda ingin melihat state aplikasi Redux atau Zustand Anda secara lebih intuitif, memodifikasi data spesifik di halaman dengan satu klik, atau bahkan mengotomatisasi serangkaian tindakan debugging yang repetitif?

Di sinilah Ekstensi Chrome DevTools Kustom berperan. Berbeda dengan ekstensi browser biasa yang berinteraksi dengan halaman web secara umum, ekstensi DevTools dirancang khusus untuk memperluas fungsionalitas panel DevTools itu sendiri. Ini membuka pintu bagi level debugging dan tooling yang lebih dalam, disesuaikan dengan kebutuhan spesifik aplikasi atau workflow Anda.

Bayangkan bisa memiliki panel DevTools yang menampilkan data dari Context API React Anda secara real-time, atau tombol yang secara otomatis mengisi formulir dengan data dummy untuk pengujian. Kemungkinan tak terbatas! Artikel ini akan memandu Anda langkah demi langkah untuk membangun ekstensi DevTools kustom pertama Anda, lengkap dengan contoh dan praktik terbaik. Mari kita selami!

2. Mengapa Membangun Ekstensi DevTools Kustom?

Sebelum kita masuk ke kode, mari kita pahami nilai tambah dari ekstensi DevTools kustom:

Debugging yang Lebih Cerdas dan Terarah: Daripada mencari-cari di console atau tab “Application” untuk state tertentu, Anda bisa membuat panel khusus yang menampilkan data relevan dari aplikasi Anda secara terstruktur.
Otomatisasi Tugas Berulang: Jika ada serangkaian langkah yang sering Anda lakukan saat debugging (misalnya, login sebagai user tertentu, mengisi form, memicu event), Anda bisa mengotomatisasinya dengan satu tombol di DevTools.
Inspeksi Data Mendalam: Memungkinkan Anda melihat data internal aplikasi (misalnya, store dari library state management, data dari Web Workers, atau bahkan data dari WebAssembly) yang mungkin tidak mudah diakses melalui API browser standar.
Peningkatan Developer Experience (DX): Tooling yang disesuaikan dapat sangat mempercepat workflow Anda dan mengurangi “friction” selama pengembangan.
Integrasi dengan Framework/Library Kustom: Jika Anda menggunakan framework internal atau library kustom, Anda bisa membuat DevTools yang memahami dan menampilkan informasi spesifik dari ekosistem Anda.

Singkatnya, ekstensi DevTools kustom memungkinkan Anda mengubah DevTools dari sekadar alat inspeksi menjadi kokpit kontrol yang kuat dan personal untuk aplikasi Anda.

3. Anatomi Ekstensi DevTools Kustom

Ekstensi DevTools adalah jenis ekstensi Chrome, jadi ia memiliki struktur dasar yang sama, namun dengan beberapa komponen tambahan. ✅

Berikut adalah bagian-bagian utamanya:

manifest.json: File konfigurasi utama ekstensi. Di sini Anda mendeklarasikan nama, versi, izin (permissions), dan yang terpenting, titik masuk untuk panel DevTools Anda (devtools_page).
devtools_page (misalnya, devtools.html): Ini adalah halaman HTML yang akan dimuat saat panel DevTools dibuka. Halaman ini tidak dapat berinteraksi langsung dengan halaman web yang sedang diinspeksi. Fungsinya adalah memuat skrip yang akan membuat panel DevTools (chrome.devtools.panels.create).
Panel Script (misalnya, panel.js): Skrip JavaScript yang berjalan di dalam panel DevTools kustom Anda. Ini adalah “otak” dari panel Anda. Dari sini, Anda bisa mengirimkan perintah ke halaman yang diinspeksi atau bahkan ke background script ekstensi.
Content Script (opsional): Skrip yang diinjeksikan langsung ke dalam konteks halaman web yang sedang diinspeksi. Ini memungkinkan Anda mengakses DOM, variabel JavaScript, dan API halaman secara langsung. Sering digunakan untuk “menjembatani” komunikasi antara panel DevTools dan aplikasi Anda.
Background Script (opsional): Skrip yang berjalan di latar belakang browser dan memiliki akses ke lebih banyak Chrome API. Berguna untuk tugas-tugas yang berjalan di seluruh sesi browser, komunikasi antar panel, atau menyimpan data.

📌 Penting: Komunikasi antara komponen-komponen ini memerlukan sedikit orkestrasi, karena mereka berjalan dalam konteks JavaScript yang terisolasi.

4. Membuat Panel DevTools Pertama Anda

Mari kita mulai dengan contoh sederhana: sebuah panel DevTools yang hanya menampilkan pesan “Halo, DevTools Kustom!”.

Struktur Proyek:

my-devtools-extension/
├── manifest.json
├── devtools.html
├── devtools.js
├── panel.html
└── panel.js

manifest.json:

{
  "manifest_version": 3,
  "name": "My Custom DevTools",
  "version": "1.0",
  "description": "Ekstensi DevTools kustom pertama saya.",
  "minimum_chrome_version": "100",
  "devtools_page": "devtools.html"
}

💡 Perhatikan devtools_page: ini menunjuk ke devtools.html.

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <title>DevTools Page</title>
    <script src="devtools.js"></script>
  </head>
  <body>
  </body>
</html>

Ini adalah halaman kosong yang tugasnya hanya memuat devtools.js.

devtools.js:

// devtools.js
chrome.devtools.panels.create(
  "My Custom Panel", // Judul panel
  "icon.png",        // (Opsional) Path ke ikon panel (tidak kita buat sekarang)
  "panel.html",      // Path ke halaman HTML panel kita
  function(panel) {
    // Callback saat panel berhasil dibuat
    console.log("Panel 'My Custom Panel' berhasil dibuat!");
  }
);

Fungsi chrome.devtools.panels.create adalah inti dari pembuatan panel.

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Panel</title>
    <style>
      body { font-family: sans-serif; padding: 20px; }
    </style>
    <script src="panel.js"></script>
  </head>
  <body>
    <h1>Selamat Datang di Panel Kustom!</h1>
    <p id="message">Memuat...</p>
  </body>
</html>

Ini adalah konten UI untuk panel DevTools kita.

panel.js:

// panel.js
document.addEventListener('DOMContentLoaded', function() {
  const messageElement = document.getElementById('message');
  messageElement.textContent = "Halo dari panel DevTools kustom!";
});

Cara Menjalankan Ekstensi:

Buka Chrome, ketik chrome://extensions di address bar.
Aktifkan “Developer mode” di pojok kanan atas.
Klik “Load unpacked”.
Pilih folder my-devtools-extension Anda.
Buka tab browser baru, lalu buka DevTools (F12). Anda akan melihat panel baru bernama “My Custom Panel” di antara panel-panel standar. Klik panel tersebut, dan Anda akan melihat pesan “Halo dari panel DevTools kustom!”.

Selamat! Anda telah membuat ekstensi DevTools pertama Anda. 🎉

5. Berinteraksi dengan Halaman yang Diinspeksi

Panel DevTools Anda jarang hanya menampilkan pesan statis. Seringkali, Anda ingin berinteraksi dengan aplikasi yang sedang di-debug. Ada dua cara utama:

5.1. Menggunakan `chrome.devtools.inspectedWindow.eval`

Ini adalah cara termudah untuk menjalankan kode JavaScript di konteks halaman yang diinspeksi langsung dari panel DevTools Anda.

Contoh: Menampilkan judul halaman di panel kustom.

Tambahkan ke panel.html:

<!-- ... di dalam <body> ... -->
<button id="getTitleBtn">Dapatkan Judul Halaman</button>
<p>Judul Halaman: <span id="pageTitle"></span></p>

Modifikasi panel.js:

// panel.js
document.addEventListener('DOMContentLoaded', function() {
  const messageElement = document.getElementById('message');
  messageElement.textContent = "Halo dari panel DevTools kustom!";

  const getTitleBtn = document.getElementById('getTitleBtn');
  const pageTitleSpan = document.getElementById('pageTitle');

  getTitleBtn.addEventListener('click', () => {
    // Mengevaluasi kode di konteks inspectedWindow
    chrome.devtools.inspectedWindow.eval(
      "document.title", // Kode JavaScript yang akan dieksekusi
      function(result, isException) {
        if (isException) {
          pageTitleSpan.textContent = "Error: " + isException.value;
        } else {
          pageTitleSpan.textContent = result;
        }
      }
    );
  });
});

✅ Sekarang, saat Anda mengklik tombol “Dapatkan Judul Halaman”, panel Anda akan menampilkan judul dari halaman yang sedang Anda buka DevTools-nya.

⚠️ Batasan eval: eval hanya dapat mengakses variabel global atau fungsi yang tersedia di window objek. Untuk mengakses variabel lokal dalam closure atau modul, Anda mungkin perlu Content Script.

5.2. Menggunakan Content Script untuk Akses Mendalam

Content script berjalan di konteks halaman web, artinya ia dapat mengakses DOM, variabel JavaScript, dan API halaman secara penuh, sama seperti skrip yang dimuat oleh halaman itu sendiri. Ia bertindak sebagai jembatan antara ekstensi DevTools dan aplikasi Anda.

Langkah-langkah:

Daftarkan Content Script di manifest.json:

{
  "manifest_version": 3,
  "name": "My Custom DevTools",
  "version": "1.0",
  "description": "Ekstensi DevTools kustom pertama saya.",
  "minimum_chrome_version": "100",
  "devtools_page": "devtools.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // Atau spesifikkan URL aplikasi Anda
      "js": ["content-script.js"]
    }
  ]
}

Buat content-script.js:

// content-script.js
console.log("Content script dimuat di halaman.");

// Contoh: Mendengarkan pesan dari ekstensi DevTools
window.addEventListener("message", (event) => {
  // Pastikan pesan berasal dari ekstensi DevTools kita
  if (event.source === window && event.data.type === "FROM_DEVTOOLS") {
    console.log("Pesan dari DevTools:", event.data.payload);
    // Lakukan sesuatu dengan payload, misalnya memodifikasi DOM
    if (event.data.payload === "highlight") {
      document.body.style.backgroundColor = "yellow";
      setTimeout(() => {
        document.body.style.backgroundColor = "";
      }, 1000);
    }
  }
});

// Contoh: Mengirim data dari halaman ke ekstensi DevTools
// Misalnya, Anda ingin mengirim state aplikasi secara berkala
setInterval(() => {
  window.postMessage({
    type: "FROM_PAGE",
    payload: {
      timestamp: Date.now(),
      // appState: window.__MY_APP_GLOBAL_STATE__ // Jika ada global state
    }
  }, "*");
}, 5000);

Modifikasi panel.js untuk Berkomunikasi dengan Content Script:

// panel.js (lanjutan)
// ... kode sebelumnya ...

const highlightBtn = document.createElement('button');
highlightBtn.textContent = "Sorot Halaman";
document.body.appendChild(highlightBtn);

highlightBtn.addEventListener('click', () => {
  // Mengirim pesan ke content script melalui inspectedWindow
  chrome.devtools.inspectedWindow.eval(`
    window.postMessage({ type: "FROM_DEVTOOLS", payload: "highlight" }, "*");
  `);
});

// Mendengarkan pesan dari content script
// Ini agak tricky karena pesan dari content script harus melewati background script
// atau Anda bisa menggunakan Message Ports untuk komunikasi langsung.
// Untuk kesederhanaan, kita akan menggunakan chrome.runtime.sendMessage
// dan background script sebagai perantara.

// Untuk demo ini, mari kita fokus pada pengiriman dari panel ke content script dulu.
// Jika perlu menerima, kita akan memerlukan background script.

⚠️ Catatan Komunikasi: Komunikasi dari content script ke panel atau background script biasanya dilakukan melalui chrome.runtime.sendMessage atau MessagePort. Karena kita belum membahas background script, contoh di atas hanya menunjukkan pengiriman dari panel ke content script. Menerima data dari content script memerlukan setup yang sedikit lebih kompleks, biasanya dengan background script sebagai perantara.

6. Contoh Kasus Nyata: Mengintip State Aplikasi React (Sederhana)

Bayangkan Anda ingin melihat nilai dari sebuah useState di komponen React Anda. Ini tidak bisa langsung diakses dengan eval karena useState bersifat lokal.

Untuk ini, kita bisa memanfaatkan Content Script untuk “memaparkan” state ke objek global window hanya di lingkungan pengembangan.

Di Aplikasi React Anda (hanya untuk pengembangan):

// src/MyComponent.jsx
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState({ name: 'User', age: 30 });

  // Memaparkan state ke window global untuk debugging DevTools
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      window.__MY_APP_DEVTOOLS__ = window.__MY_APP_DEVTOOLS__ || {};
      window.__MY_APP_DEVTOOLS__.count = count;
      window.__MY_APP_DEVTOOLS__.data = data;
    }
  }, [count, data]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <p>Name: {data.name}, Age: {data.age}</p>
    </div>
  );
}

export default MyComponent;

❌ Peringatan: Jangan pernah memaparkan data sensitif atau state aplikasi ke window di lingkungan produksi! Ini hanya untuk tujuan debugging pengembangan.

Modifikasi manifest.json dan content-script.js (seperti di bagian 5.2).

Modifikasi panel.html:

<!-- ... di dalam <body> ... -->
<h2>React State Viewer</h2>
<button id="fetchReactStateBtn">Refresh State</button>
<pre id="reactStateDisplay"></pre>

Modifikasi panel.js:

// panel.js (lanjutan)
// ... kode sebelumnya ...

const fetchReactStateBtn = document.getElementById('fetchReactStateBtn');
const reactStateDisplay = document.getElementById('reactStateDisplay');

fetchReactStateBtn.addEventListener('click', () => {
  chrome.devtools.inspectedWindow.eval(
    "JSON.stringify(window.__MY_APP_DEVTOOLS__, null, 2)",
    function(result, isException) {
      if (isException) {
        reactStateDisplay.textContent = "Error fetching state: " + isException.value;
      } else {
        reactStateDisplay.textContent = result;
      }
    }
  );
});

✅ Sekarang, saat Anda menjalankan aplikasi React di mode development, membuka DevTools, dan pergi ke panel kustom Anda, Anda bisa mengklik “Refresh State” untuk melihat count dan data dari komponen Anda! Ini adalah contoh sederhana, namun menunjukkan potensi besar untuk inspeksi state yang lebih kompleks (misalnya, seluruh store Redux atau Context).

Kesimpulan

Membangun ekstensi Chrome DevTools kustom adalah superpower tersembunyi bagi setiap developer web. Ini memungkinkan Anda untuk melampaui batasan DevTools standar dan menciptakan alat yang sangat disesuaikan dengan kebutuhan aplikasi dan workflow Anda. Dari debugging state yang kompleks, memanipulasi data di halaman, hingga mengotomatisasi tugas-tugas repetitif, kemungkinannya hampir tak terbatas.

Meskipun memerlukan sedikit pemahaman tentang arsitektur ekstensi Chrome dan komunikasi antar konteks, investasi waktu ini akan terbayar dengan peningkatan produktivitas dan pengalaman debugging yang jauh lebih efisien. Mulailah dengan proyek kecil, eksplorasi Chrome DevTools API, dan jangan ragu untuk berkreasi! DevTools Anda, aturan Anda.