Yang Baru di DevTools (Chrome 63)

Kayce Basques

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

Baca terus 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 telah menemukan bahwa membuka DevTools mengacaukan sesi debug Anda. Masalah ini juga membuat Anda tidak dapat menggunakan DevTools untuk men-debug pengujian WebDriver.

Mulai Chrome 63, DevTools kini mendukung beberapa klien proses debug jarak jauh secara default, tanpa konfigurasi yang diperlukan.

Proses debug jarak jauh multi-klien adalah masalah DevTools terpopuler nomor 1 di crbug.com, dan nomor 3 di seluruh project Chromium. Dukungan multi-klien juga membuka cukup banyak 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, dan klien WebSocket seperti Puppeteer, kini dapat berjalan secara 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 secara bersamaan dengan DevTools.
  • Beberapa Ekstensi Chrome yang berbeda kini dapat menggunakan chrome.debugger API di tab yang sama secara bersamaan.

Workspace 2.0

Workspace telah ada selama beberapa waktu di DevTools. Fitur ini memungkinkan Anda menggunakan DevTools sebagai IDE. Anda membuat beberapa perubahan pada kode sumber dalam DevTools, dan perubahan tersebut tetap ada di versi lokal project Anda di sistem file.

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

Lihat bagian "Penulisan" (sekitar 14.28) dari presentasi DevTools dari CDS 2016 untuk melihat cara kerja Workspaces 2.0.

Empat audit baru

Di Chrome 63, panel Audit memiliki 4 audit baru:

  • Menayangkan 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 Audits guna meningkatkan kualitas halaman Anda.

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

Menyimulasikan notifikasi push dengan data kustom

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

  1. Buka Demo Push Sederhana.
  2. Klik Aktifkan Notifikasi Push.
  3. Klik Izinkan saat Chrome meminta Anda mengizinkan notifikasi.
  4. Buka DevTools.
  5. Buka panel Pekerja Layanan.

  6. Tulis sesuatu di kotak teks Push.

    Menyimulasikan notifikasi push dengan data kustom.

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

  7. Klik Push untuk mengirim notifikasi.

    Notifikasi push yang disimulasikan

    Gambar 2. Notifikasi push yang disimulasikan

Memicu peristiwa sinkronisasi latar belakang dengan tag kustom

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

  1. Buka DevTools.
  2. Buka panel Pekerja Layanan.
  3. Masukkan beberapa teks di kotak teks Sinkronkan.
  4. Klik Sinkronkan.

Memicu peristiwa sinkronisasi latar belakang kustom

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

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua yang telah dibahas dalam seri Yang baru di DevTools.