Alat pengembang di Microsoft Edge baru

Browser baru berbasis Chromium dari Microsoft baru-baru ini merilis rilis stabil publik keduanya, meluncurkan Edge 80 dengan dukungan ARM64 penuh serta alat yang ditingkatkan untuk membantu Anda membangun dan bekerja dengan konten web. Seperti versi sebelumnya dari Edge yang sekarang lawas, browser baru Microsoft menyimpan pintasan F12 yang sudah dikenal untuk meluncurkan alat pengembangnya, baik yang dilampirkan ke browser atau di panel terpisah.

Sebaiknya Anda membiasakan diri dengan hal-hal baru, karena meskipun ada kemiripan dengan Edge yang lama, Anda sekarang bekerja di dunia Chromium, dan ada lebih banyak kesamaan dengan Chrome dan peramban berbasis Chromium lainnya. Itu bukanlah hal yang buruk. Lebih mudah mentransfer keterampilan antar browser, dan jika Anda telah menggunakan Chrome sebagai browser pengembangan, akan mudah untuk mulai bekerja di Edge baru. Namun, Microsoft telah membuat beberapa perubahannya sendiri, dan bekerja untuk memperluas pengalaman pengembang Edge ke dalam kode Visual Studio sehingga Anda dapat mengembangkan dan menguji aplikasi JavaScript dalam satu lingkungan.

Pengalaman pengembang lintas platform

Dengan Edge baru tersedia di Windows 7 dan macOS, dan dengan versi Linux yang sedang dikembangkan, ada akses ke alat pengembangan yang sama di platform berbeda. Anda mendapatkan pemeriksa, debugger, dan konsol yang sama, sehingga mudah untuk menjalankan pengujian yang sama di mana pun Anda bekerja, dan pada OS apa pun yang Anda gunakan. Pengembang yang akrab dengan Edge di Windows harus dapat beralih ke Mac untuk menguji kode tanpa harus menunggu pengembang Mac membantu.

Seperti Edge lama, alat pengembangan Edge berbasis Chromium baru membantu Anda memeriksa HTML, CSS, dan JavaScript di situs Anda, dengan debugger JavaScript dan konsol untuk melihat keluaran pembuatan log konsol dari menjalankan JavaScript. Anda dapat menggunakan alat tersebut untuk dengan cepat mengaktifkan bilah alat browser yang menambahkan mode tampilan perangkat, memberi Anda pilihan untuk menguji desain responsif tanpa meninggalkan PC pengembangan.

Menggunakan alat pengembang Edge

Alat pengembang Edge ditemukan di sembilan panel berbeda, masing-masing memberi Anda wawasan berbeda ke dalam aplikasi web Anda. Anda kemungkinan besar akan menggunakan yang pertama: tampilan Elemen.

Ini menelusuri HTML dan CSS Anda, menunjukkan elemen mana di halaman yang dihasilkan oleh bagian kode mana. Menunjuk ke sebuah elemen di jendela browser Anda menyoroti kode yang relevan, membantu mengisolasi HTML atau CSS yang ingin Anda debug. Satu panel menampilkan HTML; yang lain menampilkan CSS saat ini, dengan gaya yang saat ini diterapkan dan event listener yang sedang digunakan. Anda dapat melihat aturan CSS apa yang saat ini digunakan dan mana yang diabaikan.

Panel Elements juga tersedia sebagai ekstensi Visual Studio Code, membawa inspeksi tata letak bersamaan dengan pengeditan HTML Anda. Ini adalah cara yang berguna untuk melihat dengan cepat bagaimana perubahan pada kode Anda memengaruhi tata letak halaman Anda. Anda bahkan dapat melampirkan kode ke instance browser, memberi Anda akses langsung ke dokumen HTML yang terbuka.

Bersiap untuk PWA

Salah satu alat yang lebih berguna adalah panel Kinerja. Dari sini Anda dapat merekam aktivitas browser Anda. Setelah urutan pengujian selesai, Anda dapat menggunakan timeline alat untuk membuat profil sumber daya yang digunakan aplikasi Anda. Ini paling baik digunakan bersama dengan alat Jaringan dan Memori, terutama jika Anda menggunakan banyak JavaScript. Memahami bagaimana aplikasi web bekerja sangat penting jika Anda berencana menggunakannya sebagai PWA (aplikasi web progresif), dan di sini panel Aplikasi menambahkan alat untuk memeriksa komponen kunci PWA, termasuk penyimpanan lokal dan pekerja layanan.

