Yang Baru di DevTools (Chrome 60)

Selamat datang! Fitur baru dan perubahan besar yang akan hadir pada DevTools di Chrome 60 meliputi:

Lihat versi video catatan rilis ini di bawah atau baca terus untuk mempelajari lebih lanjut.

Fitur baru

Panel Audit baru, didukung oleh Lighthouse

Panel Audit sekarang didukung oleh Lighthouse. Lighthouse menyediakan rangkaian lengkap pengujian untuk mengukur kualitas halaman web.

Skor di bagian atas untuk Progressive Web App, Performa, Aksesibilitas dan Praktik Terbaik adalah skor gabungan Anda untuk setiap kategori. Bagian lainnya dalam laporan ini adalah perincian dari setiap pengujian yang menentukan skor Anda. Tingkatkan kualitas halaman web Anda dengan memperbaiki pengujian yang gagal.

Laporan Lighthouse

Gambar 1. Laporan Lighthouse

Untuk mengaudit halaman:

  1. Klik tab Audit.
  2. Klik Lakukan audit.
  3. Klik Jalankan audit. Lighthouse menyiapkan DevTools untuk mengemulasi perangkat seluler, menjalankan banyak pengujian terhadap halaman, lalu menampilkan hasilnya di panel Audit.

Mercusuar di Google I/O '17

Lihat pembahasan DevTools dari Google I/O '17 di bawah untuk mempelajari lebih lanjut integrasi Lighthouse di DevTools.

Berkontribusi ke Lighthouse

Lighthouse adalah proyek {i>open source<i}. Untuk mempelajari lebih lanjut tentang cara kerjanya dan cara berkontribusi pada itu, lihat presentasi Lighthouse dari Google I/O '17 di bawah ini.

Punya ide untuk audit Lighthouse? Posting di sini.

Badge pihak ketiga

Gunakan badge pihak ketiga untuk mendapatkan lebih banyak insight tentang entitas yang membuat permintaan jaringan di halaman, logging ke Konsol, dan mengeksekusi JavaScript.

Mengarahkan kursor ke badge pihak ketiga di panel Jaringan

Gambar 2. Mengarahkan kursor ke badge pihak ketiga di panel Jaringan

Mengarahkan kursor ke badge pihak ketiga di Konsol

Gambar 3. Mengarahkan kursor ke badge pihak ketiga di Konsol

Untuk mengaktifkan badge pihak ketiga:

  1. Buka Menu Perintah.
  2. Jalankan perintah Show third party badges.

Gunakan opsi Group by product di tab Call Tree dan Bottom-Up untuk mengelompokkan performa pencatatan aktivitas oleh entitas pihak ketiga yang menyebabkan aktivitas. Lihat Memulai Menganalisis Performa Runtime untuk mempelajari cara menganalisis performa dengan DevTools.

Pengelompokan menurut produk di tab Bottom-Up

Gambar 4. Pengelompokan menurut produk di tab Bottom-Up

Gestur baru untuk Lanjutkan ke Sini

Misalnya Anda dijeda di baris 25 pada suatu skrip, dan Anda ingin langsung ke baris 50. Sebelumnya, Anda bisa tetapkan titik henti sementara pada baris 50, atau klik kanan baris dan pilih Continue to here. Tapi sekarang, terdapat gestur yang lebih cepat untuk menangani alur kerja ini.

Saat memeriksa kode, tahan Command (Mac) atau Control (Windows, Linux) dan lalu klik untuk melanjutkan ke baris kode tersebut. DevTools menandai tujuan yang dapat dilompati dengan warna biru.

Lanjutkan ke Sini

Gambar 5. Lanjutkan Ke Sini

Lihat Memulai dengan Proses Debug JavaScript untuk mempelajari dasar-dasar proses debug di DevTools.

Melangkah ke asinkron

