Advertisement
  1. Code
  2. Tools & Tips

Alat IE11 F12 Baru

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Rossie (you can also view the original English article)

Disclaimer: Saya bekerja untuk Microsoft Corporation.

Kembali pada bulan Januari, saya memandu Anda melalui fitur Alat Pengembang F12 Internet Explorer 10. Rilis Windows 8.1 terbaru dari Microsoft, tidak hanya pembaruan ke Internet Explorer (sekarang di v11) tetapi juga penyegaran baru ke F12 Developer Tools. Yang terakhir ini sangat penting karena pengembang bergantung pada mereka untuk memecahkan masalah terkait situs dari dalam IE. Sampai sekarang alat-alat telah memecahkan sebagian besar kasus-kasus debugging tetapi jelas bahwa sebagai situs menjadi lebih kompleks, pengembang membutuhkan alat yang lebih kaya untuk bekerja. Pembaruan ini bertujuan untuk membawa tampilan segar dan kemampuan diperluas untuk pengembang dengan fokus yang kuat pada berikut:

  • interface pengguna yang diperbarui, bersih.
  • Responsif, Memori, dan Emulasi alat-alat baru.
  • Baru dan peningkatan fungsi dalam alat yang ada.
  • Mempermudah dan mempercepat alur kerja.

Beberapa pembaruan hanyalah fitur kenyamanan yang dimaksudkan untuk menyederhanakan alur kerja pengembang (misalnya: breadcrumbs elemen) sementara beberapa lainnya akan memiliki dampak dramatis pada peningkatan kinerja dan rendering aplikasi web.

Dalam posting ini, kita akan pergi melalui beberapa update terbaru dan fitur-fitur dari IE11 F12 Developer Tools dan dalam beberapa kasus, aku akan menunjukkan perbedaan jelas dalam fitur dari rilis sebelumnya.


UI Reboot

Sejak awal, alat F12 telah menyimpan UI yang cukup konsisten menggunakan menu dropdown dan metafora berbasis tab untuk menyajikan berbagai opsi yang tersedia. Tetapi beberapa nits yang sepertinya selalu menghalangi adalah hal-hal seperti alat yang muncul ke jendela mereka sendiri selama sesi debug dan tab mengambil real estate vertikal yang berharga. Dengan IE11, alat F12 telah sangat didesain ulang untuk membuat UI lebih intuitif memanfaatkan sistem navigasi berbasis grafis yang diposisikan sebagai pita bergulir di sisi kiri panel debugger:

ribbon

Menu yang digunakan untuk melapisi bagian atas alat telah dihapus untuk memberikan kejelasan yang lebih baik ke antarmuka debugging, serta untuk membebaskan real estate untuk bekerja. Selain itu, desain debugger itu sendiri telah sangat segar melanggar dari gaya UI Windows 7 untuk Windows 8 lebih modern tampilan dan nuansa. Anda dapat melihat perbedaan besar di bawah ini:

win7ui
win8ui

Interface pengguna baru jelas lebih konsisten dengan unsur-unsur modern yang diperkenalkan pada Windows 8.


DOM Explorer

Meskipun alat inspektur DOM asli memberikan pengalaman yang layak, tetapi tidak memiliki beberapa fitur utama. Poin utama bagi saya adalah kurangnya pembaruan DOM hidup, urutan tampilan gaya CSS dan ketidakmampuan untuk melihat acara yang melekat pada elemen DOM. Untungnya, ini sekarang telah dibahas dalam pembaruan ini.

Karena saya banyak memfokuskan pada JavaScript, menemukan peristiwa yang dilampirkan sangat mengecewakan karena memerlukan banyak kode debug berbasis konsol dan coba-coba untuk memalsukan acara yang disebut/metode kombo. Melihat screenshot di bawah ini, Anda dapat melihat bagaimana saya bisa mengklik pada elemen tertentu, melihat acara yang melekat padanya dan metode yang akan dipanggil ketika acara tersebut diaktifkan. Ini adalah penghemat waktu yang sangat besar dari perspektif debugging.

domevents

Dan sementara itu mungkin tampak jelas, sedikit perubahan tetapi penting untuk cara alat menampilkan CSS diterapkan pada elemen, baru saja membuat hal-hal jauh lebih mudah. Sebelum pembaruan ini, alat F12 akan menampilkan gaya yang diwariskan terlebih dahulu memaksa Anda untuk menggulir ke bawah gaya panel untuk mendapatkan gaya yang sebenarnya digunakan untuk elemen.

