Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

A Peek di Alat Pengembang Internet Explorer

by
Difficulty:IntermediateLength:LongLanguages:

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

Saya benci debugging, dan belum pernah bertemu pengembang yang berpendapat sebaliknya. Suatu hambatan bila harus melalui kode Anda dan mencari tahu mengapa itu rusak. Dan yang paling penting, Merupakan pengakuan bahwa kode saya rusak dan saya tidak sempurna! Benar saja, kataku!

Serius meskipun, bug merupakan bagian alami dari proses pengembangan web, dan, sementara kita mungkin membenci mereka, kita tentu harus berurusan dengan mereka. Pengembang front-end tidak selalu memiliki alat debugging kaya seperti platform dan bahasa lain. Pada hari-hari baik, waspada() adalah teman Anda dan metode penting (maafkan kata-kata) untuk memecahkan masalah kode. Dan debugging kode sisi klien memiliki serangkaian tantangan unik karena beragam teknologi yang sedang dimainkan. Jika Anda memikirkannya, men-debug halaman, terutama yang dinamis melibatkan begitu banyak bagian yang bergerak yang dapat mempengaruhi render. Anda memiliki Document Object Model (DOM), JavaScript, CSS, lalu lintas jaringan, header HTTP, dan banyak lagi teknologi yang semuanya bekerja untuk menghasilkan halaman dan dalam banyak kasus berinteraksi dan mempengaruhi satu sama lain.

Untungnya, waktu telah berubah dan semua browser utama memiliki alat bawaan yang sangat meningkatkan fitur pemecahan masalah untuk pengembang. Saya memberikan banyak kredit kepada Joe Hewitt untuk mendorong tools landscape  ke depan. Dia menciptakan Firebug pada tahun 2006. Menurut pendapat saya, itu menjadi dasar dari apa alat peramban yang sebenarnya seharusnya.

alt text

Sejak itu, kita telah melihat Firebug berkembang pesat dan berfungsi sebagai dasar bagi orang lain untuk bekerja dan sekarang memiliki alat yang hebat di Chrome, Internet Explorer, Safari, dan Opera.

Untuk artikel ini, saya akan fokus pada Developer Tools Internet Explorer dan fungsi yang disediakannya. Fungsionalitas yang akan saya bahas akan sangat akrab bagi siapa saja yang menggunakan debugger berbasis browser tetapi saya ingin membawa fokus ke alat-alat Internet Explorer untuk memastikan bahwa ada pemahaman yang baik tentang apa yang sebenarnya tersedia.


Ada Dimana Kita?

Mari saya mulai dengan mengakui bahwa saya tahu bahwa IE adalah browser yang Anda sukai untuk dibenci. Saya mengerti. Faktanya adalah bahwa ini adalah browser utama yang penting bagi banyak pengunjung situs dan itu berarti Anda akan menargetkannya dan juga perlu kode debug di dalamnya cepat atau lambat. Apa yang mengejutkan adalah berapa banyak pengembang yang tidak tahu bahwa kapal IE dengan alat pengembang atau yang lebih buruk yang mereka pikir mereka masih perlu mengunduh Toolbar Pengembang Internet Explorer.

Alat pengembang biasanya disebut "F12 Developer Tools" karena menekan tombol "F12" pada keyboard Anda akan membukanya saat Anda berada di Internet Explorer (cukup menarik, menekan F12 juga meluncurkan Firebug dan Alat Pengembang Chrome).

alt text

Alat pengembang juga dapat diakses melalui menu "Tools" di bawah label "F12 developer tools".

alt text

Hal utama yang saya tekankan adalah bahwa mereka disertakan dengan Internet Explorer (dan sejak IE8) sehingga tidak perlu menginstal plugin untuk mendapatkan alat dev. Juga, sementara mereka disebut "F12 Developer Tools", untuk keperluan artikel ini, saya akan menjatuhkan "F12" dan menyelamatkan saya beberapa keystrokes.

Developer tools menyediakan pengembang dan desainer dengan seperangkat alat yang kaya yang dapat menangani banyak kasus-kasus penggunaan debug dan pemeriksaan umum yang akan mereka hadapi selama pekerjaan mereka. Kemampuan seperti:

  • JavaScript debugging
  • DOM inspection dan manipulation
  • Pembaruan gaya CSS dan tata letak halaman yang sedang diperbarui
  • Jaringan traffic logging
  • Pembuatan skrip

Ini adalah fitur yang setara untuk kursus saat ini dan penting untuk menentukan apa yang melanda halaman Anda. Di atas ini, alat pengembang menyediakan kemampuan untuk menguji situs Anda dalam versi Internet Explorer yang berbeda dengan mengubah mode browser:

