Yang Baru di DevTools (Chrome 65)

Kayce Basques

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

Lanjutkan membaca, 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. Lokal Mengganti 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 dimodifikasi, bukan jaringan resource Anda

Untuk menyiapkan Penggantian Lokal:

  1. Buka panel Sources.

  2. Buka tab Ganti.

    Tab Penggantian

    Gambar 2. Tab Ganti

  3. Klik Penggantian Penyiapan.

  4. Pilih direktori tempat Anda ingin menyimpan perubahan.

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

  6. Buat perubahan.

Batasan

  • DevTools tidak menyimpan perubahan yang dibuat di DOM Tree di panel Elements. Edit HTML di Sources sebagai gantinya.
  • Jika Anda mengedit CSS di panel Styles, dan sumber CSS tersebut adalah file HTML, DevTools tidak akan menyimpan perubahan. Edit file HTML di panel Sources sebagai gantinya.
  • Ruang kerja. DevTools otomatis memetakan resource jaringan ke repositori lokal. Kapan pun Anda membuat perubahan di DevTools, perubahan itu 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

Alat aksesibilitas baru

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

Panel aksesibilitas

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

Panel Aksesibilitas

Gambar 4. Panel Aksesibilitas menampilkan atribut ARIA dan properti yang dihitung untuk yang saat ini dipilih dalam DOM Tree pada panel Elements, serta posisi 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 kontras rasio elemen teks membuat situs Anda lebih mudah diakses oleh pengguna dengan gangguan penglihatan rendah atau kekurangan penglihatan warna. Lihat Warna dan kontras untuk mempelajari lebih lanjut rasio kontras mempengaruhi aksesibilitas.

Meningkatkan kontras warna elemen teks akan membuat situs Anda lebih bermanfaat bagi semua pengguna. Di beberapa kata lain, jika teks Anda berwarna abu-abu dengan latar belakang putih, sulit bagi siapa pun untuk 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 persyaratan yang ditingkatkan rasio kontras yang direkomendasikan (AAA). Jika hanya memiliki satu tanda centang, itu berarti perangkat memenuhi rasio kontras minimum yang direkomendasikan (AA).

Klik Show More Tampilkan Lebih Banyak untuk memperluas Kontras Rasio. Garis putih di kotak Spektrum Warna mewakili batas antarwarna yang memenuhi rasio kontras yang disarankan, 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 ini, untuk mempelajari cara menggunakan Panel Audit untuk 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 pada mesin telusur.

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

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

Tips Jika Anda ingin meningkatkan performa pemuatan halaman, tetapi tidak tahu harus mulai dari mana, coba panel Audits. Anda memberikan URL, dan ini memberi Anda laporan terperinci tentang berbagai cara menyempurnakan halaman tersebut. Mulai sekarang.

Perubahan lainnya

Tahapan kode yang andal dengan pekerja dan kode asinkron

Chrome 65 menghadirkan update untuk Step Into Tombol Melangkah Masuk saat melangkah ke kode yang meneruskan pesan di antara thread, dan kode asinkron. Jika Anda menginginkan langkah sebelumnya perilakunya, Anda dapat menggunakan Langkah Langkah yang baru tombol ini.

Memasuki kode yang meneruskan pesan antar-thread

Ketika Anda melangkah ke kode yang meneruskan pesan antar-thread, DevTools kini 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 onmessage di thread pekerja. Pengendali onmessage itu sendiri memposting pesan kembali ke layar 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 memasukkan kode seperti ini di versi Chrome sebelumnya, Chrome hanya akan 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 sekarang mengasumsikan bahwa Anda ingin berhenti sejenak di bagian kode asinkron yang akhirnya berjalan.

Misalnya, di Gambar 10 setelah masuk ke setTimeout(), DevTools akan menjalankan semua kode yang mengarah ke titik di belakang layar, dan kemudian berhenti dalam fungsi yang diteruskan ke setTimeout().

Memasuki kode asinkron di Chrome 65.

Gambar 10. Memasuki kode asinkron di Chrome 65

Saat Anda melangkah ke kode seperti ini di Chrome 63, DevTools dijeda dalam kode karena secara kronologis dijalankan, seperti yang dapat dilihat 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 tersebut dihapus saat Anda menutup jendela DevTools. Lihat Mulai Menganalisis Runtime Performa untuk memahami 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, kini posisi-posisi ini. Anda bisa menggunakan Puppeteer untuk mengotomatiskan banyak tugas yang sebelumnya hanya tersedia via 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 bisa menggunakan Puppeteer untuk mengekspos fitur DevTools saat menjelajah tanpa pernah secara eksplisit membuka DevTools. 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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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