Alat pembangun di Microsoft Edge yang baru

Penyemak imbas berasaskan Chromium baru Microsoft baru-baru ini mempunyai pelepasan stabil kedua untuk umum, melancarkan Edge 80 dengan sokongan ARM64 penuh serta alat yang lebih baik untuk membantu anda membina dan bekerja dengan kandungan web. Seperti versi Edge yang lama sekarang, penyemak imbas baru Microsoft menyimpan jalan pintas F12 yang biasa untuk melancarkan alat pembangunnya, sama ada dilampirkan pada penyemak imbas atau dalam panel yang berasingan.

Perlu membiasakan diri dengan perkara baru, kerana walaupun terdapat persamaan dengan Edge yang lama, anda kini bekerja di dunia Chromium, dan terdapat banyak lagi persamaan dengan Chrome dan penyemak imbas berasaskan Chromium yang lain. Itu bukan perkara buruk. Lebih mudah untuk memindahkan kemahiran antara penyemak imbas, dan jika anda telah menggunakan Chrome sebagai penyemak imbas pengembangan, akan mudah untuk mula bekerja di Edge yang baru. Namun, Microsoft telah membuat beberapa perubahan sendiri, dan sedang berusaha untuk memperluas pengalaman pengembang Edge ke dalam kod Visual Studio sehingga anda dapat mengembangkan dan menguji aplikasi JavaScript dalam satu lingkungan.

Pengalaman pemaju lintas platform

Dengan Edge baru yang tersedia di Windows 7 dan macOS, dan dengan versi Linux yang sedang dikembangkan, terdapat akses ke alat pengembangan yang sama pada platform yang berbeza. Anda mendapat pemeriksa, debuger, dan konsol yang sama, jadi mudah untuk menjalankan ujian yang sama di mana sahaja anda bekerja, dan pada OS apa pun yang anda gunakan. Pembangun yang biasa dengan Edge pada Windows seharusnya dapat beralih ke Mac untuk menguji kod tanpa perlu menunggu pembangun Mac untuk membantu.

Seperti legacy Edge, alat pengembangan Edge berasaskan Chromium baru membantu anda memeriksa HTML, CSS, dan JavaScript di laman web anda, dengan penyahpepijat JavaScript dan konsol untuk melihat output log konsol daripada menjalankan JavaScript. Anda boleh menggunakan alat untuk menghidupkan bar alat penyemak imbas dengan cepat yang menambahkan mod pandangan peranti, memberi anda pilihan untuk menguji reka bentuk responsif tanpa meninggalkan PC pengembangan.

Menggunakan alat pembangun Edge

Alat pembangun Edge terdapat dalam sembilan panel yang berbeza, masing-masing memberi anda pandangan yang berbeza mengenai aplikasi web anda. Anda kemungkinan besar menggunakan yang pertama: paparan Elemen.

Ini meneliti HTML dan CSS anda, menunjukkan elemen dalam halaman yang dihasilkan oleh bahagian kod apa. Menunjuk ke elemen di tetingkap penyemak imbas anda menyoroti kod yang berkaitan, membantu mengasingkan HTML atau CSS yang ingin anda nyahpepijat. Satu panel menunjukkan HTML; yang lain menunjukkan CSS semasa, dengan gaya yang sedang digunakan dan pendengar acara yang sedang digunakan. Anda dapat melihat peraturan CSS apa yang sedang digunakan dan mana yang diabaikan.

Panel Elemen juga tersedia sebagai pelanjutan Kod Visual Studio, membawa pemeriksaan susun atur di samping pengeditan HTML anda. Ini adalah kaedah yang berguna untuk melihat dengan cepat bagaimana perubahan dalam kod anda mempengaruhi susun atur halaman anda. Anda bahkan dapat melampirkan kod ke contoh penyemak imbas, memberi anda akses langsung ke dokumen HTML yang terbuka.

Bersedia untuk PWA

Salah satu alat yang lebih berguna ialah panel Performance. Dari sini anda boleh merakam aktiviti penyemak imbas anda. Setelah urutan ujian selesai, anda boleh menggunakan garis masa alat untuk memaparkan sumber yang digunakan oleh aplikasi anda. Ia paling baik digunakan bersama dengan alat Rangkaian dan Memori, terutama jika anda menggunakan banyak JavaScript. Memahami bagaimana prestasi aplikasi web sangat penting jika anda merancang untuk menggunakannya sebagai PWA (aplikasi web progresif), dan di sini panel Aplikasi menambah alat untuk memeriksa komponen utama PWA, termasuk pekerja simpanan dan pekerja tempatan.

