Pembaruan di DevTools Chrome Canary 118

Pembaruan dari DevTools Chrome merupakan informasi perubahan-perubahan baru, fitur tambahan, perbaikan dan peningkatan kinerja dari tim development Google untuk membantu developer web memahami dan memanfaatkan perubahan dalam pekerjaan mereka.

Pada versi 118, DevTools Chrome membawa sejumlah fitur baru dan perbaikan yang dapat memudahkan developer web menjadi lebih efisien dan informatif. Mari kita eksplorasi bersama apa yang baru dalam DevTools Chrome 118 dan bagaimana hal tersebut dapat meningkatkan produktivitas developer web.

1. Properti Khusus pada Elements > Styles

Fitur ini adalah tambahan terbaru dalam perlengkapan alat pengembangan web Chrome untuk membantu developer dalam mengelola properti khusus di CSS. Adapun caranya hanya perlu membuka panel Elements (klik kanan pada mouse pilih Inspect) atau bisa menggunakan shortcut pada keyboard Ctrl+Shift+i (windows), Cmd+Option+i (macOS).

Kemudian, pilih tab Styles. Pada versi Chrome 118 terdapat bagian baru yang disebut “Custom Property” atau pada collapse @property di bawah daftar properti Styles yang ada. Bagian ini dirancang khusus untuk memudahkan developer dalam mengidentifikasi dan mengelola properti kustom yang digunakan pada tampilan website mereka.

Properti kustom (variable CSS) merupakan properti yang didefinisikan oleh developer dengan awalan “--” (contoh: “--background-color: blue;”). Properti ini memungkinkan developer untuk menyimpan nilai-nilai yang dapat digunakan ulang dalam berbagai aturan CSS di seluruh halaman website.

Dengan adanya “Custom Properties” didalam DevTools, developer dapat dengan mudah melihat daftar properti kustom yang digunakan dalam halaman web tersebut. Mereka dapat melihat nila-nilai properti kustom, serta mengeditnya secara langsung untuk melihat dampak perubahan pada tampilan halaman web. 

Hal ini memudahkan developer dalam mengelola dan memahami penggunaan kustom dalam file CSS mereka, sehingga mempercepat proses pengembagan dan perbaikan dalam halaman web. 

2. Peningkatan Lebih Lanjut untuk Penggantian Lokal

Fitur Local Overrides memungkinkan pengembang web untuk melakukan perubahan sementara pada Sources halaman web, seperti file CSS atau Javascript secara lokal pada komputer mereka. Hal ini berguna dalam proses pengembangan dan perbaikan situs web, adapun manfaat fitur ini adalah sebagai berikut:

1. Performa yang Lebih Baik: Perbaikan pada fitur Local Overrides dapat membantu meningkatkan kinerja saat mengedit sources lokal. Pengguna akan mendapat respons yang lebih cepat saat melakukan perubahan pada sources seperti mengedit file CSS atau Javascript.
2. Lebih Banyak Opsi Sinkronisasi: Local Overrides memungkinkan pengembang untuk menyinkronkan perubahan yang mereka buat secara lokal dengan versi asli sources di server. Pada versi ini, opsi sinkronisasi lebih fleksibel, memungkinkan pengembang untuk memutuskan bagaimana dan kapan perubahan lokal harus diterapkan ke sources di server.
3. Manajemen Perubahan lebih Baik: Pengembang dapat melihat dengan mudah riwayat perubahan yang telah dibuat pada sources lokal. Ini membantu konsistensi kode dan menghindari konflik perubahan.

Bagaimana cara kerja dari fitur Local Overrides pada DevTools Chrome 118, berikut penjelasannya:

1. Dialog untuk Override Content: Sekarang, ketika Anda mengklik kanan file yang dipetakan ke sources asli di dalam tab Sources > Page dan memilih “Override Content” DevTools akan menampilkan dialog yang mengarahkan Anda ke sources asli daripada mencoba untuk mengganti isi file tersebut. Ini berguna karena konten file yang dipetakan ke source asli tidak dapat diubah.

