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 Audits baru, didukung oleh Lighthouse

Panel Audits 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 lainnya dari laporan 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 Perform an audit.
  3. Klik Jalankan audit. Lighthouse menyiapkan DevTools untuk mengemulasi perangkat seluler, menjalankan banyak pengujian terhadap halaman, lalu menampilkan hasilnya di panel Audits.

Mercusuar di Google I/O '17

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

Berkontribusi untuk Lighthouse

Lighthouse adalah proyek sumber terbuka. Untuk mempelajari lebih lanjut cara kerjanya dan cara berkontribusi, lihat Lighthouse talk dari Google I/O '17 di bawah ini.

Punya ide untuk audit Lighthouse? Posting di sini.

Lencana pihak ketiga

Gunakan badge pihak ketiga untuk mendapatkan lebih banyak insight tentang entity yang membuat permintaan jaringan di halaman, logging ke Konsol, dan menjalankan 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 Command Menu.
  2. Jalankan perintah Show third party badges.

Gunakan opsi Group by product di tab Call Tree dan Bottom-Up untuk mengelompokkan aktivitas perekaman performa oleh entity pihak ketiga yang menyebabkan aktivitas tersebut. Baca artikel 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 pada baris 25 dari suatu skrip, dan Anda ingin melompat ke baris 50. Sebelumnya, Anda dapat menetapkan titik henti sementara pada baris 50, atau mengklik kanan baris dan memilih Continue to here. Namun kini, ada gestur yang lebih cepat untuk menangani alur kerja ini.

Saat memeriksa 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.

Lanjutkan ke Sini

Gambar 5. Lanjutkan Ke Sini

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

Masuk ke asinkron

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

Gestur baru untuk Continue to Here 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 ini dari presentasi DevTools di I/O sebagai contoh.

Perubahan

Pratinjau objek yang lebih informatif di Konsol

Sebelumnya, saat Anda mencatat objek ke dalam log atau mengevaluasi objek di Konsol, Konsol hanya akan menampilkan Object, yang tidak terlalu membantu. Sekarang, Konsol menyediakan informasi lebih lanjut tentang isi objek.

Cara Konsol digunakan untuk melihat pratinjau objek

Gambar 6. Cara Konsol digunakan untuk melihat pratinjau objek

Cara Konsol sekarang mempratinjau objek

Gambar 7. Cara Konsol sekarang mempratinjau objek

Menu pemilihan konteks yang lebih informatif di Konsol

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

  • Judul menjelaskan isi setiap item.
  • Sub judul di bawah judul menjelaskan 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 menandainya di area pandang

Update real-time di tab Cakupan

Saat merekam cakupan kode di Chrome 59, tab Cakupan hanya akan menampilkan "Recording...", tanpa visibilitas ke kode apa yang digunakan. Sekarang, tab Cakupan menunjukkan secara real time kode 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 baru

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, 3G lambat, yang umum di tempat-tempat seperti India, dan Fast 3G, yang umum di tempat-tempat seperti Amerika Serikat.

Opsi throttling jaringan yang baru

Gambar 11. Opsi throttling jaringan yang baru

Opsi throttling telah disesuaikan agar cocok dengan alat throttling level 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 memilih ikut serta karena overhead performa. Overhead sekarang cukup minimal untuk mengaktifkan fitur secara default. Jika ingin menonaktifkan pelacakan tumpukan asinkron, Anda dapat menonaktifkannya di Settings atau dengan menjalankan perintah Do not capture async stack traces di Command Menu.

DevTools di Google I/O '17

Lihat pembicaraan oleh tokoh mitos Paul Irish di bawah ini untuk mempelajari lebih lanjut tentang apa yang telah dikerjakan tim DevTools selama setahun terakhir dan tema-tema besar yang akan 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59