Yang Baru di DevTools (Chrome 63)

Selamat datang kembali! Fitur baru yang akan hadir di DevTools pada Chrome 63 meliputi:

Lanjutkan membaca atau tonton video di bawah untuk mempelajari lebih lanjut.

Dukungan proses debug jarak jauh multiklien

Jika pernah mencoba men-debug aplikasi dari IDE seperti VS Code atau WebStorm, Anda mungkin mengetahui bahwa membuka DevTools dapat mengacaukan sesi debug Anda. Masalah ini juga membuat penggunaan DevTools untuk men-debug pengujian WebDriver tidak dapat dilakukan.

Mulai Chrome 63, DevTools kini mendukung beberapa klien proses debug jarak jauh secara default, sehingga tidak perlu konfigurasi.

Proses debug jarak jauh multiklien adalah masalah DevTools terpopuler nomor 1 di crbug.com, dan nomor 3 di seluruh project Chromium. Dukungan multiklien juga membuka beberapa peluang menarik untuk mengintegrasikan alat lain dengan DevTools, atau menggunakan alat tersebut dengan cara baru. Contoh:

  • Klien protokol seperti ChromeDriver atau ekstensi proses debug Chrome untuk VS Code dan Webstorm, serta klien WebSocket seperti Puppeteer, sekarang dapat berjalan bersamaan dengan DevTools.
  • Dua klien protokol WebSocket terpisah, seperti Puppeteer atau chrome-remote-interface, kini dapat terhubung ke tab yang sama secara bersamaan.
  • Ekstensi Chrome yang menggunakan chrome.debugger API kini dapat berjalan bersamaan dengan DevTools.
  • Beberapa Ekstensi Chrome yang berbeda kini dapat menggunakan chrome.debugger API di tab yang sama secara bersamaan.

Ruang Kerja 2.0

Ruang kerja sudah ada sejak lama di DevTools. Dengan fitur ini, Anda dapat menggunakan DevTools sebagai IDE. Anda membuat beberapa perubahan pada kode sumber dalam DevTools, dan perubahan akan tetap ada pada versi lokal project di sistem file Anda.

Workspaces 2.0 dibuat dari versi 1.0, yang menambahkan UX yang lebih bermanfaat dan pemetaan otomatis kode yang ditranspilasi secara lebih baik. Fitur ini awalnya dijadwalkan untuk dirilis tidak lama setelah Chrome Developer Summit (CDS) 2016, tetapi tim menundanya untuk menyelesaikan beberapa masalah.

Lihat bagian "Authoring" (sekitar pukul 14.28) dari DevTools talk dari CDS 2016 untuk melihat Workspace 2.0 beraksi.

Empat audit baru

Di Chrome 63, panel Audits memiliki 4 audit baru:

  • Tayangkan gambar sebagai WebP.
  • Gunakan gambar dengan rasio aspek yang sesuai.
  • Hindari library JavaScript frontend yang memiliki kerentanan keamanan umum.
  • Error browser dicatat ke Konsol.

Lihat Menjalankan Lighthouse di Chrome DevTools untuk mempelajari cara menggunakan panel Audit guna meningkatkan kualitas halaman Anda.

Lihat Lighthouse untuk mempelajari lebih lanjut project yang mendukung panel Audits.

Menyimulasikan notifikasi push dengan data kustom

Simulasi notifikasi push telah dilakukan selama beberapa waktu di DevTools, dengan satu batasan: Anda tidak dapat mengirim data kustom. Namun, dengan kotak teks Push baru yang ada di panel Service Worker di Chrome 63, kini Anda bisa melakukannya. Coba sekarang:

  1. Buka Simple Push Demo.
  2. Klik Enable Push Notifications.
  3. Klik Izinkan saat Chrome meminta Anda untuk mengizinkan notifikasi.
  4. Buka DevTools.
  5. Buka panel Service Workers.
  6. Tulis sesuatu di kotak teks Push.

    Simulasikan notifikasi push dengan data kustom.

    Gambar 1. Menyimulasikan notifikasi push dengan data kustom melalui kotak teks Push di panel Service Worker

  7. Klik Push untuk mengirim notifikasi.

    Simulasi notifikasi push

    Gambar 2. Simulasi notifikasi push

Memicu peristiwa sinkronisasi latar belakang dengan tag kustom

Memicu peristiwa sinkronisasi latar belakang juga telah dilakukan di panel Service Workers selama beberapa waktu, tetapi kini Anda dapat mengirim tag kustom:

  1. Buka DevTools.
  2. Buka panel Service Workers.
  3. Masukkan beberapa teks di kotak teks Sinkronisasi.
  4. Klik Sync.

Memicu peristiwa sinkronisasi latar belakang kustom

Gambar 3. Setelah mengklik Sinkronisasi, DevTools akan mengirimkan peristiwa sinkronisasi latar belakang dengan tag kustom update-content ke pekerja layanan

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