2. Kolom Has Overrides di Panel Network: Di dalam panel Network, sekarang terdapat kolom baru yang disebut “Has Overrides” dan filter yang sesuai “has-overrides: [content| headers| yes | no]”. Untuk melihat kolom “Has Overrides” anda dapat mengklik kanan pada header tabel dan memilih opsi tersebut. Ini membantu pengembang untuk dengan cepat melihat apakah ada overrides yang aktif pada permintaan(request) jaringan tertentu dan apakah overrides tersebut memengaruhi konten atau header permintaan(request).
 

3. Perubahan dalam Menghapus Overrides: Pada tab Sources > Overrides, menu “Delete all overrides” sekarang diganti dengan opsi “Delete” dengan perilaku yang lebih tepat. Sebelumnya, “Delete all overrides” bisa membingungkan karena hanya menghapus override yang aktif dalam sesi saat ini, yang ditandai dengan ikon titik ungu “Saved”. 

Opsi “Delete” yang baru akan memunculkan pesan peringatan dan meminta konfirmasi sebelum menghapus folder yang Anda klik beserta semua isinya. Untuk mengaktifkan kembali opsi sebelumnya. Anda dapat memeriksa kotak centang “Enable Delete all overrides temporarily” di dalam Settings > Experiments.

 

3. Pencarian yang Ditingkatkan

Pada DevTools versi Chrome 118, peningkatan ini mencangkup beberapa fitur baru yang membuat alat pencarian di DevTools lebih kuat dan lebih efisien. Berikut adalah penjelasan lebih lanjut tentang perbaikan ini:

1. Hasil Pencarian yang Lebih Detail: Sebelumnya, ketika Anda melakukan pencarian dalam kode sources halaman web, DevTools hanya menampilkan pencocokan pertama per baris kode. Dengan perbaikan ini, DevTools sekarang akan menunjukkan semua pencocokan yang ditemukan dalam satu baris kode. Hal ini sangat berguna ketika Anda melakukan pencarian di dalam file-file yang sudah di-minified yang sering kali memiliki banyak perubahan pada satu baris kode. Dengan cara ini, anda dapat dengan cepat melihat semua hasil pencarian dalam satu baris kode.
2. Penyempurnaan dalam Tampilan Pencocokan: Ketika Anda mengklik salah satu hasil pencarian, DevTools akan membuka file tersebut di editor dan akan menyorot (scroll) ke pencocokan yang ditemukan. Peningkatan ini tidak hanya memindahkan tampilan secara vertikal, tetapi juga secara horizontal. Ini mempermudah dalam melihat dan memahami konteks pencocokan dalam kode.
   
    

3.  Peningkatan Kecepatan Pencarian: Pencarian dalam DevTools juga mengalami peningkatan dalam hal kecepatan. Ini berarti Anda akan mendapatkan hasil pencarian dengan lebih cepat, yang meningkatkan produktivitas Anda saat melakukan inspeksi dan debug kode.

4. Dukungan untuk Ignore Listing: DevTools kini mendukung fitur ignore listing, yang berarti Anda dapat mengabaikan hasil pencarian file-file tertentu. Ini berguna jika Anda ingin fokus pada pencarian dalam beberapa file saja dan tidak ingin melihat hasil dari file yang diabaikan.

Dengan peningkatan “Enhanced Search” pada DevTools 118, alat pencarian menjadi lebih cepat, responsif dan informatif. Hal ini akan sangat membantu developer web dalam mengeksplorasi dan menganalisis kode sources halaman web dengan baik, terutama ketika mereka ingin mengabaikan hasil dari file-file tertentu dalam pencarian mereka.  

4. Panel Source yang Ditingkatkan   

