Menyiapkan ruang kerja untuk menyimpan perubahan pada file sumber

Kayce Basques

Sofia Emelianova

Simpan perubahan yang Anda buat di DevTools kembali ke file sumber di komputer dengan menyiapkan ruang kerja. Anda dapat otomatis menghubungkan folder ruang kerja ke DevTools dengan menyajikan file konfigurasi, atau Anda dapat menambahkan lokasi ruang kerja secara manual di panel Sumber.

Ringkasan

Koneksi otomatis (atau manual) ke folder ruang kerja memungkinkan Anda menyimpan perubahan yang Anda buat di DevTools ke salinan lokal file yang sama di komputer Anda. Misalnya:

• Anda memiliki kode sumber untuk situs Anda di desktop.
• Anda menjalankan server web lokal dari direktori kode sumber, sehingga situs dapat diakses di localhost:PORT dan juga menyajikan file JSON sederhana dengan metadata (dijelaskan nanti).
• Anda membuka localhost:PORT di Google Chrome, dan menggunakan DevTools untuk mengubah CSS situs.

Dengan folder ruang kerja yang terhubung, perubahan yang Anda buat di panel Sources pada file CSS, HTML, dan JavaScript akan disimpan ke kode sumber di komputer Anda. Namun, DevTools tidak menyimpan perubahan pada DOM yang Anda buat di panel Elements.

Selain itu, DevTools biasanya dapat memetakan kembali kode yang dioptimalkan ke kode sumber asli Anda dengan bantuan peta sumber.

Membuat metadata untuk koneksi

Agar DevTools dapat menemukan folder ruang kerja Anda secara otomatis, buat UUID versi 4 acak dan masukkan ke dalam file JSON berikut:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Kemudian, tempatkan file JSON di path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Terakhir, jalankan server HTTP lokal Anda dan pastikan untuk menyajikan file JSON juga.

Atau, Anda dapat melewati langkah ini dan menyiapkan koneksi folder secara manual.

Menghubungkan folder ruang kerja

Catatan: Langkah ini dan langkah berikutnya menggunakan Demo Folder Workspace Otomatis untuk menampilkan fitur tersebut.

Untuk menghubungkan folder:

1. Di Chrome, buka halaman yang dihosting secara lokal (dalam contoh ini, di localhost:8000) dan buka DevTools.

2. Di Sumber > Workspace, klik Hubungkan di samping folder Anda.

   

3. Saat diminta, klik Edit file untuk mengizinkan DevTools mengakses folder Anda.

   

4. Setelah terhubung, Anda dapat membuka folder di tab Ruang kerja.

   

Tab Workspace menampilkan titik hijau di samping file HTML, CSS, dan JavaScript. Titik hijau ini berarti DevTools telah membuat pemetaan antara resource jaringan halaman dan file dalam folder.

Menyimpan perubahan kembali ke folder sumber

Anda dapat menyimpan perubahan pada file CSS, HTML, dan JavaScript apa pun di folder ruang kerja yang terhubung.

Menyimpan perubahan ke CSS

Tips: Dengan folder ruang kerja yang terhubung, panel Bantuan AI dapat otomatis menyimpan perubahan CSS ke sumber Anda.

Untuk menyimpan perubahan pada CSS:

1. Buka file CSS dari folder ruang kerja yang terhubung di Sources > Workspaces.

2. Buat perubahan pada CSS Anda.

   Catatan: Perubahan akan diterapkan ke halaman yang aktif, tetapi belum diterapkan ke sumbernya.

3. Simpan perubahan, misalnya, dengan menekan Ctrl / Cmd + S dan lihat perubahan yang diterapkan kembali di file sumber Anda. Panel Sources menampilkan titik hijau di samping nama file.

   Catatan: Anda tidak perlu memuat ulang halaman untuk menerapkan dan menyimpan perubahan CSS.

Untuk mempelajari alur kerjanya, tonton video berikut:

Menyimpan perubahan ke HTML

Untuk menyimpan perubahan ke HTML:

1. Buka file HTML dari folder ruang kerja yang terhubung di Sources > Workspaces.

2. Buat perubahan pada HTML Anda.

   Catatan: Perubahan belum diterapkan ke halaman aktif, atau ke sumber.

3. Simpan perubahan, misalnya, dengan menekan Ctrl / Cmd + S dan lihat perubahan yang diterapkan kembali di file sumber Anda. Panel Sources menampilkan titik hijau di samping nama file.

4. Muat ulang halaman untuk melihat perubahan yang diterapkan.

Untuk mempelajari alur kerjanya, tonton video berikut:

