Halaman ini diterjemahkan oleh Cloud Translation API.

Mengedit dan menyimpan file di ruang kerja

Kayce Basques

Sofia Emelianova

Tutorial ini memberikan kesempatan untuk berlatih dengan menyiapkan ruang kerja sehingga Anda dapat menggunakannya dalam project Anda sendiri. Workspace memungkinkan Anda menyimpan perubahan yang dibuat dalam DevTools ke kode sumber yang tersimpan di komputer.

Ringkasan

Workspace memungkinkan Anda menyimpan perubahan yang dibuat 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:8080.
Anda telah membuka localhost:8080 di Google Chrome, dan Anda menggunakan DevTools untuk mengubah CSS situs.

Jika workspace diaktifkan, perubahan CSS yang Anda buat dalam DevTools akan disimpan ke kode sumber di desktop.

Batasan

Jika Anda menggunakan framework modern, framework ini mungkin akan mengubah kode sumber dari format yang mudah dipertahankan menjadi format yang dioptimalkan untuk berjalan secepat mungkin. Workspace biasanya dapat memetakan kembali kode yang dioptimalkan ke kode sumber asli Anda dengan bantuan peta sumber.

Komunitas DevTools bekerja untuk mendukung kemampuan yang disediakan oleh peta sumber di berbagai framework dan alat. Jika Anda mengalami masalah saat menggunakan ruang kerja dengan framework pilihan Anda, atau jika framework tersebut berfungsi setelah beberapa konfigurasi kustom, mulai thread di milis atau ajukan pertanyaan di Stack Overflow untuk berbagi pengetahuan dengan seluruh komunitas DevTools.

Fitur terkait: Penggantian Lokal

Penggantian lokal adalah fitur DevTools lain yang mirip dengan ruang kerja. Gunakan penggantian lokal untuk meniru konten web atau header permintaan tanpa menunggu perubahan backend atau saat Anda ingin bereksperimen dengan perubahan pada halaman, dan Anda perlu melihat perubahan tersebut di seluruh pemuatan halaman, tetapi Anda tidak perlu memetakan perubahan ke kode sumber halaman.

Langkah 1: Penyiapan

Selesaikan tutorial ini untuk mendapatkan pengalaman langsung dengan ruang kerja.

Menyiapkan demo

Clone repositori demo ini ke beberapa direktori di komputer Anda. Misalnya, untuk ~/Desktop.
Mulai server web lokal di ~/Desktop/devtools-workspace-demo. Berikut adalah beberapa kode contoh untuk memulai SimpleHTTPServer, tetapi Anda dapat menggunakan server apa pun yang Anda inginkan.
```
cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer
```
Untuk sisa tutorial ini, direktori ini akan disebut sebagai /devtools-workspace-demo.
Buka tab di Google Chrome dan buka versi situs yang dihosting secara lokal. Anda seharusnya dapat mengaksesnya melalui URL seperti localhost:8000. Nomor port yang tepat mungkin berbeda.

Menyiapkan DevTools

Buka DevTools di halaman demo yang dihosting secara lokal.
Buka Sources > Workspace dan siapkan ruang kerja di folder devtools-workspace-demo yang Anda clone. Anda dapat melakukannya dengan beberapa cara:
- Tarik lalu lepas folder ke Editor di Sources.
- Klik link select folder dan pilih folder.
- Klik Tambahkan folder, lalu pilih folder.
Pada perintah di bagian atas, klik Allow untuk memberi DevTools izin membaca dan menulis ke direktori.

Di tab Ruang Kerja, sekarang ada titik hijau di samping index.html, script.js, dan styles.css. Titik hijau ini berarti DevTools telah membuat pemetaan antara resource jaringan halaman, dan file dalam devtools-workspace-demo.

Tab Workspace sekarang menampilkan pemetaan antara file lokal dan file jaringan.

Langkah 2: Simpan perubahan CSS ke disk

Buka /devtools-workspace-demo/styles.css di editor teks. Perhatikan bagaimana properti color dari elemen h1 ditetapkan ke fuchsia.

