Yang Baru di DevTools (Chrome 60)

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

• Panel Audits baru, termasuk pengujian untuk progressive web app, performa, aksesibilitas, dan praktik terbaik.
• Badge pihak ketiga. Cari tahu pihak ketiga mana yang membuat permintaan jaringan, mencatat ke Konsol, dan menjalankan JavaScript.
• Lanjutkan Ke Sini. Gestur baru yang dapat mempercepat alur kerja proses debug JavaScript Anda.
• Proses debug yang dapat diprediksi untuk JavaScript asinkron.
• Pratinjau objek di Konsol.
• Pembaruan real-time di tab Cakupan.
• Menu baru untuk memilih konteks di Konsol.
• Opsi pembatasan jaringan yang lebih sederhana.
• Pelacakan tumpukan asinkron diaktifkan secara default.

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

Fitur baru

Panel Audit baru, yang didukung oleh Lighthouse

Panel Audit kini didukung oleh Lighthouse. Lighthouse menyediakan serangkaian pengujian komprehensif untuk mengukur kualitas halaman web Anda.

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

Gambar 1. Laporan Lighthouse

Untuk mengaudit halaman:

1. Klik tab Audit.
2. Klik Perform an audit.
3. Klik Run audit. Lighthouse menyiapkan DevTools untuk mengemulasi perangkat seluler, menjalankan serangkaian pengujian terhadap halaman, lalu menampilkan hasilnya di panel Audit.

Lighthouse di Google I/O '17

Tonton presentasi DevTools dari Google I/O 2017 di bawah untuk mempelajari lebih lanjut integrasi Lighthouse di DevTools.

Berkontribusi ke Lighthouse

Lighthouse adalah project open source. Untuk mempelajari lebih lanjut cara kerjanya dan cara berkontribusi, tonton video Lighthouse dari Google I/O '17 di bawah.

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, mencatat ke Konsol, dan menjalankan JavaScript.

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

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 Kelompokkan menurut produk di tab Pohon Panggilan dan Bottom-Up untuk mengelompokkan aktivitas perekaman performa menurut entitas pihak ketiga yang menyebabkan aktivitas tersebut. Lihat Mulai Menganalisis Performa Runtime untuk mempelajari cara menganalisis performa dengan DevTools.

Gambar 4. Pengelompokan menurut produk di tab Bottom-Up

Gestur baru untuk Lanjutkan ke Sini

Misalnya Anda sedang dijeda di baris 25 skrip, dan Anda ingin melompat ke baris 50. Sebelumnya, Anda dapat menetapkan titik henti sementara di baris 50, atau mengklik kanan baris tersebut dan memilih Continue to here. Namun sekarang, ada gestur yang lebih cepat untuk menangani alur kerja ini.

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

Gambar 5. Lanjutkan Ke Sini

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

Melangkah ke asinkron

Tema besar bagi tim DevTools dalam waktu dekat adalah membuat proses men-debug kode asinkron menjadi dapat diprediksi, dan memberi Anda histori lengkap eksekusi asinkron.

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

Lihat demo di bawah dari sesi DevTools di I/O untuk melihat contohnya.

Perubahan

Pratinjau objek yang lebih informatif di Konsol

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

Gambar 6. Cara Konsol digunakan untuk melihat pratinjau objek

Gambar 7. Cara Konsol kini melihat pratinjau objek

Menu pemilihan konteks yang lebih informatif di Konsol

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

• Judul menjelaskan setiap item.
• Subjudul di bawah judul menjelaskan domain asal item.
• Arahkan kursor ke konteks iframe untuk menandainya di area pandang.

Gambar 8. Mengarahkan kursor ke iframe di menu Pemilihan Konteks baru akan menandainya di viewport

Pembaruan real-time di tab Cakupan

Saat merekam cakupan kode di Chrome 59, tab Cakupan hanya akan menampilkan "Merekam...", tanpa visibilitas ke kode yang sedang digunakan. Sekarang, tab Cakupan menampilkan secara real time kode yang sedang digunakan.

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

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

Opsi throttling jaringan yang lebih sederhana

Menu throttling jaringan di panel Network dan Performance telah disederhanakan untuk hanya menyertakan tiga opsi: Offline, Slow 3G, yang umum di tempat-tempat seperti India, dan Fast 3G, yang umum di tempat-tempat seperti Amerika Serikat.

Gambar 11. Opsi pembatasan jaringan baru

Opsi pembatasan telah disesuaikan agar cocok dengan alat pembatasan tingkat kernel lainnya. DevTools tidak lagi 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 Asinkron telah dihapus dari panel Sumber. Pelacakan tumpukan asinkron kini aktif secara default. Sebelumnya, opsi ini bersifat opsional karena overhead performa. Overhead sekarang cukup minimal untuk mengaktifkan fitur secara default. Jika Anda memilih untuk menonaktifkan rekaman aktivitas stack asinkron, Anda dapat menonaktifkannya di Setelan atau dengan menjalankan perintah Do not capture async stack traces di Menu Perintah.

DevTools di Google I/O '17

Tonton video Paul Irish di bawah untuk mempelajari lebih lanjut apa yang telah dikerjakan tim DevTools selama setahun terakhir dan tema besar yang akan mereka tangani dalam waktu dekat.

Download 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.