f12old-css

Tim telah memperbarui tampilan sehingga gaya terbaru ditampilkan pertama yang menurut saya jauh lebih masuk akal, terutama dari perspektif debugging:

f12new-css

Beberapa lainnya besar fitur yang pasti baik untuk memiliki adalah:

  • Kemampuan untuk klik kanan pada setiap elemen pada halaman dan memeriksa bahwa elemen.
  • Menyeret elemen ke lokasi lain dari dalam DOM explorer.
  • Breadcrumb elemen yang membuat menavigasi hirarki elemen secara substansial lebih mudah.
  • Intellisense, untuk akses mudah ke aturan style.

Sebelumnya, Anda harus membuka alat F12, klik pada panah inspektur DOM dan klik pada elemen. Ini menyederhanakan hal-hal sedikit dan membawa pengalaman itu setara dengan alat debugging lainnya.

Breadcrumb memberikan cara yang intuitif untuk menyaring struktur hierarki elemen DOM, memungkinkan Anda untuk dengan mudah mengeklik bagian mana pun dari breadcrumb untuk menarik elemen induk individu: 

breadcrumb

Dengan fungsi Intellisense-gaya baru, ketika Anda mengedit gaya atau menambahkan aturan baru, Anda segera disajikan dengan popup yang menawarkan akses cepat ke aturan CSS dan nilai-nilai. Sementara beberapa dari Anda mungkin CSS Ensiklopedi, saya untuk satu menghargai tidak harus mengingat semua dari mereka. :)

intellisense-css

Terakhir, dengan DnD dalam DOM explorer, Anda dapat secara interaktif menguji bagaimana elemen Anda akan terlihat dan bereaksi ketika Anda menggeser posisi mereka dalam tata letak halaman. Perubahan dilakukan secara langsung, sehingga Anda menerima umpan balik segera saat Anda memposisikan ulang elemen Anda.


Mengatasi Respon UI 

Ada BANYAK lebih banyak kode yang ditempatkan di sisi klien daripada sebelumnya. Kerangka kerja seperti Ember.js dan Angular membuatnya jauh lebih mudah bagi pengembang untuk membangun aplikasi web dan pengembang halaman tunggal yang memanfaatkan fitur berbasis HTML5 untuk membangun permainan imersif yang memerlukan frekuensi gambar tinggi dan waktu respons. Dengan itu, datang secara keseluruhan baru seperangkat pertimbangan sekitar performa halaman dan alat-alat F12 baru yang menawarkan alat baru untuk membantu Anda profil dan mengukur respon pengguna antarmuka. Alat UI responsif ini profiler yang memungkinkan Anda untuk mengukur framerates dan penggunaan CPU untuk menentukan masalah kinerja UI.

Dengan menendang profiler, saya dapat melacak bagaimana saya bereaksi CPU untuk halaman saya dan apa throughput visual (AKA frame-per-detik) sebagai titik berbeda dalam halaman yang memuat siklus.

ui-response

Panel detail Timeline menawarkan kepada saya detail yang lebih baik tentang bagaimana peristiwa tertentu atau permintaan jaringan memengaruhi kinerja halaman yang memungkinkan saya untuk menggali lebih dalam masalah apa pun dan membuat penyesuaian untuk meningkatkan kinerja situs saya.

timeline

Dengan melihat setiap elemen dari timeline Anda dapat melihat aksi bagaimana tertentu, misalnya styling, dapat mempengaruhi kinerja render.

timer

Anda dapat membayangkan betapa berharganya data ini, terutama bagi pengembang game yang ingin memanfaatkan kemampuan browser asli untuk bermain game dan digunakan untuk memiliki alat debugging yang kuat di alat pengembangan berbasis plugin lainnya seperti Flash.


Script Debugger

Dari semua perubahan, yang paling berdampak bagi saya adalah pada debugger skrip, terutama karena mereka membantu mencegah kemarahan yang saya rasakan ketika saya akan menggunakannya. Itu adalah terutama UX masalah yang saat ini Anda memilih untuk menjalankan debugger, panel alat seluruh akan pop dari browser viewport dan ke jendela popup berdiri sendiri sendiri. Itu adalah pengalaman yang menggelegar untuk sedikitnya. Pembaruan ini menyelesaikan itu dan memastikan bahwa debugger tetap di tempatnya.

