Mengedit dan menyimpan file di ruang kerja

Kayce Basques

Sofia Emelianova

Tutorial ini menawarkan kesempatan untuk berlatih dengan menyiapkan ruang kerja sehingga Anda menggunakannya dalam proyek Anda sendiri. Workspace memungkinkan Anda menyimpan perubahan yang Anda buat di DevTools ke kode sumber yang tersimpan 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

Workspace memungkinkan Anda menyimpan perubahan yang Anda buat di DevTools ke salinan lokal dari file yang sama di seperti di komputer Anda. Misalnya:

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

Dengan ruang kerja diaktifkan, perubahan CSS yang Anda buat dalam DevTools akan disimpan ke kode sumber pada {i>desktop<i} Anda.

Batasan

Jika Anda menggunakan kerangka kerja modern, kerangka kerja ini mungkin mengubah kode sumber Anda dari format yang memudahkan Anda untuk mengelola format yang dioptimalkan untuk berjalan secepat mungkin. Workspace adalah biasanya dapat memetakan kode yang dioptimalkan kembali ke kode sumber asli dengan bantuan kode sumber peta.

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 khusus, mulai rangkaian pesan di milis atau ajukan pertanyaan di Stack Overflow untuk membagikan pengetahuan Anda kepada 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 meminta header tanpa menunggu perubahan backend atau saat Anda ingin bereksperimen dengan perubahan pada halaman, dan Anda harus melihat perubahan tersebut di seluruh halaman dimuat, namun Anda tidak mementingkan pemetaan perubahan ke kode sumber laman.

Langkah 1: Penyiapan

Selesaikan tutorial ini untuk mendapatkan pengalaman langsung menggunakan 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 kode contoh untuk memulai SimpleHTTPServer, tetapi Anda dapat menggunakan server apa pun yang diinginkan.

   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 harus 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 Sumber > Workspace dan siapkan ruang kerja di folder devtools-workspace-demo yang telah 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-titik hijau ini berarti 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 bagaimana properti color dari h1 elemen 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 Styles, temukan aturan CSS h1 { color: fuchsia } dan ubah warna sesuai keinginan Anda. Dalam contoh ini, warna disetel ke hijau.

   

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

5. Buka /devtools-workspace-demo/styles.css di editor teks lagi. Properti color sekarang disetel ke favorit Anda.

6. Muat ulang halaman. Warna elemen <h1> masih disetel ke warna favorit Anda. Ini berhasil karena ketika Anda membuat perubahan dan DevTools menyimpan perubahan ke disk. Kemudian, ketika Anda memuat ulang laman, server lokal Anda menyajikan salinan file yang dimodifikasi dari {i>disk<i}.

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 Anda jangan buang-buang waktu untuk mencari tahu alasan kegagalannya.

1. Buka tab Elements.

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

   

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

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

• Hierarki node yang Anda lihat di panel Elements mewakili DOM halaman.
• Untuk menampilkan halaman, browser mengambil HTML melalui jaringan, mengurai HTML, lalu mengonversinya ke dalam pohon simpul DOM.
• Jika halaman memiliki JavaScript, JavaScript tersebut dapat menambah, menghapus, atau mengubah node DOM. CSS dapat ubah juga DOM melalui properti content.
• Browser akhirnya menggunakan DOM untuk menentukan konten yang harus disajikan kepada pengguna browser.
• Oleh karena itu, status akhir laman yang dilihat pengguna mungkin sangat berbeda dari HTML yang browser diambil.
• Hal ini mempersulit DevTools untuk menyelesaikan tempat perubahan dilakukan 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 Sumber.

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. Tapi terkadang Anda perlu mengakses panel lain, seperti panel Elements atau panel Console, saat melakukan perubahan ke situs Anda. Ada cara untuk membuka panel Sumber di samping panel lainnya.

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

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

   

   Tab ini menampilkan konten index.html, yang merupakan yang Anda edit di panel Sumber. Tab Sumber Cepat memberi Anda editor dari Sumber, sehingga Anda dapat mengedit file saat panel lainnya terbuka.

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. Diatur gayanya secara teratur.

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.