It's a wrap for Chrome Dev Summit 2020! Watch all the sessions at goo.gle/cds20-sessions now!

Apa yang Baru Di DevTools (Chrome 65)

Powered by Google Translate

Fitur baru yang datang ke DevTools di Chrome 65 meliputi:

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

Local Overridees

Local Overrides memungkinkan Anda membuat perubahan di DevTools, dan menjaga perubahan tersebut di seluruh beban halaman. Sebelumnya, perubahan apa pun yang Anda buat di DevTools akan hilang saat Anda memuat ulang halaman. Local Override berfungsi untuk sebagian besar jenis file, dengan beberapa pengecualian. Lihat Limitations .

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

Bagaimana itu bekerja:

  • Anda menentukan direktori di mana DevTools harus menyimpan perubahan.
  • Saat Anda membuat perubahan di DevTools, DevTools menyimpan salinan file yang diubah ke direktori Anda.
  • Saat Anda memuat ulang halaman, DevTools melayani file lokal yang dimodifikasi, alih-alih sumber daya jaringan.

Untuk mengatur Local Overrides:

  1. Buka panel Sources. 1. Buka tab Mengganti.

    The Overrides tab
    Figure 2. The Overrides tab

  2. Klik Pengaturan Mengganti. 1. Pilih direktori mana Anda ingin menyimpan perubahan Anda. 1. Di bagian atas viewport Anda, klik Allow untuk memberi DevTools akses baca dan tulis ke direktori. 1. Buat perubahan Anda.

Batasan

  • DevTools tidak menyimpan perubahan yang dibuat di DOM Tree dari panel Elements. Edit HTML di panel Sumber sebagai gantinya.
  • Jika Anda mengedit CSS di Styles pane, dan sumber CSS itu adalah file HTML, DevTools tidak akan menyimpan perubahan. Edit file HTML di panel Sources.
  • Workspaces . DevTools secara otomatis memetakan sumber daya jaringan ke repositori lokal. Setiap kali 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.

The Changes tab
Figure 3. The Changes tab

Alat aksesibilitas baru

Gunakan panel Accessibility baru untuk memeriksa properti aksesibilitas suatu elemen, dan periksa rasio kontras elemen teks di Color Picker untuk memastikan bahwa mereka dapat diakses oleh pengguna dengan gangguan penglihatan atau warna rendah -visi kekurangan.

Accessibility pane

Gunakan Accessibility pane pada panel Elements untuk menyelidiki properti aksesibilitas dari elemen yang saat ini dipilih.

The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree of the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

Lihat A11ycast Rob Dodson tentang pelabelan di bawah ini untuk melihat panel Accessibility dalam tindakan.

Contrast ratio dalam Color Picker

Color Picker sekarang menunjukkan rasio kontras elemen teks. Meningkatkan rasio kontras elemen teks membuat situs Anda lebih mudah diakses oleh pengguna dengan gangguan penglihatan rendah atau kekurangan penglihatan warna. Lihat Color and contrast untuk mempelajari lebih lanjut tentang bagaimana rasio kontras mempengaruhi aksesibilitas.

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

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

Di Gambar 5, dua tanda centang di samping ** 4,61 ** berarti bahwa elemen ini memenuhi enhanced recommended contrast ratio (AAA) . Jika hanya ada satu tanda centang, itu berarti ia bertemu dengan minimum recommended contrast ratio (AA) .

Klik ** Tampilkan Lebih Banyak **! Show More untuk memperluas bagian Contrast Ratio. Garis putih di kotak Color Spectrum menunjukkan batas antara warna yang memenuhi rasio kontras yang direkomendasikan, dan yang tidak. Misalnya, karena warna abu-abu di Gambar 6 memenuhi rekomendasi, itu berarti bahwa semua warna di bawah garis putih juga memenuhi rekomendasi.

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

Panel Audit memiliki audit akses otomatis untuk memastikannya * setiap elemen * teks pada halaman memiliki rasio kontras yang cukup.

Lihat Run Lighthouse in Chrome DevTools , atau tonton A11ycast di bawah ini, untuk mempelajari cara menggunakan ** panel untuk menguji aksesibilitas.

Audit baru

Chrome 65 dikirimkan dengan kategori baru audit SEO, dan banyak audit kinerja baru.

