Yang Baru di DevTools (Chrome 65)

Fitur baru yang akan hadir di DevTools pada Chrome 65 meliputi:

Baca terus, atau tonton versi video catatan rilis ini di bawah.

Penggantian Lokal

Penggantian Lokal memungkinkan Anda membuat perubahan di DevTools, dan mempertahankan perubahan tersebut di seluruh pemuatan halaman. Sebelumnya, setiap perubahan yang Anda buat di DevTools akan hilang saat Anda memuat ulang halaman. Local Overrides berfungsi untuk sebagian besar jenis file, dengan beberapa pengecualian. Lihat Batasan.

Mempertahankan perubahan CSS di seluruh pemuatan halaman dengan Penggantian Lokal.

Gambar 1. Mempertahankan perubahan CSS di seluruh pemuatan halaman dengan Penggantian Lokal

Cara kerjanya:

  • Anda menetapkan direktori tempat DevTools akan menyimpan perubahan.
  • Saat Anda membuat perubahan di DevTools, DevTools akan menyimpan salinan file yang telah diubah ke direktori Anda.
  • Saat Anda memuat ulang halaman, DevTools akan menayangkan file lokal yang telah dimodifikasi, bukan resource jaringan.

Untuk menyiapkan Penggantian Lokal:

  1. Buka panel Sumber.
  2. Buka tab Ganti.

    Tab Ganti

    Gambar 2. Tab Mengganti

  3. Klik Penggantian Penyiapan.

  4. Pilih direktori tempat Anda ingin menyimpan perubahan.

  5. Di bagian atas area pandang, klik Allow untuk memberi DevTools akses baca dan tulis ke direktori.

  6. Buat perubahan.

Batasan

  • DevTools tidak menyimpan perubahan yang dibuat di DOM Tree pada panel Elements. Edit HTML di panel Sources.
  • Jika Anda mengedit CSS di panel Styles, dan sumber CSS tersebut adalah file HTML, DevTools tidak akan menyimpan perubahan tersebut. Edit file HTML di panel Sources.
  • Ruang kerja. DevTools otomatis memetakan resource jaringan ke repositori lokal. Setiap kali Anda melakukan perubahan di DevTools, perubahan tersebut juga akan disimpan ke repositori lokal Anda.

Tab Perubahan

Lacak perubahan yang Anda buat secara lokal di DevTools melalui tab Perubahan baru.

Tab Perubahan

Gambar 3. Tab Perubahan

Alat aksesibilitas baru

Gunakan panel Accessibility baru untuk memeriksa properti aksesibilitas suatu elemen, dan memeriksa rasio kontras elemen teks di Color Picker untuk memastikan bahwa elemen tersebut dapat diakses oleh pengguna yang memiliki gangguan penglihatan atau buta warna.

Panel aksesibilitas

Gunakan panel Accessibility di panel Elements untuk menyelidiki properti aksesibilitas elemen yang saat ini dipilih.

Panel Aksesibilitas

Gambar 4. Panel Accessibility menampilkan atribut ARIA dan properti komputasi untuk elemen yang saat ini dipilih di DOM Tree pada panel Elements, serta posisinya dalam hierarki aksesibilitas

Lihat A11ycast karya Rob Dodson tentang pelabelan di bawah ini untuk melihat cara kerja panel Accessibility.

Rasio kontras di Pemilih Warna

Pemilih Warna sekarang menampilkan rasio kontras elemen teks. Meningkatkan rasio kontras elemen teks akan membuat situs Anda lebih mudah diakses oleh pengguna yang memiliki gangguan penglihatan atau kekurangan penglihatan warna. Lihat Warna dan kontras untuk mempelajari lebih lanjut pengaruh rasio kontras terhadap aksesibilitas.

Meningkatkan kontras warna elemen teks akan membuat situs Anda lebih bermanfaat bagi semua pengguna. Dengan kata lain, jika teks Anda berwarna abu-abu dengan latar belakang putih, teks tersebut akan sulit dibaca oleh siapa pun.

Memeriksa rasio kontras elemen H1 yang disorot.

Gambar 5. Memeriksa rasio kontras elemen h1 yang ditandai

Pada Gambar 5, dua tanda centang di samping 4,61 berarti bahwa elemen ini memenuhi peningkatan rasio kontras yang direkomendasikan (AAA). Jika hanya memiliki satu tanda centang, artinya layar memenuhi rasio kontras minimum yang direkomendasikan (AA).

Klik Show More Tampilkan Lebih Banyak untuk meluaskan bagian Contrast Ratio. Garis putih di kotak Color Spectrum mewakili batas antara warna yang memenuhi rasio kontras yang direkomendasikan dan yang tidak. Misalnya, karena warna abu-abu di Gambar 6 memenuhi rekomendasi, artinya semua warna di bawah garis putih juga memenuhi rekomendasi.

Bagian Rasio Kontras yang diperluas.

Gambar 6. Bagian Rasio Kontras yang diperluas

Panel Audits memiliki audit aksesibilitas otomatis untuk memastikan bahwa setiap elemen teks di halaman memiliki rasio kontras yang cukup.

