Koneksi Workspace otomatis di Chrome DevTools

Workspace adalah fitur canggih yang memungkinkan Anda mengedit file sumber situs secara langsung dari dalam Chrome DevTools, sehingga Anda tidak perlu terus-menerus beralih antara editor kode dan browser.

Ringkasan

Workspace di Chrome DevTools memetakan file yang ditayangkan oleh server web ke file dalam folder lokal di komputer Anda. Saat Anda mengaktifkan ruang kerja untuk project lokal, setiap perubahan yang Anda buat pada file di panel Sumber DevTools akan otomatis disimpan ke file project lokal Anda. Hal ini memberikan pengalaman pengeditan yang lancar, sehingga Anda merasa seperti sedang mengerjakan langsung codebase project sambil mendapatkan manfaat dari insight real-time DevTools.

Keuntungan koneksi ruang kerja otomatis

Koneksi ruang kerja otomatis meningkatkan penyiapan ruang kerja dengan menghilangkan konfigurasi manual. Daripada menambahkan folder project ke DevTools secara manual, server pengembangan lokal Anda dapat menyediakan file devtools.json khusus yang otomatis terdeteksi oleh Chrome DevTools. Hal ini memberikan beberapa manfaat:

  • Penelusuran bug yang lebih cepat: Edit file di DevTools dan lihat update secara instan tanpa keluar dari browser atau menyimpan secara manual.
  • Perubahan real-time: Perubahan akan segera diterapkan di file lokal dan browser Anda, sehingga meningkatkan kecepatan pengembangan.
  • Tidak ada penyiapan manual: Mengotomatiskan pemetaan file project, sehingga mengurangi waktu penyiapan, terutama untuk project baru atau saat mengaktifkan anggota tim.

Bagaimana cara kerja koneksi ruang kerja otomatis?

Koneksi ruang kerja otomatis berfungsi dengan membuat server pengembangan lokal Anda mengekspos file JSON tertentu di jalur yang telah ditentukan sebelumnya. Saat Chrome DevTools terbuka dan Anda menjelajahi situs yang ditayangkan dari localhost, Chrome DevTools akan otomatis mengirim permintaan ke:

/.well-known/appspecific/com.chrome.devtools.json

Jika server Anda merespons dengan file devtools.json yang valid, DevTools akan menggunakan informasi di dalamnya untuk terhubung secara otomatis ke folder sumber project Anda. File devtools.json biasanya berisi:

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}
  • workspace.root: Jalur absolut ke direktori root project Anda di sistem file lokal.
  • workspace.uuid: ID unik (UUID v4) untuk project Anda. Hal ini membantu DevTools membedakan berbagai project.

Setelah menerima dan memproses file ini, DevTools akan menawarkan tombol Connect di panel Sources > Workspaces.

Didesain untuk pengembangan dan proses debug lokal

Mekanisme penemuan ruang kerja otomatis melalui devtools.json dirancang khusus untuk lingkungan pengembangan lokal dan hanya berfungsi saat aplikasi Anda ditayangkan dari localhost. Chrome DevTools mengirim permintaan /.well-known/appspecific/com.chrome.devtools.json hanya dalam mode pengembangan saat Anda men-debug project lokal. Fitur ini tidak ditujukan untuk lingkungan produksi.

Memberikan izin untuk mengakses file lokal

Untuk alasan keamanan, Chrome memerlukan izin pengguna eksplisit agar situs dapat mengakses file di jaringan atau komputer lokal Anda. Saat DevTools mencoba terhubung ke project lokal Anda menggunakan devtools.json, Anda akan diminta untuk memberikan izin agar Chrome dapat mengakses direktori project Anda. Permintaan izin ini mematuhi kebijakan Akses Jaringan Lokal Chrome, yang membatasi permintaan dari jaringan publik ke tujuan lokal kecuali jika izin diberikan. Kemampuan untuk meminta izin ini terbatas pada konteks yang aman (HTTPS). Untuk pengembangan lokal, biasanya berarti localhost diperlakukan sebagai konteks yang aman.

Membuat dan menayangkan file devtools.json

Untuk project frontend umum yang berjalan di server pengembangan lokal, Anda perlu mengonfigurasi server agar merespons permintaan /.well-known/appspecific/com.chrome.devtools.json dengan konten JSON yang benar.

Berikut cara umum melakukannya:

  1. Buat UUID: Anda memerlukan UUID v4. Anda dapat membuatnya menggunakan alat online atau skrip.
  2. Tentukan root project: Dapatkan jalur absolut ke direktori root project Anda.
  3. Buat endpoint: Konfigurasi server pengembangan Anda untuk menangani permintaan GET ke /.well-known/appspecific/com.chrome.devtools.json.
  4. Menampilkan JSON: Saat endpoint ini diakses, tampilkan respons JSON dengan header Content-Type: application/json dan konten devtools.json.