Audit SEO baru

Memastikan bahwa halaman Anda melewati setiap audit dalam kategori SEO yang baru dapat membantu meningkatkan peringkat mesin pencari Anda.

The new SEO category of audits.
Figure 7. The new SEO category of audits

Audit kinerja baru

Chrome 65 juga dikirimkan dengan banyak audit kinerja baru:

  • Waktu boot-up JavaScript tinggi
  • Menggunakan kebijakan cache tidak efisien pada aset statis
  • Menghindari pengalihan halaman
  • Dokumen menggunakan plugin
  • Perkecil CSS
  • Meminimalkan JavaScript

Pembaruan lainnya

Kode yang dapat dipercaya melangkah dengan pekerja dan kode asynchronous

Chrome 65 menghadirkan pembaruan ke Step Into! Tombol Step Into saat masuk ke kode yang meneruskan pesan antar utas, dan kode asinkron. Jika Anda menginginkan perilaku loncatan sebelumnya, Anda dapat menggunakan Langkah yang baru! Tombol Step , sebagai gantinya.

Melangkah ke kode yang melewatkan pesan antara utas benang

Ketika Anda masuk ke kode yang mengirimkan pesan antar utas, DevTools sekarang menunjukkan apa yang terjadi di setiap utas.

Misalnya, aplikasi dalam Gambar 8 meneruskan pesan antara utas utama dan utas pekerja. Setelah masuk ke dalam panggilan postMessage() pada utas utama, DevTools berhenti di handler onmessage di thread pekerja. Penangan onmessage itu sendiri mengirim pesan kembali ke utas utama. Masuk ke * bahwa * panggilan berhenti DevTools kembali di utas utama.

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

Saat Anda masuk ke kode seperti ini di versi Chrome sebelumnya, Chrome hanya menunjukkan Anda sisi utas-utama dari kode, seperti yang Anda lihat di Gambar 9.

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

Melangkah ke dalam kode asynchronous

Ketika melangkah ke kode asynchronous, DevTools sekarang mengasumsikan bahwa Anda ingin berhenti di kode asynchronous yang akhirnya berjalan.

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

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

Ketika Anda masuk ke kode seperti ini di Chrome 63, DevTools berhenti dalam kode karena secara kronologis berjalan, seperti yang Anda lihat di Gambar 11.

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

Beberapa rekaman dalam panel Performance

Panel Performance sekarang memungkinkan Anda menyimpan hingga 5 rekaman secara sementara. Rekaman akan dihapus ketika Anda menutup jendela DevTools Anda. Lihat Get Started with Analyzing Runtime Performance untuk merasa nyaman dengan panel Performance.

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

Bonus: Mengotomatiskan aksi DevTools dengan Puppeteer 1.0

Versi 1.0 dari Puppeteer, alat otomatisasi browser yang dikelola oleh tim Chrome DevTools, sekarang keluar. Anda dapat menggunakan Puppeteer untuk mengotomatiskan banyak tugas yang sebelumnya hanya tersedia melalui DevTools, seperti menangkap tangkapan layar:

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();
})();

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 Quick Start untuk mempelajari lebih lanjut.

Anda juga dapat menggunakan Puppeteer untuk mengekspos fitur DevTools saat menjelajah tanpa pernah secara eksplisit membuka DevTools. Lihat Using DevTools Features Without Opening DevTools sebagai contoh.

Permintaan dari tim DevTools: pertimbangkan Canary

Jika Anda menggunakan Mac atau Windows, pertimbangkan untuk menggunakan Chrome Canary sebagai browser pengembangan default Anda. Jika Anda melaporkan bug atau perubahan yang tidak Anda sukai saat masih ada di Canary, tim DevTools dapat menanggapi umpan balik Anda secara signifikan lebih cepat.

Umpan balik

Tempat terbaik untuk mendiskusikan salah satu fitur atau perubahan yang Anda lihat di sini adalah google-chrome-developer-tools@googlegroups.com mailing list . Anda juga dapat mentweet kami di @ChromeDevTools jika waktu Anda @ChromeDevTools . Jika Anda yakin telah menemukan bug di DevTools, silakan open an issue .

Lihat tag devtools-whatsnew untuk tautan ke semua catatan rilis DevTools sebelumnya.

Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!