Mengedit dan menyimpan file di ruang kerja

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Tutorial ini menawarkan 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.

Ringkasan

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

Dengan mengaktifkan ruang kerja, 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 berupaya mendukung kemampuan yang disediakan oleh source map 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 membuat tiruan 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 peduli dengan 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, ke ~/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

    Untuk bagian tutorial selanjutnya, direktori ini akan disebut sebagai /devtools-workspace-demo.

  3. Buka tab di Google Chrome, lalu buka versi situs yang dihosting secara lokal. Anda seharusnya dapat mengaksesnya melalui URL seperti localhost:8000. Nomor port yang tepat mungkin berbeda.

    Halaman demo yang dihosting secara lokal dibuka di Chrome.

Menyiapkan DevTools

  1. Buka DevTools di 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 Sumber.
    • Klik link pilih folder, lalu pilih folder.
    • Klik Tambahkan. Tambahkan folder, lalu pilih folder. Sumber, lalu ke tab Ruang Kerja.

  3. Pada perintah di bagian atas, klik Izinkan untuk memberi DevTools izin membaca dan menulis ke direktori.

    Tombol Izinkan di perintah.

Di tab Ruang kerja, kini 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.

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

Langkah 2: Simpan perubahan CSS ke disk

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

    Melihat styles.css di editor teks.

  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 DOM Tree.
    2. Di panel Gaya, temukan aturan CSS h1 { color: fuchsia } dan ubah warnanya menjadi warna favorit Anda. Dalam contoh ini, warna ditetapkan ke hijau.

    Menetapkan properti warna elemen h1 ke hijau.

    Titik 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. Muat ulang halaman. Warna elemen <h1> masih ditetapkan 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 Anda akan menayangkan salinan file yang diubah dari disk.

Langkah 3: Simpan perubahan HTML ke disk

Coba ubah HTML dari panel Elemen

  1. Buka tab Elements.

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

    Mencoba mengubah HTML dari Hierarki DOM di panel Elements.

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

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

Opsional: Alasan tidak berfungsi

  • 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 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 me-resolve tempat perubahan yang dibuat di panel Elements harus disimpan, karena DOM dipengaruhi oleh HTML, JavaScript, dan CSS.

Singkatnya, HTML !== Hierarki DOM.

Mengubah HTML dari panel Sumber

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

  1. Buka Sumber > Halaman.
  2. Klik (index). 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. Muat ulang halaman. Elemen <h1> masih menampilkan teks baru.

    Mengubah HTML dari panel Sumber.

  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 melakukan perubahan pada situs. 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.

    Membuka tab Sumber Cepat melalui Menu Perintah.

    Tab ini menampilkan konten index.html, yang merupakan file terakhir yang Anda edit di panel Sumber. Tab Sumber Cepat memberi Anda editor dari panel Sumber, sehingga Anda dapat mengedit file saat panel lain 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.

    Membuka skrip melalui dialog Buka File.

  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 Sumber Cepat.

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

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

  9. Muat ulang. Muat ulang halaman. Link di halaman kini dicetak miring.

Link di halaman kini 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.