F12 DevTools Showdown Edge vs Firefox vs Chrome

Developer Tools dari Microsoft Edge, browser default baru Windows 10 mendapatkan desain modern dan beberapa fitur baru dibandingkan dengan pendahulunya, F12 Dev Tools Internet Explorer 11..

Pertanyaan apakah alat pengembang Microsoft Edge sesuai dengan pesaing mereka yang populer - alat pengembang di peramban modern lainnya seperti Mozilla Firefox dan Google Chrome - secara alami muncul di benak banyak pengembang.

Dalam posting ini kami mencoba menjawab pertanyaan ini, dan mencari tahu apakah F12 Dev Tools Edge benar-benar layak untuk digunakan. Kami akan membandingkan fitur-fiturnya dengan yang ada pada Alat Pengembang Firefox dan DevTools Google Chrome.

Buka Alat Dev

Menekan F12 membuka alat pengembang dalam semua 3 kasus: Alat Pengembang di Firefox, DevTools di Chrome, dan Alat Dev F12 di Microsoft Edge. Ini adalah jalan pintas keyboard tempat nama resmi Edge's F12 Dev Tools datang dari.

Saat Anda membuka Edge Dev Tools, Anda dapat mengalami sekaligus salah satu kekurangannya yang paling terkenal: saat ini mustahil untuk menyematkan alat ke jendela yang ada. Meskipun Anda dapat mengikuti apa yang terjadi di layar pada Alat Pengembang Firefox dan Chrome DevTools dengan menyematkan jendela alat dev ke bagian bawah layar, Anda (saat ini) tidak dapat melakukan hal yang sama dengan Edge.

Pengembang Microsoft mengklaim mereka akan memperbaiki masalah ini dalam pembaruan di masa mendatang.

Periksa DOM

Itu Penjelajah DOM alat (Pintasan: CTRL + 1) adalah tab pertama dari F12 Dev Tools Microsoft Edge. Tata letak dan desain keseluruhannya sangat mirip dengan Elemen tab Chrome dan Inspektur tab di Firefox, namun kemampuannya sangat berbeda.

Di Edge Anda dapat melihat pada dokumen HTML yang diberikan, gaya CSS terkait, dan penangan acara yang terdaftar pada setiap elemen. Anda juga dapat menemukan grafik kecil tentang model kotak CSS dengan nilai yang dihitung, sudah terkenal dari dua browser yang bersaing.

Kamu bisa bereksperimen dengan aturan CSS dengan menghapus yang sekarang dan menambahkan yang baru, dan Anda dapat melihat perubahan yang diringkas pada subtab terpisah yang disebut “Perubahan” (terletak di sebelah kiri). Yang terakhir ini adalah fitur yang tidak dibangun di Pengembang Firefox atau Chrome DevTools. Ini dapat memberikan rekap cepat kepada pengguna, jadi ini adalah opsi yang sangat berguna.

Ada beberapa fitur di Alat Pengembang Firefox yang tidak dimiliki Edge, maupun Google Chrome saat ini, tetapi secara signifikan dapat membantu kehidupan seorang desainer: alat analisis Font dan Animasi.

Di Edge ada pemilih warna keren meskipun itu agak dapat mengkompensasi pengguna untuk itu.

Berinteraksi dengan JavaScript

Itu Menghibur tab (Pintasan: CTRL + 2) di Microsoft Edge memungkinkan Anda untuk berinteraksi dengan JavaScript situs Anda, seperti di Firefox dan Chrome Dev Tools. Ketiganya memungkinkan Anda untuk mengikuti kesalahan JavaScript secara real-time dan Anda juga dapat menganalisisnya dengan memasukkan input Anda sendiri.

Alat konsol Edge Dev F12 Tools memiliki yang bagus fitur pelengkapan otomatis yang membantu Anda dengan perintah, namun tampaknya demikian kurang berpengetahuan dibandingkan dengan yang ada di Firefox dan Chrome Dev Tools.

Tepi memisahkan Kesalahan, Peringatan, dan Pesan yang merupakan bantuan besar, meskipun bukan sesuatu yang tidak dimiliki oleh dua toolkit lainnya.

Konsol Firefox tampaknya menjadi yang paling profesional dari tiga alat pengembang, seperti juga secara terpisah menunjukkan jenis masalah lain: jaringan, CSS, kesalahan keamanan dan pesan logging, dan memungkinkan Anda untuk berinteraksi dengan ini melalui Internet Antarmuka konsol, bukan hanya dengan kesalahan JavaScript.

Pahami Apa yang Dilakukan Kode Anda

Itu Debugger alat (Pintasan: CTRL + 3) membantu Anda memahami apa yang terjadi pada kode Anda saat menemukan bug potensial. Anda dapat mengatur jam tangan dan breakpoint, dan melihat tumpukan panggilan.

Panel Arloji menampilkan nilai variabel, mode Callstack menunjukkan rantai panggilan fungsi yang mengarah ke status saat ini, dan mode Breakpoints menunjukkan daftar breakpoint yang telah Anda tetapkan..

Edge F12 Dev Tools memungkinkan Anda jeda kode Anda di tengah eksekusi, dan melangkah melaluinya baris demi baris. Anda juga memiliki opsi untuk meningkatkan keterbacaan file JavaScript yang dikompilasi atau diperkecil, dan kamu bisa men-debug sumber daya yang berbeda (JavaScript, ekstensi, dll.) Satu per satu.

Firefox dan Chrome DevTools menyediakan semua fungsionalitas ini, sehingga Edge tidak menawarkan pengalaman debug yang luar biasa, tetapi Edge memberikan pengguna alat yang solid dan andal yang setara dengan pesaingnya..

