Yang Baru di DevTools (Chrome 65)

Kayce Basques

Fitur baru yang hadir di DevTools di Chrome 65 meliputi:

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

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 Lokasi 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 akan 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 menayangkan file lokal yang dimodifikasi, bukan resource jaringan.

Untuk menyiapkan Penggantian Lokal:

  1. Buka panel Sources.

  2. Buka tab Penggantian.

    Tab Penggantian

    Gambar 2. Tab Penggantian

  3. Klik Setup Overrides.

  4. Pilih direktori tempat Anda ingin menyimpan perubahan.

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

  6. Buat perubahan.

Batasan

  • DevTools tidak menyimpan perubahan yang dibuat di DOM Tree di panel Elements. Sebagai gantinya, edit HTML di panel Sources.
  • Jika Anda mengedit CSS di panel Styles, dan sumber CSS tersebut adalah file HTML, DevTools tidak akan menyimpan perubahan. Sebagai gantinya, edit file HTML di panel Sources.
  • 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 baru.

Tab Perubahan

Gambar 3. Tab Perubahan

Alat aksesibilitas baru

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

Panel aksesibilitas

Gunakan panel Aksesibilitas di panel Elemen 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 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 rendah 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 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.

Memeriksa rasio kontras elemen H1 yang ditandai.

Gambar 5. Memeriksa rasio kontras elemen h1 yang ditandai

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, artinya layar memenuhi rasio kontras minimum yang direkomendasikan (AA).

Klik Tampilkan Lainnya 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 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 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.

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

Performa itu penting! Setelah Mynet meningkatkan kecepatan pemuatan halamannya sebesar 4X lipat, pengguna menghabiskan waktu 43% lebih lama di situs, melihat 34% lebih banyak halaman, rasio pantulan menurun 24%, dan pendapatan meningkat 25% per tampilan 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

Langkah kode yang andal dengan pekerja dan kode asinkron

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

Melangkah ke 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 di Gambar 8 meneruskan pesan antara thread utama dan thread pekerja. Setelah memasuki panggilan postMessage() di thread utama, DevTools akan dijeda di pengendali onmessage di thread pekerja. Pengendali onmessage itu sendiri memposting pesan kembali ke thread utama. Melangkah ke dalam panggilan tersebut akan menjeda DevTools kembali di thread utama.

Melangkah ke kode penerusan pesan di Chrome 65.

Gambar 8. Memasuki kode penerusan pesan di Chrome 65

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

Melangkah ke 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, dalam Gambar 10 setelah masuk ke setTimeout(), DevTools menjalankan semua kode yang mengarah ke titik tersebut di balik layar, lalu menjeda dalam fungsi yang diteruskan ke setTimeout().

Memasuki kode asinkron di Chrome 65.

Gambar 10. Melangkah ke 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.

Melangkah ke kode asinkron di Chrome 63.

Gambar 11. Memasuki 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 Memulai Analisis Performa Runtime untuk memahami panel Performa.

Memilih di antara beberapa rekaman di 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();
})();

Google Cloud 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 mengetahui contohnya.

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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