Peningkatan hebat lainnya adalah penggunaan metafora tab untuk menampilkan setiap file terbuka yang Anda debug. Versi sebelumnya dari alat memaksa Anda untuk membuka kembali setiap file yang Anda butuhkan untuk men-debug. Versi baru menunjukkan tab untuk setiap file yang Anda bekerja dengan membuat navigasi secara substansial lebih mudah.

debug-tabs

Selain itu, opsi yang umumnya terkubur dalam menu konteks sekarang disorot dengan tegas dan mudah ditemukan. Sungguh menakjubkan berapa kali para pengembang terkejut ketika saya menunjukkan kepada mereka fungsi cetak cantik untuk memformat JavaScript meskipun sudah ada sejak IE8. Fitur ini sekarang disorot melalui ikon di bagian atas panel debugging di samping ikon wordwrap.

Last but not least, lupa tentang console.log(). Alat-alat baru sekarang mendukung Tracepoints dengan mudah memungkinkan Anda untuk memantau nilai-nilai spesifik dengan cara yang sama Anda melalui console.log().


Analisis Memori

Mem-posting masalah memori selalu menjadi hambatan terutama jika itu masalah degradasi memori yang lambat. Alat F12 baru bertujuan untuk mengatasi ini dengan profiler memori baru. Alat ini memungkinkan Anda mengambil snapshot dari situs Anda atau penggunaan memori aplikasi selama jangka waktu yang memungkinkan Anda untuk menentukan tindakan atau area mana dari aplikasi Anda yang mungkin menjadi akar penyebab masalah tersebut.

memory

Dengan membuat snapshot baseline dari jejak memori Anda diikuti dengan snapshot berikutnya, Anda dapat membandingkan data yang dikumpulkan untuk menentukan jumlah objek aktif dan jenis objek apa yang bertahan. Ini termasuk elemen HTML, node DOM dan objek JavaScript dan Anda dapat meneliti perbandingan foto untuk melihat perubahan dalam memori di antara mereka untuk objek individual.

memory-detail

Meniru Perangkat Lain

Anda mungkin terlalu akrab dengan dropdown kompleks yang disebut "Mode Browser" dan "Mode Dokumen". Mereka dimaksudkan untuk membantu pengembang memecahkan masalah yang terkait dengan versi Internet Explorer non-modern. Pada kenyataannya, mereka agak membingungkan untuk digunakan dan hanya menawarkan dukungan pengujian marjinal untuk IEs non-modern. Dengan pembaruan baru ini, alat F12 telah mempersingkat ini untuk membantu pengembang memfokuskan pengujian pada versi IE yang paling sesuai standar, terutama jika situs mereka saat ini berjalan dalam beberapa mode kompatibilitas.

Dengan mengubah mode dokumen menjadi "Edge", pengembang dapat memaksa situs mereka untuk merender dalam mode standar terbaru yang didukung oleh versi IE tersebut dan bekerja untuk membuat perubahan berbasis standar yang diperlukan agar situs mereka merender lintas-browser. Selain itu, tautan informasi disediakan langsung di alat yang membawa pengembang langsung ke modern.IE, sumber online yang menawarkan pemindai untuk masalah kompatibilitas umum, mesin virtual untuk berbagai versi Internet Explorer, dan praktik terbaik untuk memastikan situs kompatibilitas dalam versi modern IE.

Fitur baru yang secara eksplisit menargetkan perangkat seluler dan tablet adalah simulasi Geolokasi. Ini memungkinkan Anda memanfaatkan API Geolokasi meskipun perangkat Anda tidak terhubung.


Pembaruan Hebat

Ini adalah pembaruan besar untuk seperangkat alat yang telah melayani kita dengan baik, tetapi pasti membutuhkan beberapa sprucing. Ada fokus yang jelas dalam menawarkan alat yang membantu Anda memecahkan masalah terkait kinerja, sesuatu yang sangat penting terutama dengan tren yang mengarah ke satu laman, aplikasi bergaya asli.

Saya telah melakukan yang terbaik untuk menggulirkan fitur-fitur baru yang hebat ditambahkan, tetapi untuk benar-benar terperangkap pada fungsionalitas lengkap yang disediakan di IE11 F12 Developer Tools, periksa panduan yang ditawarkan oleh tim.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.