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 Anda buat dalam DevTools ke kode sumber yang disimpan di komputer.

Perhatian: Sebelum memulai tutorial ini, Anda harus mengetahui cara:

• Gunakan HTML, CSS, dan JavaScript untuk membuat halaman web.
• Gunakan DevTools untuk membuat perubahan dasar pada CSS.
• Menjalankan server web HTTP lokal.

Ringkasan

Dengan Workspace, Anda dapat menyimpan perubahan yang dibuat di DevTools ke salinan lokal dari file yang sama di komputer Anda. Misalnya, anggaplah:

• Anda memiliki kode sumber untuk situs di desktop.
• Anda menjalankan server web lokal dari direktori kode sumber, sehingga situs dapat diakses di localhost:8080.
• Ada localhost:8080 yang terbuka di Google Chrome, dan Anda menggunakan DevTools untuk mengubah CSS situs.

Dengan ruang kerja diaktifkan, perubahan CSS yang Anda buat dalam DevTools akan disimpan ke kode sumber di desktop Anda.

Batasan

Jika Anda menggunakan framework modern, framework tersebut mungkin mengubah kode sumber dari format yang mudah dikelola menjadi format yang dioptimalkan untuk berjalan secepat mungkin. Workspace biasanya dapat memetakan kode yang dioptimalkan kembali 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 Anda membuatnya berfungsi setelah beberapa konfigurasi kustom, mulai rangkaian pesan di milis atau ajukan pertanyaan di Stack Overflow untuk membagikan pengetahuan Anda kepada komunitas DevTools lainnya.

Fitur terkait: Penggantian Lokal

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

Langkah 1: Penyiapan

Selesaikan tutorial ini untuk mendapatkan pengalaman langsung dengan ruang kerja.

Menyiapkan demo

1. Clone repositori demo ini ke beberapa direktori di komputer Anda. Misalnya, untuk ~/Desktop.

2. Mulai server web lokal di ~/Desktop/devtools-workspace-demo. Berikut adalah beberapa contoh kode 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
   

   Dalam sisa tutorial ini, direktori ini akan disebut sebagai /devtools-workspace-demo.

3. 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

1. Buka DevTools pada halaman demo yang dihosting secara lokal.

2. 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 pilih folder, lalu pilih folder.
   • Klik Tambahkan folder, lalu pilih folder.

3. Pada perintah di bagian atas, klik Allow untuk mengizinkan DevTools 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 bahwa DevTools telah membuat pemetaan antara resource jaringan halaman, dan file di devtools-workspace-demo.

Langkah 2: Simpan perubahan CSS ke disk

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

   

2. Tutup editor teks.

3. Kembali ke DevTools, klik tab Elements.

4. Ubah nilai properti color elemen <h1> menjadi warna favorit Anda. Untuk melakukannya:

   1. Klik elemen <h1> di Pohon DOM.
   2. Di panel Gaya, temukan aturan CSS h1 { color: fuchsia } dan ubah warnanya menjadi warna favorit Anda. Dalam contoh ini, warna disetel ke hijau.

   

   Titik hijau di samping styles.css:1 di panel Gaya berarti setiap perubahan yang Anda buat dipetakan ke /devtools-workspace-demo/styles.css.

5. Buka /devtools-workspace-demo/styles.css di editor teks lagi. Properti color kini ditetapkan ke warna favorit Anda.

6. Muat ulang halaman. Warna elemen <h1> masih disetel ke warna favorit Anda. Hal ini berfungsi karena saat Anda melakukan perubahan dan DevTools menyimpan perubahan ke disk. Kemudian, saat Anda memuat ulang halaman, server lokal menyajikan salinan file yang dimodifikasi dari disk.

Langkah 3: Simpan perubahan HTML ke disk

Coba ubah HTML dari panel Elemen

Peringatan: Alur kerja yang akan Anda coba tidak berfungsi. Anda mencobanya sekarang agar tidak membuang waktu nanti untuk mencari tahu penyebabnya tidak berfungsi.

1. Buka tab Elemen.

2. Klik dua kali konten teks elemen h1, yang bertuliskan Workspaces Demo, dan ganti dengan I ❤️ Cake.

   

3. Buka /devtools-workspace-demo/index.html di editor teks. Perubahan yang baru saja Anda buat tidak ada.

4. Muat ulang halaman. Halaman akan dikembalikan ke judul aslinya.

Opsional: Mengapa ini tidak berfungsi

Catatan: Bagian ini menjelaskan alasan alur kerja dari Coba ubah HTML dari panel Elemen tidak berfungsi. Anda dapat melewati bagian ini jika tidak peduli alasannya.

• Hierarki node yang Anda lihat di panel Elements 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 melalui properti content.
• Browser akhirnya menggunakan DOM untuk menentukan konten yang harus disajikan 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 tempat perubahan yang dibuat di panel Elements harus disimpan, karena DOM dipengaruhi oleh HTML, JavaScript, dan CSS.

Singkatnya, HTML !== Pohon DOM.

Mengubah HTML dari panel Sumber

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

1. Buka Sumber > Halaman.
2. Klik (indeks). HTML untuk halaman akan terbuka.
3. Ganti <h1>Workspaces Demo</h1> dengan <h1>I ❤️ Cake</h1>.
4. Tekan Command+S (Mac) atau Control+S (Windows, Linux, ChromeOS) untuk menyimpan perubahan.

5. Muat ulang halaman. Elemen <h1> masih menampilkan teks baru.

   

6. Buka /devtools-workspace-demo/index.html. Elemen <h1> berisi teks baru.

Langkah 4: Simpan perubahan JavaScript ke disk

Panel Sumber juga merupakan tempat untuk melakukan perubahan pada JavaScript. Namun, terkadang Anda perlu mengakses panel lain, seperti panel Elemen atau panel Konsol, saat membuat perubahan pada situs Anda. Ada cara untuk membuka panel Sumber bersama panel lainnya.

1. Buka tab Elements.
2. Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS). Menu Perintah akan terbuka.

3. Ketik QS, lalu pilih Tampilkan Sumber Cepat. Di bagian bawah jendela DevTools, kini ada tab Sumber Cepat.

   

   Tab ini menampilkan konten index.html, yang merupakan file terakhir yang Anda edit di panel Sources. Tab Quick Source memberi Anda editor dari panel Sources, sehingga Anda dapat mengedit file sambil membuka panel lain.

4. Tekan Command+P (Mac) atau Control+P (Windows, Linux, ChromeOS) untuk membuka dialog Open File.

5. Ketik script, lalu pilih devtools-workspace-demo/script.js.

   

6. Perhatikan link Edit and save files in a workspace dalam demo. Gayanya diatur secara rutin.

7. Tambahkan kode berikut ke bagian bawah script.js di tab Quick Source.

   document.querySelector('a').style = 'font-style:italic';
   

8. Tekan Command+S (Mac) atau Control+S (Windows, Linux, ChromeOS) untuk menyimpan perubahan.

9. Muat ulang halaman. Link pada halaman sekarang miring.

Langkah berikutnya

Berhasil: Selamat! Sekarang Anda tahu cara menyimpan perubahan yang dibuat di DevTools ke sumber, ke situs yang dihosting secara lokal.

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.