Yang Baru di DevTools (Chrome 65)

Kayce Basques

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

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

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

Penggantian Lokal

Dengan Penggantian Lokal, Anda dapat membuat perubahan di DevTools, dan menyimpan 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.

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

Cara kerjanya:

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

Untuk menyiapkan Penggantian Lokal:

1. Buka panel Sources.

2. Buka tab Penggantian.

   

   Gambar 2. Tab Penggantian

3. Klik Penggantian Penyiapan.

4. Pilih direktori tempat Anda ingin menyimpan perubahan.

5. Di bagian atas area tampilan, klik Izinkan untuk memberikan akses baca dan tulis DevTools ke direktori.

6. Buat perubahan.

Batasan

• DevTools tidak menyimpan perubahan yang dibuat di Pohon DOM pada panel Elemen. Edit HTML di panel Sources.
• Jika Anda mengedit CSS di panel Gaya, dan sumber CSS tersebut adalah file HTML, DevTools tidak akan menyimpan perubahan. Edit file HTML di panel Sources.

Fitur terkait

• Ruang kerja. DevTools secara 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 lakukan secara lokal di DevTools melalui tab Changes baru.

Gambar 3. Tab Perubahan

Alat aksesibilitas baru

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

Panel aksesibilitas

Gunakan panel Aksesibilitas di panel Elemen untuk menyelidiki properti aksesibilitas dari elemen yang saat ini dipilih.

Gambar 4. Panel Aksesibilitas menampilkan atribut ARIA dan properti terkomputasi untuk elemen yang saat ini dipilih di Hierarki DOM pada panel Elemen, serta posisinya di hierarki aksesibilitas

Tonton A11ycast 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 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 membuat situs Anda lebih mudah digunakan oleh semua pengguna. Dengan kata lain, jika teks Anda berwarna abu-abu dengan latar belakang putih, teks tersebut akan sulit dibaca oleh siapa pun.

Gambar 5. Memeriksa rasio kontras elemen h1 yang disorot

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

Klik Tampilkan Lebih Banyak untuk meluaskan bagian Rasio Kontras. Garis putih di kotak Spektrum Warna mewakili batas antara warna yang memenuhi rasio kontras yang direkomendasikan, dan warna yang tidak memenuhi. Misalnya, karena warna abu-abu dalam Gambar 6 memenuhi rekomendasi, berarti semua warna di bawah garis putih juga memenuhi rekomendasi.

Gambar 6. Bagian Rasio Kontras yang diperluas

Fitur terkait

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 Audit untuk menguji aksesibilitas.

Audit baru

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

Audit SEO baru

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

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
• Memperkecil CSS
• Memperkecil JavaScript

Performa penting! Setelah Mynet meningkatkan kecepatan pemuatan halaman mereka sebesar 4X, pengguna menghabiskan waktu 43% lebih lama di situs, melihat 34% lebih banyak halaman, rasio pantulan turun 24%, dan pendapatan meningkat 25% per tayangan 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 alat ini akan memberikan laporan mendetail tentang berbagai cara untuk meningkatkan kualitas halaman tersebut. Mulai sekarang.

Perubahan lainnya

• Audit aksesibilitas manual baru
• Pembaruan pada audit WebP agar lebih mencakup format gambar generasi berikutnya lainnya
• Perubahan besar pada skor aksesibilitas
• Jika audit aksesibilitas tidak berlaku untuk halaman, audit tersebut tidak lagi dihitung dalam skor aksesibilitas
• Performa kini menjadi bagian teratas dalam laporan

Penelusuran kode yang andal dengan pekerja dan kode asinkron

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

Melangkah ke dalam kode yang meneruskan pesan antar-thread

Saat Anda menelusuri kode yang meneruskan pesan antar-thread, DevTools kini akan menunjukkan apa yang terjadi di setiap thread.

Misalnya, aplikasi dalam Gambar 8 meneruskan pesan antara thread utama dan thread pekerja. Setelah menelusuri panggilan postMessage() di thread utama, DevTools akan berhenti di handler onmessage di thread pekerja. Handler onmessage itu sendiri memposting pesan kembali ke thread utama. Melangkah ke panggilan that akan menjeda DevTools kembali di thread utama.

Gambar 8. Menelusuri kode message-passing di Chrome 65

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

Gambar 9. Menelusuri kode penerusan pesan di Chrome 63

Menelusuri kode asinkron

Saat menelusuri kode asinkron, DevTools kini mengasumsikan bahwa Anda ingin menjeda di kode asinkron yang akhirnya berjalan.

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

Gambar 10. Menelusuri kode asinkron di Chrome 65

Saat Anda masuk ke kode seperti ini di Chrome 63, DevTools akan menjeda kode saat kode berjalan secara kronologis, seperti yang dapat Anda lihat di Gambar 11.

Gambar 11. Menelusuri kode asinkron di Chrome 63

Beberapa rekaman di panel Performa

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

Gambar 12. Memilih 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, kini telah 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();
})();

Library 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 membuka DevTools secara eksplisit. Lihat Menggunakan Fitur DevTools Tanpa Membuka DevTools untuk melihat 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.