DevTools Showdown Edge's F12 vs Firefox vs Chrome

Alat Pembangun Microsoft Edge, penyemak imbas lalai baru Windows 10 mendapat reka bentuk moden dan beberapa ciri baru berbanding dengan pendahulunya, Internet Explorer 11's F12 Dev Tools.

Persoalan sama ada alat dev Microsoft Edge mengukur sehingga pesaingnya yang popular - alat dev di pelayar moden yang lain seperti Mozilla Firefox dan Google Chrome - secara semulajadi timbul dalam minda banyak pemaju.

Dalam jawatan ini kami cuba menjawab soalan ini, dan mengetahui jika Edge's F12 Dev Tools benar-benar bernilai untuk digunakan. Kami akan membandingkan ciri-cirinya kepada Alat Pembangun Firefox dan DevTools Google Chrome.

Buka Alat Dev

Menekan F12 membuka alat pembangun dalam semua 3 kes: Alat Pembangun di Firefox, DevTools di Chrome, dan Alat Dev Dev pada Microsoft Edge. Ini adalah pintasan papan kekunci di mana nama rasmi Edge Tools F12 Dev datang dari.

Apabila anda membuka Alat Dev Edge, anda boleh mengalami sekaligus salah satu kelemahan yang paling terkenal: pada masa ini tidak mungkin untuk mengetatkan alat ke tetingkap yang sedia ada. Walaupun anda boleh mengikuti apa yang berlaku di skrin pada Alat Pembangun Firefox dan Chrome DevTools dengan menyematkan tetingkap alat dev ke bahagian bawah skrin, anda (pada masa ini) tidak boleh melakukan perkara yang sama dengan Edge.

Pemaju Microsoft mendakwa mereka akan membetulkan isu ini dalam kemas kini masa depan.

Periksa DOM

The DOM Explorer alat (Pintasan: CTRL + 1) ialah tab pertama Alat Dev Dev Microsoft Edge. Susun aturnya dan reka bentuk keseluruhannya agak serupa dengan Elemen tab Chrome dan Inspektor tab di Firefox, namun kemampuannya saling berbeza.

Di Edge, anda boleh melihat dokumen HTML yang diberikan, gaya CSS yang berkaitan, dan pengendali acara yang didaftarkan pada setiap elemen. Anda juga boleh mencari grafik kecil mengenai model kotak CSS dengan nilai yang dikira, sudah diketahui dengan baik dari kedua-dua pelayar bersaing.

Awak boleh bereksperimen dengan peraturan CSS dengan memotong yang terkini dan menambah yang baru, dan anda boleh melihat anda meringkaskan perubahan pada subtab yang berasingan dipanggil “Perubahan” (ia terletak di sebelah kiri). Yang terakhir ini adalah ciri yang tidak dibina dalam Firefox Developer atau DevTools Chrome. Ia boleh memberikan rekap cepat kepada pengguna, jadi itu adalah pilihan yang sangat berguna.

Terdapat beberapa ciri dalam Alat Pembangun Firefox yang bukan Edge, atau Google Chrome yang ada sekarang, tetapi boleh membantu kehidupan pereka: alat fon dan animasi penganalisis.

Di tepi ada a pemetik warna sejuk walaupun itu mungkin memberi pampasan kepada pengguna untuknya.

Berinteraksi dengan JavaScript

The Konsol tab (Pintasan: CTRL + 2) di Microsoft Edge membolehkan anda berinteraksi dengan JavaScript laman web anda, sama seperti di Firefox dan Alat Dev Chrome. Semua tiga membolehkan anda mengikuti ralat JavaScript secara langsung dan anda juga boleh menganalisisnya dengan memasukkan input anda sendiri.

Alat Konsol Edge's F12 Dev Tools mempunyai bagus ciri autocomplete yang membantu anda dengan arahan, namun nampaknya kurang berpengetahuan berbanding dengan yang ada di Firefox dan Alat Dev Chrome.

Hujung memisahkan Kesilapan, Amaran, dan Mesej yang merupakan bantuan besar, walaupun bukan sesuatu yang tidak mempunyai dua toolkit lain.

Konsol Firefox seolah-olah menjadi yang paling profesional dari tiga alat dev, kerana ia juga secara berasingan menunjukkan jenis masalah lain: rangkaian, CSS, ralat keselamatan dan mesej log, dan membolehkan anda berinteraksi dengan ini melalui Antara muka konsol, bukan hanya dengan kesilapan JavaScript.

Fahami Apa Yang Anda Lakukan

The Debugger alat (Pintasan: CTRL + 3) membantu anda memahami apa yang sedang berlaku pada kod anda semasa mencari potensi pepijat. Anda boleh menetapkan jam tangan dan titik putus, dan melihat susunan panggilan.

Panel Watches memaparkan nilai-nilai variabel, mod Callstack menunjukkan rantai panggilan fungsi yang membawa kepada keadaan semasa, dan mod Breakpoints menunjukkan senarai titik putus yang telah anda tetapkan.

Alat F12 Edge Edge membolehkan anda jeda kod anda di tengah-tengah pelaksanaan, dan melangkahinya mengikut baris. Anda juga mempunyai pilihan untuk meningkatkan kebolehbacaan fail JavaScript yang dikumpulkan atau diminimumkan, dan anda boleh debug sumber yang berbeza (JavaScript, sambungan, dan sebagainya) satu persatu.

Firefox dan Chrome DevTools menyediakan semua fungsi ini, jadi Edge tidak menawarkan pengalaman debugging yang luar biasa, tetapi menyediakan pengguna dengan alat yang padat dan handal yang setara dengan pesaingnya.

Ambil Perhatikan Pada Komunikasi Pelayar-Pelayan

