Yang Baru di DevTools (Chrome 63)

Kayce Basques

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

Baca atau tonton video di bawah untuk mempelajari lebih lanjut.

Dukungan proses debug jarak jauh multiklien

Jika Anda pernah mencoba {i>debugging<i} aplikasi dari IDE seperti VS Code atau WebStorm, Anda mungkin menemukan bahwa membuka DevTools mengacaukan sesi debug Anda. Masalah ini juga membuat kita tidak bisa menggunakan DevTools untuk men-debug pengujian WebDriver.

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

Proses debug jarak jauh multiklien adalah masalah DevTools nomor 1 yang paling populer di crbug.com, dan nomor 3 di seluruh proyek Chromium. Dukungan multiklien juga membuka sejumlah peluang menarik untuk mengintegrasikan alat lain dengan DevTools, atau menggunakan alat tersebut di cara. Contoh:

  • Klien protokol seperti ChromeDriver atau ekstensi proses debug Chrome untuk VS Code dan Webstorm, dan WebSocket seperti Puppeteer, kini bisa dijalankan secara bersamaan dengan DevTools.
  • Dua klien protokol WebSocket terpisah, seperti Puppeteer atau chrome-remote-interface, sekarang 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.

Ruang Kerja 2.0

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

Workspace 2.0 dibuat berdasarkan versi 1.0, yang menambahkan UX yang lebih bermanfaat dan pemetaan otomatis yang lebih baik pada transpilasi pada kode sumber. Fitur ini awalnya dijadwalkan untuk dirilis segera setelah Chrome Developer Summit (CDS) 2016, tetapi tim menundanya untuk menyelesaikan beberapa masalah.

Lihat "Pembuatan" (sekitar 14:28) dari pembicaraan DevTools dari CDS 2016 untuk melihat Ruang Kerja dalam penerapan 2.0.

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 yang telah diketahui.
  • Error browser dicatat ke Konsol.

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

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

Menyimulasikan notifikasi push dengan data kustom

Menyimulasikan notifikasi push sudah lama ada di DevTools, dengan satu batasan: Anda tidak dapat mengirim data khusus. Namun, dengan kotak teks Push baru yang masuk ke 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 jika Chrome meminta Anda untuk mengizinkan notifikasi.
  4. Buka DevTools.
  5. Buka panel Service Workers.

  6. Tulis sesuatu di kotak teks Push.

    Menyimulasikan notifikasi push dengan data kustom.

    Gambar 1. Menyimulasikan notifikasi push dengan data khusus 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 sudah ada 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 Sync.
  4. Klik Sync.

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

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.