$Menampilkan styles.css di editor teks.$
Tutup editor teks.
Kembali ke DevTools, klik tab Elemen.
Ubah nilai properti color dari elemen <h1> menjadi warna favorit Anda. Untuk melakukannya:
1. Klik elemen <h1> di Pohon DOM.
2. Di panel Styles, temukan aturan CSS h1 { color: fuchsia } dan ubah warnanya menjadi favorit Anda. Dalam contoh ini, warna disetel ke hijau.
Titik hijau di samping styles.css:1 di panel Styles berarti bahwa setiap perubahan yang Anda buat dipetakan ke /devtools-workspace-demo/styles.css.
Buka /devtools-workspace-demo/styles.css di editor teks lagi. Properti color kini ditetapkan ke warna favorit Anda.
Muat ulang halaman. Warna elemen <h1> masih ditetapkan ke warna favorit Anda. Ini berfungsi karena ketika Anda melakukan perubahan dan DevTools menyimpan perubahan tersebut ke disk. Kemudian, saat Anda memuat ulang halaman, server lokal menyajikan salinan file yang telah dimodifikasi dari disk.

Langkah 3: Simpan perubahan HTML ke disk

Coba ubah HTML dari panel Elemen

Buka tab Elemen.
Klik dua kali konten teks elemen h1, yang bertuliskan Workspaces Demo, dan ganti dengan I ❤️ Cake.
Buka /devtools-workspace-demo/index.html di editor teks. Perubahan yang baru saja Anda buat tidak ada.
Muat ulang halaman. Halaman akan dikembalikan ke judul aslinya.

Opsional: Mengapa ini tidak berfungsi

Hierarki node yang Anda lihat di panel Elemen mewakili DOM halaman.
Untuk menampilkan halaman, browser mengambil HTML melalui jaringan, mengurai HTML, lalu mengonversinya menjadi pohon node DOM.
Jika halaman memiliki JavaScript, JavaScript tersebut dapat menambahkan, menghapus, atau mengubah simpul DOM. CSS juga dapat mengubah DOM melalui properti content.
Browser 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 menyelesaikan di mana perubahan yang dibuat di panel Elements harus disimpan, karena DOM terpengaruh oleh HTML, JavaScript, dan CSS.

Singkatnya, DOM Tree !== HTML.

Mengubah HTML dari panel Sumber

Jika Anda ingin menyimpan perubahan pada HTML halaman, lakukan di panel Sumber.

Buka Sumber > Halaman.
Klik (indeks). HTML untuk halaman akan terbuka.
Ganti <h1>Workspaces Demo</h1> dengan <h1>I ❤️ Cake</h1>.
Tekan Command+S (Mac) atau Control+S (Windows, Linux, ChromeOS) untuk menyimpan perubahan.
Muat ulang halaman. Elemen <h1> masih menampilkan teks baru.
Buka /devtools-workspace-demo/index.html. Elemen <h1> berisi teks baru.

Langkah 4: Simpan perubahan JavaScript ke disk

Panel Sources juga merupakan tempat untuk membuat perubahan pada JavaScript. Namun, terkadang Anda perlu mengakses panel lain, seperti panel Elements atau panel Console, sambil melakukan perubahan pada situs Anda. Ada cara agar panel Sumber terbuka bersama panel lain.

Buka tab Elemen.
Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS). Command Menu akan terbuka.
Ketik QS, lalu pilih Tampilkan Sumber Cepat. Di bagian bawah jendela DevTools, kini ada tab Quick Source.

Tab ini menampilkan konten index.html, yang merupakan file terakhir yang Anda edit di panel Sources. Tab Sumber Cepat memberi Anda editor dari panel Sumber sehingga Anda dapat mengedit file sekaligus membuka panel lain.
Tekan Command+P (Mac) atau Control+P (Windows, Linux, ChromeOS) untuk membuka dialog Open File.
Ketik script, lalu pilih devtools-workspace-demo/script.js.
Perhatikan link Edit and save files in a workspace dalam demo. Sistem ini ditata secara teratur.
Tambahkan kode berikut ke bagian bawah script.js di tab Quick Source.
```
document.querySelector('a').style = 'font-style:italic';
```
Tekan Command+S (Mac) atau Control+S (Windows, Linux, ChromeOS) untuk menyimpan perubahan.
Muat ulang halaman. Link pada halaman tersebut sekarang dicetak miring.

Link pada halaman tersebut sekarang dicetak miring.

Langkah berikutnya

Anda dapat menyiapkan beberapa folder di ruang kerja. Semua folder tersebut tercantum di Setelan > Ruang kerja.

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