Lihatlah Komunikasi Browser-Server

Itu Jaringan alat (Pintasan: CTRL + 4) telah sepenuhnya dirancang ulang untuk Microsoft Edge sejak Internet Explorer 11. Dengan bantuan alat praktis ini Anda dapat ikuti komunikasi antara server dan browser, dan memeriksa permintaan individu.

Kamu bisa saring hasil berdasarkan tipe konten seperti stylesheet, gambar, media, font, XHR, dan banyak lainnya. Anda juga bisa debug AJAX dengan bantuan alat Jaringan.

Tab Jaringan Edge dan Firefox menawarkan kemampuan dan antarmuka pengguna yang sangat mirip. Keduanya memiliki panel bilah sisi yang mudah digunakan yang memungkinkan Anda untuk melihat pada tajuk HTTP sumber daya, badan HTTP, parameter, cookie terkait, dan pemilihan waktu item demi item.

Tab Jaringan Chrome DevTools tidak memiliki panel seperti ini, tetapi jika Anda mengklik permintaan satu-per-satu, Anda dapat melihat informasi yang sama. Ini solusi yang kurang intuitif.

Lacak Halaman Lambat

Itu Performa tab (Shortcut: CTRL + 5) membantu Anda memahami alasan di balik halaman web yang lambat. Dengan alat Kinerja, Microsoft melakukan lompatan besar ke depan dengan menggabungkan yang sebelumnya Responsiveness dan Profiler UI alat untuk membuat tampilan ujung ke ujung dari semua skrip Anda, dan memvisualisasikan kinerja.

Alat praktis ini memberi Anda laporan tentang berbagai jenis penggunaan CPU, memberi Anda wawasan tentang cat bingkai situs Anda, dan juga memungkinkan mengisolasi berbagai skenario pengguna dengan mengatur label pada timeline.

Selama proses pengujian kami menemukan bahwa alat Kinerja di Edge memberi kami informasi lebih lanjut tentang masalah kecepatan daripada Pengembang Firefox atau Chrome DevTools. Antarmuka pengguna tab Performance di Edge dirancang dengan sangat baik, membantu kami dengan banyak isyarat visual, dan ini relatif mudah digunakan. Jika Anda ingin tahu lebih banyak tentang cara menggunakannya, baca Dokumen terperinci.

Diagnosis Masalah Memori

Itu Ingatan alat (Pintasan: CTRL + 6) memungkinkan untuk menemukan kebocoran memori itu juga bisa memperlambat halaman web Anda, apalagi bisa berdampak pada stabilitas dari situs Anda.

Dengan bantuan grafik yang bagus Anda dapat dengan mudah memahami di mana penggunaan memori Anda tumbuh, dan Anda dapat membuat snapshot pada titik-titik tertentu yang memungkinkan untuk menganalisis penggunaan memori. Anda juga bisa bandingkan dua foto yang dibuat pada titik yang berbeda dari siklus hidup halaman untuk memahami perbedaan di antara mereka.

Chrome DevTools juga memiliki profiler memori bagus di bawah tab Profiles, sementara Firefox Developer tidak menyediakan fitur ini secara default, tetapi Anda dapat mengunduh dan menginstal addons seperti ini jika Anda mau. Profil memori Chrome DevTools cukup canggih dan menawarkan lebih banyak fitur daripada Edge, misalnya memungkinkan Anda untuk melakukannya merekam alokasi objek JavaScript dari waktu ke waktu yang dapat membantu Anda mengisolasi kebocoran memori.

Uji Situs Anda Pada Berbagai Ukuran Layar

Itu Persaingan alat (Pintasan: CTRL + 7) memungkinkan Anda untuk menguji situs Anda dalam keadaan yang berbeda. Anda dapat memilih dari dua profil browser, Desktop dan Windows 10 Mobile, dan dari banyak agen pengguna yang berbeda termasuk semua versi desktop dan mobile Internet Explorer kembali ke IE6, di samping banyak pesaing Edge, Chrome, Firefox, Safari, dll..

Sangat menarik bahwa Anda memiliki pilihan untuk mengambil lihat halaman Anda sebagai Bing Bot. Anda juga bisa meniru GPS, dan mengatur resolusi dan orientasi yang berbeda.

Alat Pengembang Firefox tidak memiliki alat emulasi perangkat, tetapi Chrome DevTools memiliki emulator canggih sehingga Edge tidak dapat bersaing dengannya..

Misalnya layar emulasi Chrome memiliki kisi akurat tempat tampilan yang ditiru dimasukkan, dan Anda tidak hanya dapat memilih dari profil peramban dan agen pengguna, tetapi juga dari banyak perangkat seperti versi yang berbeda iPhone atau Samsung Galaxy dan banyak lainnya. Emulator Chrome DevTools juga memiliki fungsi Opsi pembesaran dan Anda dapat menguji situs Anda di jaringan yang berbeda seperti 3G, 4G, DSL, WiFi, dll.

Ringkasan

Secara keseluruhan, F12 Dev Tools dari Microsoft Edge tampaknya sangat bagus. Ini memberikan fitur yang sangat mirip dengan toolkit pengembangan web populer dari browser modern lainnya. Ada dua area di mana Edge's F12 Dev Tools cukup kuat: antarmuka pengguna itu sungguh intuitif, mudah digunakan, dan dirancang dengan baik, dan alat diagnostik kinerja.

Untuk dua fitur ini mungkin perlu dipertimbangkan untuk beralih ke, atau setidaknya menguji Edge. Kelemahan terbesar adalah kurangnya kemungkinan untuk menyematkan alat dev ke bagian bawah layar, tapi mari kita berharap Microsoft akan segera memperbaiki masalah ini.