Dengan Edge menjadikannya lebih mudah untuk mengenal pasti dan memasang PWA, perlu meneroka alat ini dengan lebih terperinci, terutamanya panel Aplikasi. Dengan tampilan dan nuansa papan pemuka, ini adalah cara cepat untuk melihat secara mendalam apa yang berlaku di dalam aplikasi anda dan bagaimana prestasi mereka di luar penyemak imbas. Anda boleh menggunakan alat Aplikasi untuk meneroka bagaimana perkhidmatan bawaan Edge, seperti pengendali pembayaran, berfungsi.

Menggunakan pemalam di Edge DevTools

Satu lagi ciri beralih ke pengalaman pembangun berasaskan Chromium adalah sokongan untuk pemalam pihak ketiga. Beberapa sudah tersedia di kedai add-on Edge sendiri (walaupun ketika ini hanya melalui pautan dalam peribadi ke kedai). Untuk pilihan yang lebih luas, jika anda telah mengaktifkan sokongan kedai pihak ketiga di Edge, anda mempunyai akses ke semua sambungan di Kedai Web Chrome. Ada banyak di sini, termasuk alat yang menambahkan sokongan fokus untuk kerangka kerja JavaScript tertentu atau membantu penyahpepijatan. Ini termasuk React Facebook, gRPC sumber terbuka, alat untuk membantu bekerja dengan GraphQL API, dan sokongan untuk linters seperti webhint.

Spesifikasi pemalam pembangun Chromium bersifat umum, dan sesiapa sahaja boleh membina dan menerbitkan alat pembangunnya sendiri, baik secara dalaman atau untuk seluruh dunia untuk digunakan. Oleh kerana pemalam Edge berkongsi format yang sama dengan penyemak imbas Chromium lain, pemalam yang sama dapat disampaikan melalui kedai penyemak imbas lain, menyederhanakan pengembangan alat.

Menambah peluasan ke alat pembangun adalah seperti menambahkan satu pada penyemak imbas. Navigasi ke kedai, klik pada alat yang ingin anda tambahkan, dan biarkan muat turun dan pasang. Ia akan dipasang di penyemak imbas, dan anda mungkin ingin menyembunyikan ikon pelanjutan di menu penyemak imbas sebelum membuka alat pembangun untuk melihat tab baru. Menjalankan webhint melalui laman web menunjukkan sekumpulan metrik utama, memberi anda petunjuk untuk ciri penting seperti kebolehaksesan, atau untuk sokongan untuk ciri PWA.

Senang melihat penyesuaian akhirnya menjadi sebahagian daripada alat Edge. Kita semua menggunakan rantai alat yang berbeza, dan memberikan apa yang anda perlukan untuk menyokong teknologi yang anda gunakan adalah pendekatan yang sangat mesra pemaju. Kembali ketika Microsoft mengumumkan peralihan ke Chromium untuk penyemak imbasnya, ini menunjukkan bahawa salah satu sebabnya adalah untuk memberi para pemaju ciri yang mereka perlukan untuk membina aplikasi yang mereka inginkan. Itu mungkin hanya bermaksud meningkatkan sokongan penyemak imbas untuk HTML5, CSS, dan JavaScript, jadi membawa rangkaian lengkap alat pembangun Chromium ke Edge, di semua OS yang disokongnya, adalah langkah selamat datang.

Perubahan Microsoft terhadap pengalaman pembangun Chromium

Penting untuk diingat bahawa Microsoft masih merupakan rakan kongsi yang relatif junior dengan Google dalam pengembangan Chromium. Walaupun begitu, ia berjaya memberikan banyak sumbangan sejak ia bergabung dalam projek ini, termasuk menambahkan sokongan untuk ciri kebolehaksesan untuk menjadikan perkakas pembangun tersedia untuk komuniti seluas mungkin. Dengan kira-kira 170 perubahan yang menambahkan sokongan untuk alat seperti pembaca skrin, ada banyak yang disukai di sini, kerana alat pembangun yang dapat diakses akan membawa kepada pengembangan aplikasi dan perkhidmatan web yang dapat diakses.

Ciri baru lain kini tersembunyi di sebalik bendera eksperimen dalam tetapan Edge, termasuk sokongan untuk bahasa tambahan. Sekiranya anda mengaktifkan ciri ini, dan menggunakan salah satu daripada 10 bahasa yang disokong, penyetempatan alat pembangun akan sesuai dengan penyetempatan penyemak imbas anda.