alt text

Pengujian untuk beberapa versi IE secara tradisional telah menjadi sakit kerajaan di tuckus; Fitur ini bertujuan untuk menurunkan gesekan memastikan bahwa situs Anda berfungsi di berbagai versi IE.

Kemampuan tambahan termasuk hal-hal seperti:

  • Memvalidasi markup terhadap layanan validasi W3C untuk HTML dan CSS
  • Kode Javascript yang dimurnikan atau dikaburkan untuk pembacaan
  • Color picker
  • Dan banyak lagi...
  • Ada banyak hal yang tersedia jadi mari kita tinjau banyak fitur utama.

JavaScript Debugging

Saya fokus banyak membantu pengembang menggunakan teknik pengembangan berbasis standar untuk memastikan situs mereka bekerja dengan baik di IE. Seperti yang Anda bayangkan, saya menghabiskan banyak waktu menganalisis kode, terutama JavaScript. Jadi, untuk melacak bug yang aneh, saya memerlukan debugger JS yang dapat memungkinkan saya menganalisis kode dalam berbagai cara.

Membuat kode Mudah Dibaca

Salah satu fitur terpenting bagi saya adalah kemampuan untuk menduplikasi JavaScript. Saya tidak tahu pengembang apa pun yang tidak mengecilkan kode produksi mereka saat ini. Dan itu benar-benar hal yang tepat untuk dilakukan, tetapi, ketika saya perlu men-debug sesuatu di situs produksi - terutama di mana saya tidak memiliki akses ke kode sumber - dapat mendongkrak kode itu tidak ternilai. Ya, ada alat online seperti JS Beautify yang dapat melakukan itu tetapi itu akan memaksa saya untuk menyalin dan menempelkan kode ke dalamnya untuk menyamarkan kode. Memiliki kemampuan ini dibangun tepat dalam menghemat waktu saya. Misalnya, saya melihat versi jQuery yang sudah dikecilkan:

alt text

Melalui tool icon, saya dapat mengakses opsi "Format JavaScript" yang akan menyamarkan kode sumber jQuery yang diperkecil dan memberi saya kode yang jauh lebih mudah dibaca:

alt text

Seperti yang Anda lihat pada gambar di atas, kode ini tentunya lebih mudah untuk digunakan. Hal keren lainnya tentang fitur ini adalah setelah Anda mengaktifkannya, ia akan terus menyamarkan ulang file JS Anda selama sesi Anda.

Satu peringatan adalah bahwa proses penyederhanaan tidak akan mengembalikan jQuery ke sumber aslinya. Tidak ada layanan yang saya tahu bisa melakukan itu tetapi peta sumber akan menyelesaikan masalah itu di masa mendatang. Pastikan untuk membaca artikel di peta sumber oleh Sayanee Basu yang baru saja saya tautkan untuk intro yang hebat tentang topik ini.

Melangkahi Kode Anda

Setelah kode dapat dibaca, itu membuatnya lebih mudah untuk menentukan aliran sumber. Pada titik ini, saya dapat mengatur breakpoints pada titik-titik logis dalam kode untuk mengisolasi masalah saat Anda melangkah melaluinya. Dan tentu saja, Anda dapat mengatur beberapa breakpoint di beberapa file sumber.

alt text

Anda juga dapat menentukan breakpoint bersyarat yang memungkinkan Anda untuk memecahkan aliran kode berdasarkan nilai tertentu.

alt text

Seperti yang diharapkan, Anda dapat masuk ke, keluar dari, atau melalui metode apa pun Anda menyediakan kontrol granular yang Anda butuhkan untuk memeriksa kode dan juga tidak membuang waktu yang berharga. Yang penting untuk diperhatikan adalah ketika Anda melintasi kode Anda, tumpukan panggilan dapat diakses yang memungkinkan Anda untuk melihat bagaimana Anda sampai ke metode spesifik atau file JavaScript dan kembali ke metode atau file tersebut untuk memeriksa kode:

alt text

Selain itu, ini membantu untuk mengisolasi jalur kode tak terduga yang mungkin menjadi titik masalah.

Informasi adalah kunci untuk memahami apa yang terjadi dan alat pengembang berfungsi memberi Anda opsi untuk menentukan apa yang ingin Anda lihat. Jadi bersama dengan panggilan stack, Anda mendapatkan informasi tentang variabel dalam lingkup saat ini melalui tab "Lokal":

alt text