Peningkatan Source Panel membawa sejumlah perbaikan dan fitur baru dengan dukungan Fitur terkini dalam pengembangan web, termasuk pengeditan berkas sources, inspeksi elemen dan navigasi sources yang terkait dengan halaman web. Berikut ini beberapa perubahan yang ditingkatkan pada Source Panel:

A. Workspace yang Disederhanakan di Panel Sources

Pembaruan ini bertujuan untuk membuat pengguna fitur Workspace dalam panel Sources menjadi lebih efisien dan mudah digunakan. Apa saja yang disederhanakan pada panel Sources? berikut adalah penjelasannya:
 

1. Penamaan yang Konsisten: Salah satu perubahan utamanya adalah konsistensi dalam penamaan elemen-elemen di dalam panel Sources. Panel “Sources > Filesystem” sekarang diubah menjadi “Workspace”. Selain itu, teks-teks antarmuka pengguna (UI texts) dalam panel ini sekarang menjadi lebih jelas dan tidak mengandung pengulangan yang tidak perlu. Hal ini membantu pengembang untuk lebih mudah memahami dan mengakses fitur Workspace.

2. Pembaruan Setup yang Lebih Baik: Anda sekarang akan melihat petunjuk yang lebih baik saat melakukan pengaturan Workspace. Misalnya, ada petunjuk yang lebih jelas ketika Anda ingin menarik dan meletakkan folder ke dalam Workspace atau jika Anda ingin memilih folder dengan mengklik tautan yang disesuaikan. Ini mempermudah pengembang dalam mengimpor dan mengelola folder Sources untuk digunakan dalam proyek pengembangan. 

3. Sinkronisasi Perubahan Langsung: Kemampuan menyinkronkan perubahan yang Anda buat di dalam DevTools secara langsung ke berkas sources asli. Ini memungkinkan Anda untuk mengedit kode, memeriksa perubahan, dan segera melihat hasilnya dalam proyek Anda tanpa harus secara manual menyalin perubahan pada berkas sources.

B. Susun Ulang Panel di Sources

Pada perubahan DevTools (Chrome 118), sekarang pengguna dapat mengatur ulang urutan panel-panel di sebelah kiri panel Sources dengan cara menarik dan meletakkan, mirip dengan cara Anda mengatur ulang panel, tab dan panel lainnya.

Ini berarti Anda memiliki fleksibilitas lebih besar dalam mengatur tampilan panel-panel di panel Sources sesuai dengan preferensi Anda. Jika Anda ingin membuat panel tertentu menjadi lebih dominan atau lebih mudah diakses, dapat dilakukan dengan menariknya dan menempatkannya dalam urutan yang Anda inginkan.

Pembaruan ini memungkinkan Anda untuk menyesuaikan tampilan panel-panel DevTools agar sesuai dengan alur kerja pengembangan web Anda, sehingga membuat penggunaan alat ini menjadi lebih efisien dan lebih mudah disesuaikan dengan kebutuhan Anda.

C. Penyorotan Kode dengan lebih Banyak Jenis Script

Sekarang, panel Sources dapat melakukan pemformatan ulang (pretty-print) untuk kode Javascript yang disisipkan secara inline dalam jenis skrip tertentu, seperti module, import map, dan speculations rules. Ini berguna karena akan memperbaiki tampilan kode Javascript yang mungkin sudah terkompres atau terlihat rumit menjadi lebih mudah dibaca atau dipahami.

DevTools juga dapat menyorot sintaksis (syntax highlighting) untuk jenis skrip import map dan speculations rules.Kedua jenis skrip ini menyimpan data dalam format JSON, dan penyorotan sintaksis akan membantu pengembang dalam mengidentifikasi dengan lebih jelas struktur dan konten JSON yang terdapat dalam skrip tersebut. Ini membuat pengedit dan pemahaman kode JSON dalam jenis skrip ini menjadi lebih mudah.

