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
- Clone repositori demo ini ke beberapa direktori di komputer Anda. Misalnya, ke
~/Desktop
. Mulai server web lokal di
~/Desktop/devtools-workspace-demo
. Berikut adalah beberapa contoh kode untuk memulaiSimpleHTTPServer
, 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
.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.
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 Sumber.
- Klik link pilih folder, lalu pilih folder.
- Klik Tambahkan folder, lalu pilih folder.
Pada perintah di bagian atas, klik Izinkan untuk memberi DevTools izin membaca dan menulis ke direktori.
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
.
Langkah 2: Simpan perubahan CSS ke disk
Buka
/devtools-workspace-demo/styles.css
di editor teks. Perhatikan bagaimana properticolor
dari elemenh1
ditetapkan kefuchsia
.Tutup editor teks.
Kembali ke DevTools, klik tab Elements.
Ubah nilai properti
color
elemen<h1>
menjadi warna favorit Anda. Untuk melakukannya:- Klik elemen
<h1>
di DOM Tree. - Di panel Gaya, temukan aturan CSS
h1 { color: fuchsia }
dan ubah warnanya menjadi warna favorit Anda. Dalam contoh ini, warna ditetapkan 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
.- Klik elemen
Buka
/devtools-workspace-demo/styles.css
di editor teks lagi. Properticolor
kini ditetapkan ke warna favorit Anda.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
- Buka tab Elements.
Klik dua kali konten teks elemen
h1
, yang bertuliskanWorkspaces Demo
, dan ganti denganI ❤️ 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: 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.
- Buka Sumber > Halaman.
- Klik (index). 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 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.
- Buka tab Elements.
- Tekan Command+Shift+P (Mac) atau Control+Shift+P (Windows, Linux, ChromeOS). Menu Perintah akan terbuka.
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 Sumber. Tab Sumber Cepat memberi Anda editor dari panel Sumber, sehingga Anda dapat mengedit file saat panel lain terbuka.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. Gayanya diatur secara rutin.Tambahkan kode berikut ke bagian bawah script.js di tab Sumber Cepat.
document.querySelector('a').style = 'font-style:italic';
Tekan Command+S (Mac) atau Control+S (Windows, Linux, ChromeOS) untuk menyimpan perubahan.
Muat ulang halaman. 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.