Tema besar untuk tim DevTools dalam waktu dekat adalah membuat proses debug kode asinkron dapat diprediksi, dan memberikan histori lengkap dari eksekusi asinkron.

Gestur baru untuk Lanjutkan ke Sini juga berfungsi dengan kode asinkron. Saat Anda menahan Command (Mac) atau Control (Windows, Linux), DevTools menandai kemampuan yang dapat dilewati tujuan asinkron berwarna hijau.

Lihat demo di bawah ini dari pembicaraan DevTools di I/O sebagai contoh.

Perubahan

Pratinjau objek yang lebih informatif di Console

Sebelumnya, saat Anda mencatat atau mengevaluasi objek di Konsol, Konsol hanya akan menampilkan Object, yang tidak terlalu membantu. Sekarang, Konsol memberikan informasi selengkapnya tentang konten objek.

Cara Konsol digunakan untuk melihat pratinjau objek

Gambar 6. Cara Konsol digunakan untuk melihat pratinjau objek

Cara Konsol kini menampilkan pratinjau objek

Gambar 7. Cara Konsol kini menampilkan pratinjau objek

Menu pemilihan konteks yang lebih informatif di Konsol

Menu Pilihan Konteks Konsol kini memberikan informasi selengkapnya tentang konteks yang tersedia.

  • Judul menjelaskan apa itu setiap item.
  • Subtitel di bawah judul mendeskripsikan domain tempat item berasal.
  • Arahkan kursor ke konteks iframe untuk menandainya di area pandang.

Menu Pilihan Konteks baru

Gambar 8. Mengarahkan kursor ke iframe di menu Pilihan Konteks yang baru akan menyorotnya dalam area pandang

Info terbaru secara real-time di tab Cakupan

Saat merekam cakupan kode di Chrome 59, tab Cakupan hanya akan menampilkan "Perekaman...", tanpa visibilitas mengenai kode apa yang sedang digunakan. Sekarang, tab Cakupan menampilkan data real-time kode apa yang digunakan.

Memuat dan berinteraksi dengan halaman menggunakan tab Cakupan lama

Gambar 9. Memuat dan berinteraksi dengan halaman menggunakan tab Cakupan lama

Memuat dan berinteraksi dengan halaman menggunakan tab Cakupan yang baru

Gambar 10. Memuat dan berinteraksi dengan halaman menggunakan tab Cakupan yang baru

Opsi throttling jaringan yang lebih sederhana

Menu throttling jaringan di panel Jaringan dan Performa telah disederhanakan untuk hanya mencakup tiga opsi: Offline, 3G Lambat, yang umum di tempat seperti India, dan 3G cepat, yang umum digunakan di tempat-tempat seperti Amerika Serikat.

Opsi throttling jaringan baru

Gambar 11. Opsi throttling jaringan baru

Opsi throttling telah disesuaikan agar cocok dengan alat throttling tingkat kernel lainnya. Tidak ada DevTools lagi akan menampilkan metrik latensi, download, dan upload di samping setiap opsi, karena nilai tersebut menyesatkan. Tujuannya adalah untuk mencocokkan pengalaman sebenarnya dari setiap opsi.

Tumpukan asinkron aktif secara default

Kotak centang Async telah dihapus dari panel Async. Stack trace asinkron sekarang diaktifkan oleh secara default. Sebelumnya, opsi ini diikutsertakan karena overhead performa. Overhead sekarang cukup minimal untuk mengaktifkan fitur secara {i>default<i}. Jika Anda memilih untuk menonaktifkan pelacakan tumpukan asinkron, Anda dapat menonaktifkannya di Setelan atau dengan menjalankan Do not capture async stack traces di Menu Perintah.

DevTools di Google I/O '17

Lihat pembicaraan oleh seorang mitos Paul Irlandia di bawah ini untuk mempelajari lebih lanjut tentang apa yang dimiliki tim DevTools kerjakan selama setahun terakhir dan tema besar yang sedang mereka tangani dalam waktu dekat.

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.