Dengan begitu, developer web akan membantu memahami, memeriksa, dan mengedit kode dalam jenis yang lebih beragam dengan lebih baik, sehingga memudahkan proses pengembangan dan debugging.

5. Fitur Media dengan Prefers-reduces-transparency

Fitur ini memungkinkan pengembang untuk menyesuaikan konten web dengan preferensi yang dipilih pengguna untuk mengurangi transparansi dalam sistem operasi (OS), seperti pengaturan “Kurangi transparansi” pada macOS.

Untuk mengevaluasi atau meniru fitur media ini, Anda dapat membukanya dalam DevTools dengan langkah-langkah berikut ini:

1. Buka DevTools browser Chrome (biasanya dengan menekan F12 atau klik kanan halaman web dan pilih Inspect atau Periksa).
2. Pilih tab Rendering di dalam DevTools. 
3. Scroll ke bawah pada tab Rendering hingga Anda menemukan opsi yang disebut Emulate prefers-reduced-transparency.
4. Aktifkan opsi ini dengan mengkliknya dan DevTools akan meniru preferensi pengguna terkait dengan transparansi yang dikurangi.

Dengan melakukan langkah tersebut Anda dapat menguji bagaimana situs web akan berperilaku ketika pengguna mengaktifkan preferensi reduced transparency pada sistem operasi mereka. Hal ini membantu pengembang untuk memastikan bahwa konten web mereka dapat beradaptasi dengan baik.

6. Lighthouse 11

Panel Lighthouse sekarang menjalankan Lighthouse 11, di mana perubahan ini memiliki beberapa aspek penting yang memengaruhi cara beroperasinya. Berikut ini penjelasan lebih detail:

1. Penghapusan Navigasi Legacy: Versi 11 dari Lighthouse menghilangkan pengujian dan audit yang terkait dengan navigasi lama. Ini berarti pengujian yang sudah tidak relevan atau sudah tidak digunakan telah dihapus dari panel Lighthouse. Anda dapat melihat lebih lengkap pada dokumentasi Release v11.0.0
2. Audit Aksesibilitas Baru: Perubahan yang paling mencolok adalah penambahan audit aksesibilitas baru. Hal ini berarti Lighthouse 11 sekarang dapat melakukan audit lebih mendalam terhadap aspek-aspek aksesibilitas pada situs web Anda. Audit ini akan membantu dalam mengidentifikasi masalah aksesibilitas yang mungkin ada pada website dan memberikan rekomendasi untuk memperbaikinya. Untuk lebih lengkap apa saja perubahan secara dasar cek Lighthouse: Mengoptimalkan Kecepatan Situs Website.
3. Perubahan dalam Penilaian Kategori Aksesibilitas: Lighthouse 11 juga mengubah cara penilaian kategori aksesibilitas. Ini berarti pengukuran dan penilaian terhadap aksesibilitas website akan lebih tepat dan akurat.

Dengan menjalankan fitur Lighthouse 11 pada panel DevTools, Anda dapat melakukan pengujian dan audit website dengan alat yang lebih baik untuk masalah aksesibilitas dan membantu untuk meningkatkan nilai aksesibilitas. Yang terpenting adalah untuk memastikan bahwa semua pengguna dapat mengakses website dengan baik termasuk mereka yang memiliki tantangan aksesibilitas.

7. Peningkatan Aksesibilitas

Terdapat sejumlah peningkatan aksesibilitas yang bertujuan untuk memperbaiki pengalaman pengguna dengan tantangan aksesibilitas. Adapun perubahan tersebut sebagai berikut:

1. Dukungan lebih Banyak untuk Navigasi: DevTools kini mendukung lebih banyak tombol navigasi yang digunakan untuk mengakses berbagai fitur. Misalnya, dalam fitus CSS Overview , Anda dapat menggunakan tombol panah atas dan bawah untuk mengakses berbagai bagian dalam sidebar kiri. Ini membantu pengguna yang menggunakan pembaca layar atau navigasi keyboard dengan lebih mudah menavigasi dan menjelajahi berbagai komponen DevTools.
2. Peningkatan Aksesibilitas Memori: Dalam fitur Memory di sidebar kiri,  Anda sekarang dapat lebih mudah mengakses tombol Save yang terletak di sebelah snapshot dengan menggunakan tombol Tab pada keyboard kemudian menekan Enter untuk memilih folder. Ini mempermudah pengguna dengan tantangan aksesibilitas untuk menyimpan snapshot atau data yang relevan.
3. Perbaikan Pengumuman oleh Pembaca Layar: Beberapa masalah pengumuman oleh pembaca layar dalam DevTools telah diperbaiki. Ini berarti DevTools sekarang akan memberikan pengumuman yang lebih akurat dan informatif kepada pengguna yang mengandalkan pembaca layar untuk menjelajahi dan berinteraksi.

8. Sorotan Lainnya

Beberapa perbaikan dan peningkatan lainnya yang menonjol dalam rilis DevTools (Chrome 118) juga mencakup berbagai aspek berikut ini:

1. Network - Ikon Baru untuk Jenis Source Populer: Panel Network sekarang memiliki ikon baru yang membedakan jenis-jenis source  yang populer, seperti media, wasm, websocket, manifest, fetch/xhr, dan json. Ini memudahkan developer dalam mengidentifikasi source dengan cepat dalam network traffic.
2. Pembaruan Warna untuk Material 3: Terjadi pembaruan warna yang mencakup elemen UI dengan standar Material 3. Hal ini tampak dalam panel Elements dan Performance. Pembaruan warna ini membantu menciptakan tampilan yang lebih konsisten pada DevTools.
3. Pemeliharaan Masalah Cookie: DevTools sekarang dapat melakukan pemeliharaan masalah cookie. Ini membantu developer untuk melacak masalah terkait cookie yang memungkinkan terjadi selasa sesi pengujian dan debugging.
4. Peningkatan pada Preloading di Application: Terdapat berbagai peningkatan pada fitur Application > Preloading, termasuk kemampuan untuk mengurutkan grid dengan lebih mudah dan detail aturan yang direvisi. Hal ini akan membantu dalam mengelola preloading pada aplikasi web dengan lebih baik.
5. Peningkatan pada Editor di Protocol Monitor: Protocol Monitor sekarang memiliki berbagai perbaikan pada editor perintahnya, termasuk peringatan saat input data salah, kemampuan mengedit perintah yang sudah terkirim, editor untuk parameter objek tanpa kunci yang telah ditentukan oleh referensi, perintah filter berdasarkan pencocokan substring, dan banyak lagi. Ini membuat pengguna Protocol Monitor menjadi lebih baik dan lebih intuitif.
6. Pembaruan Flame Chart Performa: Grafik Flame chart  pada panel Performa sekarang memiliki garis tepi di sekitar kotak total pada diagram pie. Hal ini membantu dalam memberikan informasi visual yang lebih jelas tentang performa aplikasi web.
7. Perbaikan pada Panel Sources: Panel Sources sekarang tidak lagi menganggap tanda hubung (dashes) sebagai karakter kata dalam CSS. Ini akan membantu dalam mengedit dan pemahaman kode CSS dengan lebih baik.
8. Penyortiran Keyword CSS: Fungsi autocomplete selalu menyusun keyword CSS pada akhir daftar, memudahkan developer dalam menavigasi dan menggunakan keyword CSS.
9. Dukungan Ruang pada Filter RegEx: Filter RegEx sekarang mendukung spasi, yang memungkinkan developer untuk melakukan pencarian berbasis RegEx dengan lebih fleksibel.
10. Perbaikan pada Media Query pada Elements: Panel Elements kini telah memperbaiki fitur deteksi media query yang akan membantu developer dalam menangani tampilan responsive website lebih baik.