Atau, Anda dapat menentukan daftar tontonan Anda sendiri (melalui tab Tonton) sehingga Anda dapat melacak bagaimana nilai variabel berubah secara dinamis berdasarkan eksekusi kode. Hal yang hebat adalah alat tersebut memberi Anda fleksibilitas untuk mengubah nilai-nilai di kedua daftar sehingga Anda dapat melihat bagaimana hal itu memengaruhi aplikasi Anda.

Dan jangan lupakan Konsol. Tidak ada debugger yang berguna tanpa kesalahan konsol ke output dan memungkinkan Anda melakukan debug secara interaktif:

alt text

Konsol akan menampilkan kesalahan umum yang terkait dengan halaman Anda termasuk masalah JavaScript dan markup. Anda juga dapat memasukkan perintah untuk berinteraksi dengan halaman serta menggunakan objek konsol dalam kode JavaScript Anda untuk menampilkan pesan ke konsol.

Mengevaluasi Kinerja Kode

Semua hal di atas sangat bagus dan tentu saja berharga. Aspek debugging yang sering diabaikan adalah kinerja kode. Jarang sekali saya berbicara dengan pengembang yang menyebutkan bagaimana mereka mengevaluasi kode mereka untuk menentukan kemacetan dalam metode yang berjalan lambat, terutama dari kerangka pihak ketiga.

Developer tools menyediakan Anda dengan profiler JavaScript yang akan menganalisis kode Anda saat dijalankan, menyediakan banyak informasi untuk digunakan untuk mengoptimalkan kode Anda.

alt text

Kunci-kunci termasuk:

  • Total # kali fungsi dipanggil
  • Berapa lama waktu yang dibutuhkan untuk menjalankan
  • Berapa lama waktu yang dibutuhkan untuk menjalankan
  • Jenis fungsi (misalnya: DOM atau yang ditentukan pengguna)
  • File sumber tempat fungsi didefinisikan

Berbekal informasi ini, Anda dapat menentukan apakah metode Anda perlu direfaktor, jika perpustakaan pihak ke-3 menyebabkan masalah atau jika metode khusus browser adalah penghambat. Bagi saya, kombinasi Waktu Inklusif dan Eksklusif akan menjadi metrik penting untuk dievaluasi karena itu akan memberi tahu saya berapa lama metode spesifik yang diperlukan untuk dijalankan termasuk waktu yang diperlukan untuk menyelesaikan metode anak atau eksternal. Dari sana, saya bisa mulai menggali lebih jauh untuk memakukan kode masalah.


Memeriksa Permintaan Jaringan

Saya tidak akan pernah lupa ketika saya mengkodekan permintaan Ajax pertama saya. Itu adalah kode yang sangat kecil tapi itu benar-benar terasa ajaib (ya saya aneh seperti itu). Melakukan pembaruan DOM dinamis berdasarkan penarikan data dari permintaan HTTP background adalah sangat keren dan kemampuan yang kuat. Saya juga tidak akan pernah lupa saat pertama kali mencoba mengirim kembali hasil yang akhirnya menghasilkan kesalahan dan membuat saya tercengang. Untungnya, Firebug memiliki inspektur permintaan jaringan yang memungkinkan saya memeriksa apa kode sisi server saya kembali dan memecahkan masalah itu.

Tab "Jaringan" dalam developer tools menyediakan fungsi ini sangat. Ini menunjukkan lalu lintas yang terkait dengan halaman yang dimuat dan memaparkan detail yang dapat Anda gunakan untuk memecahkan masalah terkait jaringan.

alt text

Dengan melihat lalu lintas yang ditangkap, Anda dapat melihat jenis permintaan yang dibuat (misalnya: GET atau POST), jika itu berhasil dan berapa lama untuk menyelesaikannya. Pengawas jaringan juga memberikan detail penting tentang jenis aset yang Anda minta (misalnya: CSS atau gambar) dan jenis kode apa yang memulai permintaan. Ini semua disediakan dalam tampilan ringkasan yang menawarkan detail cepat tentang permintaan.

Dengan memilih untuk masuk ke tampilan mendetail, Anda dapat mengumpulkan informasi terperinci tentang permintaan khusus. Mampu melihat tubuh respon adalah apa yang memungkinkan saya untuk menyelesaikan masalah yang saya sebutkan sebelumnya dengan panggilan XHR saya. Tapi itu hanya sebagian kecil dari keseluruhan data yang Anda dapatkan dengan masuk ke tampilan detail. Selain itu, Anda mendapatkan header permintaan (permintaan & tanggapan), cookie yang dikirim, dan bahkan informasi pengaturan waktu yang memberi tahu Anda berapa lama permintaan tersebut.