Lihat Menjalankan Lighthouse di Chrome DevTools, atau tonton A11ycast di bawah, untuk mempelajari cara menggunakan panel Audits untuk menguji aksesibilitas.

Audit baru

Chrome 65 menghadirkan kategori audit SEO yang benar-benar baru, dan banyak audit performa baru.

Audit SEO baru

Memastikan halaman Anda lulus setiap audit di kategori SEO baru dapat membantu meningkatkan peringkat mesin telusur Anda.

Kategori audit SEO baru.

Gambar 7. Kategori audit SEO yang baru

Audit performa baru

Chrome 65 juga dilengkapi dengan banyak audit performa baru:

  • Waktu booting JavaScript tinggi
  • Menggunakan kebijakan cache yang tidak efisien pada aset statis
  • Menghindari pengalihan halaman
  • Dokumen menggunakan plugin
  • Minifikasikan CSS
  • Meminifikasi JavaScript

Performa itu penting! Setelah Mynet meningkatkan kecepatan pemuatan halaman mereka sebesar 4X lipat, pengguna menghabiskan waktu 43% lebih banyak di situs, melihat halaman 34% lebih banyak, rasio pantulan turun 24%, dan pendapatan meningkat 25% per kunjungan halaman artikel. Pelajari lebih lanjut.

Tips! Jika Anda ingin meningkatkan performa pemuatan halaman tetapi tidak tahu harus memulai dari mana, coba panel Audits. Anda memberikannya URL, dan memberi Anda laporan terperinci tentang berbagai cara untuk meningkatkan kualitas halaman tersebut. Mulai sekarang.

Informasi terbaru lainnya

Penyusunan kode yang andal dengan pekerja dan kode asinkron

Chrome 65 menghadirkan update pada tombol Step Into Melangkah Masuk saat melangkah ke kode yang meneruskan pesan antar-thread, dan kode asinkron. Jika menginginkan perilaku langkah sebelumnya, Anda dapat menggunakan tombol Langkah Langkah baru.

Melangkah ke dalam kode yang meneruskan pesan antar-thread

Saat Anda melangkah ke dalam kode yang meneruskan pesan antar-thread, DevTools sekarang menunjukkan apa yang terjadi di setiap thread.

Misalnya, aplikasi di Gambar 8 meneruskan pesan antara thread utama dan thread pekerja. Setelah melangkah ke panggilan postMessage() di thread utama, DevTools akan dijeda di pengendali onmessage di thread pekerja. Pengendali onmessage sendiri memposting pesan kembali ke thread utama. Melangkah ke panggilan itu akan menjeda DevTools kembali di thread utama.

Beralih ke kode penerusan pesan di Chrome 65.

Gambar 8. Menerapkan kode penerusan pesan di Chrome 65

Saat Anda memasukkan kode seperti ini di Chrome versi sebelumnya, Chrome hanya menampilkan sisi thread utama kode, seperti yang dapat Anda lihat pada Gambar 9.

Beralih ke kode penerusan pesan di Chrome 63.

Gambar 9. Menerapkan kode penerusan pesan di Chrome 63

Melangkah ke kode asinkron

Saat beralih ke kode asinkron, DevTools sekarang mengasumsikan bahwa Anda ingin berhenti sejenak dalam kode asinkron yang akhirnya berjalan.

Misalnya, pada Gambar 10 setelah melangkah ke setTimeout(), DevTools menjalankan semua kode yang mengarah ke titik tersebut di belakang layar, lalu dijeda dalam fungsi yang diteruskan ke setTimeout().

Beralih ke kode asinkron di Chrome 65.

Gambar 10. Beralih ke kode asinkron di Chrome 65

Saat Anda memasukkan kode seperti ini di Chrome 63, DevTools dijeda dalam kode karena berjalan secara kronologis, seperti yang dapat Anda lihat di Gambar 11.

Beralih ke kode asinkron di Chrome 63.

Gambar 11. Beralih ke kode asinkron di Chrome 63

Beberapa rekaman di panel Performa

Panel Performa kini memungkinkan Anda menyimpan sementara hingga 5 rekaman. Rekaman akan dihapus saat Anda menutup jendela DevTools. Lihat Mulai Menganalisis Performa Runtime agar terbiasa menggunakan panel Performa.

Memilih di antara beberapa rekaman di panel Performa.

Gambar 12. Memilih di antara beberapa rekaman di panel Performa

Bonus: Mengotomatiskan tindakan DevTools dengan Puppeteer 1.0

Puppeteer versi 1.0, alat otomatisasi browser yang dikelola oleh tim Chrome DevTools, sekarang sudah dirilis. Anda dapat menggunakan Puppeteer untuk mengotomatiskan banyak tugas yang sebelumnya hanya tersedia melalui DevTools, seperti mengambil screenshot:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Editor ini juga memiliki API untuk banyak tugas otomatisasi yang umumnya berguna, seperti membuat PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Lihat Mulai Cepat untuk mempelajari lebih lanjut.

Anda juga dapat menggunakan Puppeteer untuk mengekspos fitur DevTools saat menjelajah tanpa harus membuka DevTools secara eksplisit. Lihat Menggunakan Fitur DevTools Tanpa Membuka DevTools untuk contoh.

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59