Jalur workspace.root yang ditentukan dalam file devtools.json harus berupa jalur absolut ke direktori root project Anda di sistem file lokal. Artinya, jalur akan bervariasi bergantung pada sistem operasi Anda (misalnya, /Users/yourname/projects/my-app di macOS atau Linux atau C:\Users\yourname\projects\my-app di Windows) dan penyiapan project spesifik Anda. Sebaiknya tambahkan ke file yang diabaikan (misalnya, ke daftar .gitignore) untuk menghindari check in file ini untuk lingkungan produksi.

Server Anda harus membuat atau menayangkan jalur ini secara dinamis atau Anda harus mengonfigurasinya dengan benar untuk lingkungan pengembangan Anda. Pertimbangkan untuk menambahkannya ke file yang diabaikan (misalnya, ke daftar .gitignore) untuk menghindari check-in file ini untuk lingkungan produksi.

Contoh

Ada banyak cara untuk menyediakan file devtools.json, bergantung pada stack teknologi project Anda.

Node.js dan Express

Skrip ini menjalankan server Express minimal. Server ini akan memproses file JSON di /.well-known/appspecific/com.chrome.devtools.json yang berisi jalur ke projectRoot.. Jalur ini mengarah ke folder tempat server dijalankan. Sesuaikan variabel projectRoot agar mengarah dengan benar ke direktori root project Anda yang sebenarnya, bukan tempat skrip server Anda berada.

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

Menggunakan skrip devtools-json-generator

Anda dapat menggunakan generate-devtools-json untuk membuat devtools.json untuk Anda.

Untuk membuat file devtools.json di direktori saat ini, jalankan:

npx generate-devtools-json

Atau, untuk membuat file di direktori tertentu, teruskan direktori sebagai argumen:

npx generate-devtools-json /path/to/your/project

Baca selengkapnya tentang devtools-json-generator di halaman beranda project.

Integrasi

Beberapa framework frontend dan alat build menawarkan plugin atau konfigurasi untuk menyederhanakan proses ini.

Vite

Untuk project berbasis Vite (termasuk SvelteKit), vite-plugin-devtools-json adalah solusinya. Hal ini mengotomatiskan pembuatan dan penayangan file devtools.json secara langsung di dalamnya.

Untuk menggunakannya, instal plugin:

npm install -D vite-plugin-devtools-json

Kemudian, tambahkan ke vite.config.js (atau vite.config.ts):

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

Angular

Jika Anda menggunakan ng serve untuk menjalankan project Angular secara lokal (dan versi @angular/cli Anda minimal 19.0.0), Angular CLI menyediakan middleware yang secara otomatis menayangkan file devtools.json yang benar untuk Anda.

Misalnya, untuk membuat dan menjalankan aplikasi baru:

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

Saat membuka https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json, Anda dapat melihat file JSON yang dihasilkan.

Pemecahan masalah

Anda dapat mengatasi masalah umum terkait koneksi ruang kerja otomatis dengan mengikuti tips di bagian ini.

Menghapus folder dari Ruang Kerja

Jika folder project telah terhubung secara otomatis, Anda dapat menghapusnya secara manual dari setelan ruang kerja DevTools:

  • Buka Chrome DevTools.
  • Buka tab Sumber.
  • Di panel sebelah kiri, pilih sub-tab Ruang kerja.
  • Klik kanan folder project yang tidak diinginkan, lalu pilih Hapus dari Ruang Kerja.

Mengabaikan Error 404 di Server

Jika Anda tidak ingin menggunakan fitur ini untuk project tertentu dan melihat error 404 untuk permintaan /.well-known/appspecific/com.chrome.devtools.json di log server, Anda dapat mengabaikan error ini. Permintaan tidak berbahaya jika file tidak ditayangkan. Atau, Anda dapat mengonfigurasi server untuk merespons dengan status 404 untuk jalur tertentu ini tanpa mencatat error.

Cara menonaktifkan fitur ini di Chrome DevTools

Jika Anda perlu menonaktifkan fitur penemuan ruang kerja otomatis di Chrome DevTools, Anda harus menyetel tanda Chrome yang sesuai:

  • Buka Chrome, lalu buka chrome://flags.
  • Cari "Setelan Project DevTools" dan setel ke Nonaktif.
  • Anda juga dapat menemukan tanda terkait yang disebut "DevTools Automatic Workspace Folders" dan dapat menonaktifkannya juga.
  • Luncurkan kembali Chrome agar perubahan diterapkan.

Ringkasan

Dengan memahami dan memanfaatkan mekanisme devtools.json, Anda dapat meningkatkan alur kerja pengembangan lokal secara signifikan dengan Chrome DevTools.