alt text

Tampilan waktu dalam tampilan ringkasan sangat penting karena visual yang jelas dari permintaan mana yang berjalan lama dan mungkin menjadi masalah.


Membuat Markup Terlihat Baik

Saya akan menjadi yang pertama mengatakan bahwa saya Benci pengujian untuk beberapa versi Internet Explorer. Saya sangat kesal dengan versi yang lebih lama dan saya akan senang jika pengembang dapat dengan mudah mengkhawatirkan IE9 dan IE10. Tapi itu adalah apa itu dan ada beberapa cara untuk mengatasi hal ini. Anda dapat menggunakan beberapa mesin virtual untuk setiap versi IE yang Anda targetkan. Anda bisa menggunakan Browserstack.com untuk memvirtualisasikan versi IE di browser. Atau, Anda dapat menggunakan perangkat pengembang 'kemampuan beralih mode peramban agar IE10 meniru IE7 melalui IE10.

alt text

Alat ini memungkinkan Anda untuk mengubah cara IE membuat halaman sehingga mengemulasi kemampuan versi tertentu, sehingga memastikan bahwa situs Anda akan berfungsi untuk versi itu. Tidak hanya memungkinkan Anda untuk menentukan mode browser (yang menentukan dukungan fitur) tetapi juga mode dokumen (yang menentukan bagaimana halaman akan ditafsirkan). Ini memberi Anda banyak fleksibilitas untuk menguji berbagai versi IE dari satu browser. Perhatikan bahwa tim IE melakukan yang terbaik untuk meniru versi. Jika Anda ingin pengujian penuh bukti, maka VM adalah cara yang tepat. Saya biasanya memulai dengan opsi terakhir karena sejauh ini yang paling mudah dan rendering sangat dekat dengan benar-benar menggunakan versi asli IE yang spesifik.

Memeriksa markup adalah salah satu tugas paling umum untuk setiap profesional web. Sangat bagus untuk dapat melihat di bawah kap mesin bagaimana sesuatu dibangun tanpa harus melakukan "View-> Source". Tab "HTML" di alat pengembang menunjukkan semua elemen pada halaman tertentu bersama dengan gaya dan atribut terkait. Hal ini memungkinkan Anda untuk memeriksa dan memperbarui nilai secara real-time dan mendapatkan umpan balik langsung. Anda dapat mengklik, katakan, elemen paragraf dan menjadi dapat diedit sehingga Anda dapat mengubah teks dan melihat hasilnya dengan segera. Hal yang sama berlaku untuk gaya dan atribut dari elemen itu.

alt text

Atribut juga dapat ditambahkan sebaris dengan mengklik kanan elemen dan memilih "Tambahkan atribut" dari menu konteks atau dengan memilih tab "Atribut" dan menambahkannya ke daftar. Gambar berikut menunjukkan bagaimana saya menambahkan atribut warna dan font ke elemen penekanan, menampilkannya sebagai gaya sebaris di markup dan garis atribut individual di tab Atribut:

alt text

Markup halaman diwakili dalam gaya tampilan pohon sehingga Anda melihat tampilan vertikal pohon DOM dan dapat memperluas elemen untuk melihat anak-anak mereka.

CSS juga memiliki tab sendiri, namun, itu dimaksudkan untuk mengelola gaya global yang biasanya disimpan dalam stylesheet. Memilih stylesheet menampilkan semua pemilih, aturan, dan properti yang ditentukan dan memungkinkan Anda untuk menyesuaikannya sesuka hati. Dalam hal ini, cukup hapus centang properti text-align secara dinamis menggeser teks ke kiri:

alt text

Ini tidak hanya mengedit aturan yang ada. Anda juga dapat menambahkan pemilih, aturan, atau properti baru:

alt text

Lebih dari sekadar Plugin untuk IE6

Alasan utama mengapa saya ingin menulis artikel ini adalah karena saya benar-benar terkejut dengan berapa banyak pengembang yang saya temui, yang memiliki kesalahpahaman tentang Alat Pengembang F12 - atau tidak tahu bahwa mereka bahkan ada! Harapan saya adalah membantu pengembang memahami apa yang tersedia dan membuat pemecahan masalah mereka sedikit lebih mudah.

Saya juga berharap ini menghasilkan umpan balik untuk fitur-fitur masa depan yang dibutuhkan pengembang. Sementara fungsi yang ada bagus, saya yakin ada sejumlah hal baru yang Anda, para pembaca, akan temukan penting untuk pengalaman debugging Anda. Biar saya tahu apa itu!

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.