Catatan: Anda dapat menerapkan dan menyimpan perubahan HTML dari panel Sources, tetapi tidak dari panel Elements.

Mengapa Anda tidak dapat mengubah HTML dari panel Elements?

• Hierarki node yang Anda lihat di panel Elemen mewakili DOM halaman.
• Untuk menampilkan halaman, browser mengambil HTML melalui jaringan, mengurai HTML, lalu mengonversinya menjadi hierarki node DOM.
• Jika halaman memiliki JavaScript, JavaScript tersebut dapat menambahkan, menghapus, atau mengubah node DOM. CSS juga dapat mengubah DOM, dengan properti content.
• Browser pada akhirnya menggunakan DOM untuk menentukan konten yang harus ditampilkan kepada pengguna browser.
• Oleh karena itu, status akhir halaman yang dilihat pengguna mungkin sangat berbeda dengan HTML yang diambil browser.
• Hal ini menyulitkan DevTools untuk menentukan tempat penyimpanan perubahan yang dibuat di panel Elemen, karena DOM dipengaruhi oleh HTML, JavaScript, dan CSS.

Singkatnya, Hierarki DOM !== HTML.

Menyimpan perubahan pada JavaScript

Untuk menyimpan perubahan pada JavaScript:

1. Buka file JavaScript dari folder ruang kerja yang terhubung di Sources > Workspaces.

2. Buat perubahan pada JavaScript Anda.

   Catatan: Perubahan belum diterapkan ke halaman aktif, atau ke sumber.

3. Simpan perubahan, misalnya, dengan menekan Ctrl / Cmd + S dan lihat perubahan yang diterapkan kembali di file sumber Anda. Panel Sources menampilkan titik hijau di samping nama file.

4. Jika server HTTP lokal Anda memproses perubahan file sumber langsung dan memuat ulang halaman secara otomatis, Anda akan melihat perubahan diterapkan setelah menyimpannya di DevTools. Jika tidak, deploy ulang server lokal Anda.

Untuk mempelajari alur kerjanya, tonton video berikut:

Tips: Saat mengubah JavaScript, terkadang Anda perlu mengakses panel lain, seperti panel Elements atau Console. Untuk melakukannya, Anda dapat menggunakan Panel samping dan mengurutkan ulang panel.

Menghapus koneksi folder ruang kerja

Untuk menghapus koneksi folder ruang kerja, di Sources > Workspace, klik kanan folder, pilih Remove from workspace dari menu drop-down, lalu klik Remove.

Catatan: Mengubah atau menghapus UUID folder dalam file JSON metadata juga akan memutuskan koneksi folder.

Menghubungkan folder ruang kerja secara manual

1. Buka DevTools di halaman yang dihosting secara lokal.

2. Di Sources > Workspace, klik Add folder manually. Kemudian, pilih folder yang berisi file sumber Anda.

   

   Catatan: Anda juga dapat menarik folder ke panel Sources.

3. Kemudian, ikuti langkah 3 dan 4 di Menghubungkan folder ruang kerja.

Batasan

Jika Anda menggunakan framework modern, framework tersebut mungkin mengubah kode sumber Anda dari format yang mudah dikelola menjadi format yang dioptimalkan untuk berjalan secepat mungkin. Koneksi folder ruang kerja biasanya dapat memetakan kode yang dioptimalkan kembali ke kode sumber asli Anda dengan bantuan peta sumber.

Komunitas DevTools berupaya mendukung kemampuan yang disediakan oleh peta sumber di berbagai framework dan alat. Jika Anda mengalami masalah saat menggunakan ruang kerja dengan framework pilihan, atau berhasil menjalankannya setelah beberapa konfigurasi kustom, mulai rangkaian pesan di milis atau ajukan pertanyaan di Stack Overflow untuk membagikan pengetahuan Anda kepada komunitas DevTools lainnya.

Langkah berikutnya

Semua folder yang sudah disiapkan dapat Anda kelola di Setelan > Ruang kerja.

Selanjutnya, pelajari cara menggunakan DevTools untuk mengubah CSS dan men-debug JavaScript.

Lihat juga

Penggantian lokal adalah fitur DevTools lain yang agak mirip, yang memungkinkan Anda membuat tiruan konten web atau header permintaan. Dengan cara ini, Anda dapat bebas bereksperimen dengan perubahan pada halaman tanpa menunggu backend selesai. Dengan penggantian lokal, perubahan akan tetap ada di seluruh pemuatan halaman, tetapi tidak dipetakan ke kode sumber halaman Anda.