Dengan Edge yang mempermudah untuk mengidentifikasi dan menginstal PWA, ada baiknya menjelajahi alat-alat ini secara lebih mendetail, terutama panel Aplikasi. Dengan tampilan dan nuansa seperti dasbor, ini adalah cara cepat untuk melihat secara mendalam apa yang terjadi di dalam aplikasi Anda dan bagaimana kinerjanya di luar browser. Anda dapat menggunakan alat Aplikasi untuk menjelajahi bagaimana layanan bawaan Edge, seperti pengendali pembayaran, bekerja.

Menggunakan plug-in di Edge DevTools

Fitur lain dari peralihan ke pengalaman pengembang berbasis Chromium adalah dukungan untuk pengaya pihak ketiga. Beberapa sudah tersedia di toko add-on Edge sendiri (meskipun saat ini hanya melalui tautan dalam pribadi ke toko). Untuk pilihan yang lebih luas, jika Anda telah mengaktifkan dukungan toko pihak ketiga di Edge, Anda memiliki akses ke semua ekstensi di Toko Web Chrome. Ada banyak hal di sini, termasuk alat yang menambahkan dukungan terfokus untuk kerangka kerja JavaScript tertentu atau bantuan untuk debugging. Ini termasuk Facebook's React, open source gRPC, alat untuk membantu bekerja dengan API GraphQL, dan dukungan untuk linter seperti webhint.

Spesifikasi plugin pengembang Chromium bersifat publik, dan siapa pun dapat membuat dan menerbitkan alat pengembang mereka sendiri, baik secara internal atau untuk digunakan di seluruh dunia. Karena plugin Edge berbagi format yang sama dengan browser Chromium lainnya, plugin yang sama dapat dikirimkan melalui toko browser lain, sehingga menyederhanakan pengembangan alat.

Menambahkan ekstensi ke alat pengembang seperti menambahkan satu ekstensi ke browser. Arahkan ke toko, klik alat yang ingin Anda tambahkan, dan biarkan mengunduh dan menginstalnya. Ini akan dipasang di browser, dan Anda mungkin ingin menyembunyikan ikon ekstensi di menu browser sebelum membuka alat pengembang untuk melihat tab baru. Menjalankan webhint di sebuah situs menunjukkan sekumpulan metrik utama, memberi Anda petunjuk untuk fitur penting seperti aksesibilitas, atau untuk dukungan fitur PWA.

Senang rasanya melihat kustomisasi akhirnya menjadi bagian dari alat Edge. Kita semua menggunakan rantai alat yang berbeda, dan memberikan apa yang Anda butuhkan untuk mendukung teknologi yang Anda gunakan adalah pendekatan yang sangat ramah pengembang. Kembali ketika Microsoft mengumumkan peralihan ke Chromium untuk perambannya, itu menunjukkan bahwa salah satu alasannya adalah memberi pengembang fitur yang mereka butuhkan untuk membangun aplikasi yang mereka inginkan. Itu mungkin berarti hanya meningkatkan dukungan browser untuk HTML5, CSS, dan JavaScript, jadi menghadirkan berbagai alat pengembang Chromium ke Edge, di semua OS yang didukung, adalah langkah yang disambut baik.

Perubahan Microsoft pada pengalaman pengembang Chromium

Penting untuk diingat bahwa Microsoft masih merupakan mitra yang relatif junior untuk Google dalam pengembangan Chromium. Meski begitu, ia telah berhasil memberikan kontribusi yang cukup besar sejak bergabung dengan proyek, termasuk menambahkan dukungan untuk fitur aksesibilitas agar perkakas pengembang tersedia untuk komunitas seluas mungkin. Dengan sekitar 170 perubahan yang menambahkan dukungan untuk alat seperti pembaca layar, ada banyak hal yang disukai di sini, karena alat pengembang yang dapat diakses akan mengarah pada pengembangan aplikasi dan layanan web yang dapat diakses.

Fitur baru lainnya saat ini tersembunyi di balik bendera eksperimental di pengaturan Edge, termasuk dukungan untuk bahasa tambahan. Jika Anda mengaktifkan fitur ini, dan menggunakan salah satu dari 10 bahasa yang didukung, pelokalan alat pengembang akan cocok dengan pelokalan browser Anda.