Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 65)

Kayce Basques

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

Penggantian Lokal
Alat aksesibilitas baru
Tab Perubahan
Audit SEO dan performa baru
Beberapa rekaman di panel Performa
Pemberian kode yang andal dengan pekerja dan kode asinkron

Lanjutkan membaca, atau tonton versi video catatan rilis ini, di bawah.

Catatan: Periksa versi Chrome yang Anda jalankan di chrome://version. Jika Anda menjalankan versi sebelumnya, fitur ini tidak akan ada. Jika Anda menjalankan versi yang lebih baru, fitur ini mungkin telah berubah. Chrome mengupdate otomatis ke versi utama baru sekitar setiap 6 minggu.

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. Penggantian Lokal 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 menentukan direktori tempat DevTools menyimpan perubahan.
Saat Anda membuat perubahan di DevTools, DevTools akan menyimpan salinan file yang dimodifikasi ke direktori Anda.
Saat Anda memuat ulang halaman, DevTools akan menayangkan file lokal yang diubah, bukan resource jaringan.

Untuk menyiapkan Penggantian Lokal:

Buka panel Sources.
Buka tab Ganti.

Gambar 2. Tab Ganti
Klik Penggantian Penyiapan.
Pilih direktori tempat Anda ingin menyimpan perubahan.
Di bagian atas area tampilan, klik Allow untuk memberi DevTools akses baca dan tulis ke direktori.
Buat perubahan.

Batasan

DevTools tidak menyimpan perubahan yang dibuat di DOM Tree di 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 sebagai gantinya.

Ruang kerja. DevTools otomatis memetakan resource jaringan ke repositori lokal. Setiap kali Anda membuat 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 yang baru.

Tab Perubahan

Gambar 3. Tab Perubahan

Gunakan panel Aksesibilitas baru untuk memeriksa properti aksesibilitas elemen, dan periksa rasio kontras elemen teks di Pemilih Warna untuk memastikan bahwa elemen tersebut dapat diakses oleh pengguna yang memiliki gangguan penglihatan atau yang memiliki kekurangan penglihatan warna.

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 yang dihitung untuk elemen yang saat ini dipilih dalam DOM Tree di panel Elements, serta posisinya di hierarki aksesibilitas

Lihat A11ycast dari Rob Dodson tentang pemberian label di bawah untuk melihat cara kerja panel Aksesibilitas.

Rasio kontras di Pemilih Warna

Pemilih Warna kini menampilkan rasio kontras elemen teks. Meningkatkan rasio kontras elemen teks akan membuat situs Anda lebih mudah diakses oleh pengguna dengan 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, siapa pun akan sulit membacanya.

Memeriksa rasio kontras elemen H1 yang disorot.

Gambar 5. Memeriksa rasio kontras elemen h1 yang ditandai

Pada Gambar 5, dua tanda centang di sebelah 4.61 berarti elemen ini memenuhi rasio kontras yang direkomendasikan yang ditingkatkan (AAA). Jika hanya memiliki satu tanda centang, artinya layar memenuhi rasio kontras minimum yang direkomendasikan (AA).

Klik Show More untuk meluaskan bagian Contrast Ratio. Garis putih di kotak Spectrum Warna mewakili batas antara warna yang memenuhi rasio kontras yang direkomendasikan, dan yang tidak. Misalnya, karena warna abu-abu pada 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 memadai.

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

Audit baru

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

Audit SEO baru

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

Kategori audit SEO baru.

Gambar 7. Kategori audit SEO 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

Perf itu penting. Setelah Mynet meningkatkan kecepatan pemuatan halamannya 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 Audit. Anda memberikan URL, dan laporan mendetail tentang berbagai cara untuk meningkatkan kualitas halaman tersebut. Mulai sekarang.

Informasi terbaru lainnya

Audit aksesibilitas manual yang baru
Update pada audit WebP agar lebih inklusif dengan format gambar generasi berikutnya lainnya
Pembaruan skor aksesibilitas
Jika audit aksesibilitas tidak berlaku untuk halaman, audit tersebut tidak lagi diperhitungkan dalam skor aksesibilitas
Performa sekarang menjadi bagian teratas dalam laporan

Tahapan kode yang andal dengan pekerja dan kode asinkron

Chrome 65 menghadirkan update pada tombol Step Into saat memasuki kode yang meneruskan pesan di antara thread, dan kode asinkron. Jika Anda menginginkan perilaku langkah sebelumnya, Anda dapat menggunakan tombol Step yang baru.

Memasuki kode yang meneruskan pesan antar-thread

Saat Anda melangkah ke kode yang meneruskan pesan antar-thread, DevTools kini akan menampilkan apa yang terjadi di setiap thread.

Misalnya, aplikasi pada 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 itu sendiri memposting pesan kembali ke thread utama. Memasuki panggilan tersebut akan menjeda DevTools kembali di thread utama.

Memasuki kode penerusan pesan di Chrome 65.

Gambar 8. Memasuki kode penerusan pesan di Chrome 65

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

Memasuki kode penerusan pesan di Chrome 63.

Gambar 9. Memasuki kode penerusan pesan di Chrome 63

Melangkah ke kode asinkron

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

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

Memasuki kode asinkron di Chrome 65.

Gambar 10. Memasuki kode asinkron di Chrome 65

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

Memasuki kode asinkron di Chrome 63.

Gambar 11. Memasuki kode asinkron di Chrome 63

Beberapa rekaman di panel Performa

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

Memilih di antara beberapa rekaman di panel Performa.

Gambar 12. Memilih di antara beberapa rekaman di panel Performa

Bonus: Otomatiskan tindakan DevTools dengan Puppeteer 1.0

Puppeteer versi 1.0, alat otomatisasi browser yang dikelola oleh tim Chrome DevTools, kini 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();
})();

Alat ini juga memiliki API untuk banyak tugas otomatisasi yang umumnya berguna, seperti menghasilkan 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 pernah membuka DevTools secara eksplisit. Lihat Menggunakan Fitur DevTools Tanpa Membuka DevTools untuk mengetahui contohnya.

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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

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

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.