The Rangkaian alat (Pintasan: CTRL + 4) telah direka semula sepenuhnya untuk Microsoft Edge sejak Internet Explorer 11. Dengan bantuan alat berguna ini, anda boleh ikut komunikasi antara pelayan dan penyemak imbas, dan memeriksa permintaan individu.

Awak boleh menapis hasil mengikut jenis kandungan seperti stylesheet, imej, media, fon, XHR, dan banyak lagi. Anda juga boleh debug AJAX dengan bantuan alat Rangkaian.

Tapak Edge dan Firefox Rangkaian menawarkan keupayaan yang agak serupa dan antara muka pengguna. Kedua-duanya mempunyai panel sidebar yang mesra pengguna yang membolehkan anda melihat pengepala HTTP sumber yang dipilih, badan HTTP, parameter, kuki yang berkaitan dan item masa item mengikut item.

Tab Rangkaian DevTools 'Chrome tidak mempunyai panel seperti ini, tetapi jika anda mengklik permintaan satu demi satu, anda dapat melihat maklumat yang sama. Ia adalah penyelesaian yang kurang intuitif walaupun.

Jejaki Laman Lamban

The Prestasi tab (Pintasan: CTRL + 5) membantu anda memahami sebab di sebalik laman web yang perlahan. Dengan alat Persembahan Microsoft mengambil lompatan besar dengan menggabungkan sebelumnya Tanggungjawab UI dan Profiler alat untuk membuat pandangan hujung-ke-akhir dari semua skrip anda, dan memvisualkan prestasi.

Alat berguna ini memberikan laporan kepada anda pelbagai jenis penggunaan CPU, memberikan anda wawasan ke dalam cat bingkai tapak anda, dan ia juga mungkin untuk mengasingkan senario pengguna yang berbeza dengan menetapkan label pada garis masa.

Semasa proses ujian, kami mendapati bahawa alat Persembahan di Edge memberikan kami maklumat lanjut mengenai isu kelajuan daripada pemaju Firefox atau DevTools Chrome. Antara muka pengguna tab Performance in Edge agak direka dengan baik, membantu kami dengan banyak isyarat visual, dan ia agak mudah digunakan. Jika anda ingin mengetahui lebih lanjut mengenai cara menggunakannya, baca Dokumen terperinci.

Mengesan Masalah Memori

The Memori alat (Pintasan: CTRL + 6) menjadikannya mungkin mencari kebocoran memori yang juga boleh melambatkan laman web anda, lebih-lebih lagi boleh kesan kestabilan laman web anda.

Dengan bantuan graf yang bagus, anda dapat dengan mudah memahami di mana penggunaan memori anda semakin meningkat, dan anda boleh membuat snapshot pada titik tertentu yang memungkinkan untuk menganalisis penggunaan memori. Anda juga boleh bandingkan dua gambar yang dibuat pada titik yang berbeza dari kitaran hayat halaman untuk memahami perbezaan di antara mereka.

DevTools Chrome juga mempunyai profiler memori yang bagus di bawah tab Profil, manakala Pemaju Firefox tidak menyediakan ciri ini secara lalai, tetapi anda boleh memuat turun dan memasang addons seperti ini jika anda mahu. Profiler memori dari DevTools Chrome cukup maju dan menawarkan lebih banyak ciri daripada Edge, misalnya ia membolehkan Anda rekod peruntukan objek JavaScript dari masa ke masa yang boleh membantu anda mengasingkan kebocoran memori.

Uji Tapak Anda Di Saiz Skrin yang Berbeza

The Emulasi alat (Pintasan: CTRL + 7) membolehkan anda menguji tapak anda dalam keadaan yang berbeza. Anda boleh memilih daripada dua profil pelayar, Desktop dan Windows 10 Mobile, dan dari banyak agen pengguna yang lain termasuk semua versi desktop dan mudah alih Internet Explorer kembali ke IE6, di samping banyak pesaing Edge, Chrome, Firefox, Safari, dll..

Ia menarik bahawa anda mempunyai pilihan untuk mengambil lihat halaman anda sebagai Bing Bot. Anda juga boleh meniru GPS, dan tetapkan resolusi dan orientasi berbeza.

Alat Pemaju Firefox tidak mempunyai alat emulasi peranti, tetapi Chrome DevTools mempunyai emulator canggih seperti itu yang Edge tidak dapat bersaing dengannya.

Sebagai contoh skrin emulasi Chrome mempunyai grid yang tepat di mana pandangan yang ditiru dimasukkan dalam, dan anda bukan sahaja boleh memilih dari profil penyemak imbas dan ejen pengguna, tetapi juga dari banyak peranti seperti versi yang berbeza daripada iPhone atau Samsung Galaxy dan banyak lagi. Emulator Chrome DevTools 'juga mempunyai berguna Pilihan zum dan anda boleh menguji tapak anda pada rangkaian yang berbeza seperti 3G, 4G, DSL, WiFi, dan sebagainya.

Ringkasan

Pada keseluruhannya, Alat Edge F12 Devices Edge Edge kelihatannya mengagumkan. Ia menyediakan ciri yang hampir sama dengan toolkit pembangunan web yang popular dari pelayar moden yang lain. Terdapat dua bidang di mana Edge's F12 Alat Dev agak kuat: antaramuka pengguna Itu betul-betul intuitif, mesra pengguna, dan direka dengan baik, dan juga alat diagnostik prestasi.

Untuk kedua-dua ciri ini mungkin bernilai untuk mempertimbangkan beralih kepada, atau sekurang-kurangnya Ujian Edge. Kekurangan terbesar adalah kekurangan kemungkinan untuk mengetatkan alat dev ke bahagian bawah skrin, tapi mari kita berharap Microsoft akan segera menyelesaikan masalah ini.