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 men-debug aplikasi dari IDE seperti VS Code atau WebStorm, Anda mungkin menemukan bahwa membuka DevTools akan mengacaukan sesi debug Anda. Masalah ini juga membuat penggunaan DevTools tidak mungkin untuk men-debug pengujian WebDriver.

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

Proses debug jarak jauh multiklien adalah masalah DevTools nomor 1 yang paling populer di crbug.com, dan nomor 3 di seluruh project Chromium. Dukungan multiklien juga membuka sejumlah 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, 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.

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 pada versi lokal project di sistem file Anda.

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

Lihat bagian "Penulisan" (sekitar 14:28) di pembahasan DevTools dari CDS 2016 untuk melihat cara kerja Workspace 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 Anda.

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

Menyimulasikan notifikasi push dengan data kustom

Simulasi notifikasi push sudah lama ada di DevTools, dengan satu batasan: Anda tidak dapat mengirim data kustom. 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 telah 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 Sync, DevTools akan mengirim 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.
  • Tulis 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

109 Chrome

Chrome 108

Chrome 107

106 Chrome

105 Chrome

104 Chrome

103 Chrome

102 Chrome

101 Chrome

100 Chrome

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