Saat bekerja di Internet, browser Internet Explorer dapat mengeluarkan pesan bahwa halaman tersebut berisi kesalahan dan dapat ditampilkan secara tidak benar. Pertimbangkan beberapa cara untuk memperbaiki masalah ini.
Petunjuk
Saat bekerja di Internet, browser Internet Explorer dapat mengeluarkan pesan bahwa halaman tersebut berisi kesalahan dan dapat ditampilkan secara tidak benar. Pertimbangkan beberapa cara untuk memperbaiki masalah ini.
Petunjuk
Tentu saja, dan lainnya - saya pasti akan menyebut mereka.
Firebug untuk Firefox.
Saya tidak tahu pasti apakah Pembakar. Progenitor dari sarana lain bagi pengembang, tetapi jelas merupakan yang paling populer, nyaman dan fungsional hingga saat ini.
Firebug adalah tambahan untuk Firefox, yang berarti harus diunduh dari situs web Add-On Firefox dan menginstal.
Untuk memanggil Firebug, cukup untuk menekan F12.
Peluang untuk add-on ini:
- Inspeksi dan pengeditan HTML yang berubah secara dinamis;
- Mengedit CSS dengan cepat;
- Men-debug javascript, baris perintah untuk mengeksekusi skrip;
- Pemantauan Kueri Jaringan - Anda dapat melihat ukuran dan waktu mengunduh file dan skrip, header kueri;
- Dom Analyzer.
Anda dapat menceritakan waktu yang lama tentang peluang ini dalam detail, tetapi saya pikir mereka diketahui semua pembaca kami, dan jika tidak - ada informasi terperinci tentang halaman rumah HOME atau sama dalam terjemahan Ilya Cantor.
Selain Firebug'a, Anda dapat menggunakan baris yang berguna untuk itu - Firecookie.Dengan yang (kejutan :-) dapat dilihat dan diubah cookie.
Bilah Alat Pengembang Web untuk Firefox
Tambahan lain yang bermanfaat untuk api. Sepertinya ini:
Kami akan memeriksa pada poin.
Nonaktifkan
Memungkinkan Anda mematikan Javascript, melarang penggunaan cache, yang sangat berguna ketika berkembang (memungkinkan Anda untuk memastikan bahwa halaman boot bersama dengan pembaruan terbaru), batalkan warna yang digunakan pada halaman dan ganti dengan standar, melarangnya Keberangkatan di Header Referrer (halaman dengan yang merupakan transisi).
Kue.
Opsi yang berguna untuk bekerja dengan cookie: mereka dapat dilihat, dihapus, dilarang dan ditambahkan.
CSS.
Menu ini menyimpan fitur Cooled dari Pengembang Toolbar - mengedit CSS dengan cepat. Selain itu, dimungkinkan untuk melihat CSS, melarang, dan sebagainya, dan sejenisnya. Menurut pendapat saya, di sini sangat berguna untuk keberadaan tombol cepat (Ctrl + Shift + C, misalnya, memungkinkan Anda untuk segera pergi untuk melihat gaya halaman)
Formulir.
Semua untuk bekerja dengan formulir: Tampilkan kata sandi, tunjukkan informasi tentang formulir, konversi metode formulir (dapatkan "pos dan sebaliknya) dan banyak lagi. Fungsi yang berguna "mengisi bidang formulir" untuk secara otomatis mengisi bidang formulir (misalnya, ketika menguji situs, ketika fitur menghafal kata sandi dinonaktifkan. Untuk sisanya, saya tidak melihat sesuatu yang berguna pada saat ini.
Gambar-gambar
Ada fitur yang berguna untuk menonaktifkan gambar - untuk melihat seperti apa situs Anda tanpa gambar. Gambar dapat dilingkari, menunjukkan ukurannya, tunjukkan atribut alt.
Informasi
Menu ini memiliki banyak opsi. Anda dapat menjadi fitur yang berguna untuk menampilkan kelas atribut dan ID pada halaman. Selain itu, item "Lihat Informasi Warna" menarik - untuk dengan cepat mendapatkan informasi tentang warna yang digunakan pada halaman. Lihat ukuran dokumen - Lihat ukuran halaman. "Lihat Header Response" - Lihat judul halaman.
Lain-lain.
Fitur yang paling umum digunakan adalah pembersihan cache. Selain itu, fungsi "Halaman Ruler" - garis, "Magnifier Halaman" - Magnifier dan "Garis Panduan" - beberapa baris yang dapat berguna untuk mendorong pola.
Garis besar
Alokasi elemen yang berbeda dari halaman - tabel, header, tautan, bingkai, blok. Ubah ukuran memungkinkan Anda mengubah ukuran jendela browser untuk ekstensi layar standar. Alat Berikut adalah fitur untuk memvalidasi halaman. Baik lokal maupun eksternal. Akses nyaman dan cepat ke HTML, validasi CSS, dan hal-hal lain. Untuk validasi HTML, Anda dapat menggunakan Klausul Ctrl + Shift + H.
Lihat sumber.
Lihat kode sumber. Kemampuan untuk melihat dalam aplikasi eksternal, melihat kode yang dihasilkan.
Apa yang ada di sudut kanan yang paling saya sukai. Ini adalah indikator Validator HTML, CSS dan Javascript cepat. Jika tidak ada masalah - ikon hijau, dan jika ada masalah - merah.
Toolbar Pengembang Internet Explorer
Dimulai dengan 8.0 kesalahan debug, sudah dibangun ke dalam browser ini. Itu mudah dipanggil oleh kunci F12.. Benar, dia miskin sebagai program tahun 90-an.
Tetapi ada alat pendingin untuk browser ini, yang disebut unduhan toolbar Pengembang Internet Explorer dengan referensi.
Dengan bentuk tulbar ini, tentu saja, terlihat seperti Firebug, tetapi, sayangnya, saya belum doros. Meskipun, di sisi lain, ada beberapa peluang yang tidak ada firebug. Saya akan memanggil Internet Explorer Developer Toolbar ke Firebug'a hybrid tertentu dan Pengembang Web Firefox. Bilah alat.
Seperti di Firebug, ada peluang untuk memeriksa elemen dengan klik sederhana. Tetapi, jika kita dapat segera melihat Padding'i dan margin, maka tidak ada kesempatan seperti itu.
Selain itu, Toolbar Pengembang Internet Explorer tidak memperbarui pohon elemen secara dinamis, seperti yang dilakukan Firebug. Artinya, jika kita mengubah apa pun di halaman Dana JS, kita tidak akan melihat apa-apa dengan Tulbara ini.
Dari apa yang dapat ditolak - ubah CSS dengan cepat (cara mudah untuk menemukan peretasan itu :), kemampuan untuk melarang CSS dan gambar, kemampuan untuk dengan cepat membersihkan cache dan bermain dengan cookie, akses cepat ke validasi.
Hal paling enak adalah bahwa ada pemilih warna built-in, yang memungkinkan Anda untuk mendapatkan warna dari perpipaan. (Untuk FF ada plugin colorzilla terpisah).
Debug Debugbar untuk Internet Explorer
Debugbar untuk Internet Explorer, Anda dapat mengunduh pada tautan yang ditentukan.
Dalam ekspansi yang menarik. Diinstal sebagai panel tambahan ke browser:
Ada mesin pencari built-in, pipet, kemampuan untuk mengubah ukuran jendela dan, sekali lagi, untuk beberapa alasan, kemampuan untuk mengirim halaman ke teman untuk sabun. Meskipun, itu mungkin berguna. Tapi saya tidak bisa mengambil kesempatan ini.
Selain itu, ada inspektur:
Metode penciptaan dengan mengklik atau dengan panduan pengembang tidak cocok: mereka datang dengan sepotong yang lebih menarik. Dalam debugbar'e, Anda perlu menyeret penglihatan pada item yang diinginkan untuk melihatnya di pohon. Kemampuan untuk mengedit css no. Tetapi ada validator dan konsol JS built-in.
Dan jika Anda ingin menggali pengaturan, Anda dapat menemukannya:
Dan konyol dan sedih.
Diketahui bahwa pada eksploitor kedelapan akan dibangun di bilah alat pengembang. Dia akan mirip dengan yang dijelaskan pada poin ketiga, tetapi kami berharap itu akan lebih baik.
Debug Dragonfly untuk Opera
Dragonfly dibangun ke dalam opera, dimulai dengan versi 9.5, jadi tidak perlu menginstal. Untuk mengaktifkan Dragonflays, buka Alat → Advanced → Mean for Developers. Dan jika dalam bahasa Inggris, alat → canggih → alat pengembang.
Segera peringatkan Anda bahwa Dragonfly berada di tahap Alpha2, ini menjelaskan banyak gangguannya.
Daftar Fitur:
- Inspektur DOM;
- Inspeksi dengan klik (lagi, kita tidak akan melihat indentasi seperti di Firefox);
- Pengeditan;
- Akses cepat ke konsol kesalahan.
Df - sesuatu seperti halaman terpisah di freme. Jika Anda membukanya, itu akan terbuka untuk semua tab (tidak seperti Firebug'a). Oleh karena itu, sebelum memeriksa item, Anda perlu memilih halaman dari daftar yang ingin kami lihat.
Sayangnya, di sini, seperti dalam Internet Explorer DAV Toolbar, elemen yang dibuat secara dinamis tidak ditampilkan. Dan secara umum, ketika kami memeriksa halaman, tidak ada javascript mulai: tautan dan tombol tidak ditekan. Mari berharap ketika Dragonfly cocok untuk dirilis, kita akan melihat semua peluang ini.
Debug Inspektur Web di Safari
Saya akan memberi tahu Anda tentang browser Safari. Informasi bersiul, jadi untuk kecukupan materi, seperti yang mereka katakan, saya tidak menjawab.
Untuk mengaktifkan dalam menu Safari, item "Pengembangan" diperlukan dalam Pengaturan (Tab Lanjut) dalam item yang sesuai:
Dalam menu "Pengembangan", fungsi-fungsi berikut tersedia:
Mari kita pertimbangkan dalam detail inspektur web:
Secara default, inspektur terbuka dalam mode tampilan HTML. Tetapi dapat beralih ke mode tampilan DOM. Untuk melakukan ini, ada saklar di atas ruam. Ketika Anda melayang di atas elemen di inspektur, itu akan disorot pada halaman itu sendiri. Untuk melihat indentasi, ubah markup atau css dengan cepat atau lihat perubahan dinamis di kubah dengan cepat, seperti pada firebug itu tidak mungkin. Tetapi Anda akan setuju, itu terlihat sangat lucu.
Jika ada keinginan untuk bekerja dengan inspektur di jendela browser, Anda dapat mengklik tombol di sudut kiri bawah.
Bahkan dalam safari, fungsi seperti "skala waktu jaringan" tersedia, (tombol jaringan di inspektur):
Anda dapat dengan jelas melihat kapan dan berapa lama file dimuat. Anda juga dapat melihat permintaan tajuk, tetapi konten itu sendiri untuk dilihat, sayangnya, tidak dapat dilihat.
Debug untuk pengembang di Google Chrome
Chrome muncul pada cahaya dalam bentuk lanjutan, dan dia segera memiliki, biarkan kurva, tetapi masih dana untuk pengembang.
- Inspektur DOM;
- Debugger javascript;
- Konsol javascript.
Untuk memeriksa elemen apa pun, Anda perlu mengklik kanan dan pilih "Lihat kode item" di menu konteks:
Fungsionalitasnya sama dengan di Safari: Elemen-elemen tersebut dikucilkan dengan melayang, tetapi mengedit CSS dan HTML tidak tersedia, perubahan pada DOM tidak dilacak. Itu hanya, tombol di sudut kiri bawah, yang harus melampirkan inspektur ke jendela browser tidak berfungsi.
Di tab "Sumber Daya", kita dapat melihat yang berikut:
Moto berbeda dari skala di safari. Tembus pada skema ini adalah ukuran file relatif, dan warna penuh - waktu pengunduhan. Salah satu atau lain cara, jelas bahwa bagian kromium ini masih belum selesai.
Pada artikel ini, saya meninjau ekstensi paling terkenal dan alat bawaan untuk browser.
Ada yang lain, misalnya:
- Internet Explorer Web Development Helper - Asisten yang baik untuk Pengembang ASP.NET (Internet Explorer);
- Web Developer Toolbar - Tulbar untuk Internet Explorer dan Firefox. Ada beberapa fitur yang berguna;
- Bilah Alat Aksesibilitas Web - Tulbar untuk Internet Explorer. Tidak ada yang menarik.
Jika ada penambahan yang tidak saya sebutkan, tetapi itu akan sepadan, atau ada fungsi dari ekstensi yang disebutkan, yang saya lewatkan, tulis.
Gunakan pada kesehatan!
Tulis HTML - Hebat, tetapi bagaimana memahami di mana kesalahan ketika sesuatu tidak berfungsi? Artikel ini menjelaskan beberapa alat yang membantu mencari dan memperbaiki kesalahan dalam HTML.
Debugging tidak menakutkan
Saat menulis beberapa kode, biasanya semuanya berjalan dengan baik sampai saat ini muncul ketika Anda melakukan kesalahan. Jadi kode Anda tidak berfungsi, atau tidak berfungsi seperti yang Anda pikirkan. Jika Anda mencoba untuk mengkompilasi program non-kerja dalam bahasa karat, kompiler akan menunjukkan kesalahan:
Dalam hal ini, pesan kesalahan adalah untuk memahami relatif sederhana - "String Penawaran Ganda Untermin". Jika Anda hati-hati melihat Println! (Halo, Dunia! "); Kemudian perhatikan bahwa tidak ada gading ganda di sini. Tentu saja, pesan kesalahan dapat menjadi jauh lebih kompleks untuk memahami karena kode Anda tumbuh, dan bahkan kasus yang paling sederhana mungkin Tampak menakutkan bagi mereka yang tidak tahu apa-apa tentang karat.
Tapi jangan takut debugging! Untuk menulis dengan nyaman dan men-debug kode apa pun, Anda perlu memahami bahasa dan alatnya.
Html dan debugging.
HTML tidak terlipat untuk memahami cara berkarat. HTML tidak dikompilasi dalam bentuk lain sebelum browser menganalisis ini dan menunjukkan hasilnya (ditafsirkan, dan tidak dikompilasi). Sintaks elemen HTML jauh lebih jelas daripada bahasa pemrograman nyata, seperti karat, javascript, atau python. Metode di mana browser membaca HTML lebih banyak tolerange.daripada dalam bahasa pemrograman menafsirkan kode mereka lebih ketat. Itu pada saat yang sama buruk, dan bagus.
Kode toleran.
Jadi apa artinya toleran? Secara umum, ketika Anda disuntikkan dalam kode, ada dua jenis kesalahan yang akan Anda temui:
- Kesalahan sintaks (kesalahan sintaksis): Ini adalah kesalahan dalam kebenaran penulisan, karena lebih tinggi, dalam contoh dengan karat. Seperti biasanya mudah untuk diperbaiki, sejauh Anda tahu seberapa akrab dengan sintaks bahasa dan mengetahui maksud pesan kesalahan apa.
- Kesalahan logika (kesalahan logika): Ini adalah kesalahan yang muncul jika sintaksnya benar, tetapi kode tidak memenuhi tujuannya, yaitu, program ini salah. Koreksi semacam itu lebih rumit daripada sintaksis, karena pesan-pesan menunjukkan tempat Anda salah.
HTML tidak menderita kesalahan sintaksis, karena browser membaca kode secara toler, dalam arti bahwa halaman dapat ditampilkan bahkan jika kesalahan sintaksis hadir. Browser memiliki aturan bawaan untuk interpretasi dari tanda tertulis yang salah, dan Anda dapat menjalankan sesuatu, bahkan jika Anda berarti yang lain. Ini bisa menjadi masalah nyata!
Pada catatan: HTML membaca dengan toleran, karena ketika web hanya muncul, diputuskan untuk memungkinkan orang untuk mempublikasikan konten bahkan jika itu salah dalam kode, karena jauh lebih penting daripada kepercayaan diri yang benar-benar benar. Web tidak akan begitu populer sekarang, jika itu disuguhi pemula dengan ketat.
Pembelajaran aktif: Keakraban dengan kode toleran
Saatnya mempelajari sifat kode toleran di HTML.
Validasi HTML.
Dari contoh di atas, jelas bahwa ada baiknya memeriksa validitas HTML. Dalam contoh sederhana dari atas, Anda cukup melihat semua kode dan menemukan kesalahan, tetapi bagaimana dengan halaman besar, kompleks?
Yang terbaik adalah memeriksa halaman dalam markup layanan validasi. Itu dibuat dan didukung oleh W3C - organisasi yang bergerak dalam HTML, spesifikasi CSS dan teknologi web lainnya. Layanan akan memeriksa HTML Anda dan membuat laporan tentang kesalahan di dalamnya.
HTML dapat diperiksa di alamat dengan mengunduh file atau hanya mengikis halaman.
Pembelajaran aktif: Memvalidasi dokumen HTML
- Buka layanan validasi markup di browser.
- Pergi untuk memvalidasi dengan mode input langsung.
- Salin seluruh kode dokumen (bukan hanya tubuh) dan masukkan ke tempat untuk masuk.
- tekan Periksa (periksa).
Anda akan melihat daftar kesalahan dan informasi lainnya.
Memperbaiki Pesan Error
Biasanya jelas jelas pesan apa artinya, tetapi kadang-kadang Anda harus mencoba memahami apa masalahnya. Sekarang kita akan melalui semua kesalahan dan bertanya-tanya apa artinya. Harap dicatat bahwa pesan menunjukkan garis dan kolom kode sehingga kesalahannya lebih mudah untuk dicari.
- "Tag end Li tersirat, tetapi ada elemen terbuka" (2 instance): Tidak ada tag penutup yang jelas, meskipun browser menebak di mana seharusnya. Pesan menunjukkan string setelah satu di mana tag penutup diharapkan, tetapi Anda akan menemukan tempat yang tepat.
- "Elemen yang tidak tertutup kuat": Ini adalah kesalahan yang sangat sederhana - elemennya) menunjukkan bahwa kontennya sangat penting, keseriusan atau urgensi. Browser biasanya menampilkan isi huruf tebal. "\u003e Tidak ditutup, dan pesan menunjukkan langsung ke tag pembukaan.
- "Tandai akhir Kuat melanggar aturan bersarang": Item ini salah diinvestasikan - pada tingkat ini tidak ada pasangan label pembuka.
- "Akhir file tercapai saat berada di dalam nilai atribut. Mengabaikan tag": Pesan misterius. Faktanya adalah bahwa suatu tempat (kemungkinan besar, pada akhir dokumen) secara salah menjabarkan properti elemen, dan akhir file ada di dalam properti ini. Browser tidak melihat tautan - kemungkinan besar masalah di sebelahnya.
- "Akhir file terlihat dan ada elemen terbuka": File selesai, tetapi beberapa elemen tidak ditutup. Pesan menunjukkan akhir file, dalam hal ini elemen contoh tidak ditutup: tautan ke beranda Mozilla ↩
Cukup sering, pengguna dapat mengamati situasi ketika kesalahan skrip muncul di browser (yaitu). Jika situasinya adalah bagian dari satu karakter, maka itu tidak khawatir, tetapi ketika kesalahan seperti itu menjadi teratur, maka perlu dipikirkan tentang sifat masalah ini.
Skrip kesalahan di Internet Explorer biasanya disebut salah memproses browser kode HTML-halaman HTML, keberadaan file Internet sementara, parameter akun, serta banyak alasan lain yang akan dibahas dalam materi ini. Metode untuk memecahkan masalah ini juga akan dipertimbangkan.
Sebelum melanjutkan dengan metode yang diterima secara umum untuk mendiagnosis masalah dengan Internet Explorer, yang menyebabkan kesalahan skenario, Anda perlu memastikan bahwa kesalahan terjadi tidak hanya pada satu situs tertentu, dan segera pada beberapa halaman web. Anda juga perlu memeriksa halaman web di mana masalah ini telah terjadi di bawah akun lain, di browser lain dan di komputer lain. Ini akan menyebabkan kisaran mencari penyebab kesalahan dan menghilangkan atau mengkonfirmasi hipotesis bahwa pesan muncul sebagai konsekuensi dari keberadaan beberapa file atau pengaturan pada PC
Memblokir skrip aktif Internet Explorer, ActiveX dan Java
Skenario Aktif, Elemen ActiveX dan Java memengaruhi metode pembentukan dan menampilkan informasi di situs dan dapat menjadi alasan nyata untuk masalah yang dijelaskan sebelumnya jika mereka diblokir pada PC pengguna. Untuk memastikan bahwa kesalahan skrip muncul karena alasan ini, perlu untuk hanya mengatur ulang pengaturan keamanan browser. Untuk mengimplementasikan ini ikuti rekomendasi.
- Buka Internet Explorer 11
- Layanan
- Di jendela, buka tab Keamanan
- Selanjutnya tekan tombol Default.dan kemudian tombol baik
File Sementara Internet Explorer
Setiap kali Anda membuka halaman web, Internet Explorer menyimpan salinan lokal dari halaman online ini ke PC dalam file sementara yang disebut. Ketika file seperti itu menjadi terlalu banyak dan ukuran folder yang berisi mereka mencapai beberapa gigabytes, mungkin ada masalah dengan menampilkan halaman web, yaitu, pesan tentang kesalahan skrip muncul. Folder pembersih reguler dengan file sementara dapat membantu menghilangkan masalah ini.
Untuk menghapus file Internet sementara, ikuti urutan tindakan berikut.
- Buka Internet Explorer 11
- Layanan
- Di jendela, buka tab Umum
- Dalam Bab. Majalah browser. tekan tombolnya Hapus ...
- Di jendela Menghapus sejarah ulasan Periksa bendera dekat paragraf Internet sementara dan situs web, Cookie dan data situs web, Majalah
- tekan tombolnya Menghapus
Pekerjaan perangkat lunak anti-virus
Kesalahan skrip dimungkinkan melalui pengoperasian program antivirus ketika memblokir skenario aktif, ActiveX dan Elemen Java pada halaman atau folder untuk menyimpan file sementara browser. Dalam hal ini, Anda perlu beralih ke dokumentasi untuk produk antivirus yang diinstal dan menonaktifkan pemindaian folder untuk menghemat waktu file Internet, serta memblokir objek interaktif.
Pemrosesan kode halaman HTML salah
Memanifestasikan kami, sebagai aturan, di salah satu situs tertentu dan menunjukkan bahwa kode halaman tidak sepenuhnya disesuaikan untuk bekerja dengan Internet Explorer. Dalam hal ini, yang terbaik adalah mematikan debugging skrip di browser. Untuk melakukan ini, ikuti langkah-langkah ini.
- Buka Internet Explorer 11
- Di sudut atas browser (kanan), klik ikon Layanan Dalam bentuk gigi (atau kombinasi tombol ALT + X). Kemudian di menu yang dibuka, pilih item.
- Di jendela, buka tab Selain itu
- Selanjutnya, hapus centang pada kotak centang dari titik Tampilkan pemberitahuan tentang setiap kesalahan skrip dan klik baik.
Daftar alasan paling sering yang menyebabkan kesalahan skrip di Internet Explorer, jadi jika Anda bosan dengan pesan seperti itu, bayar sedikit perhatian dan pecahkan masalah sekali dan untuk semua.
Saat ini ada sejumlah besar browser yang berbeda, hingga satu derajat atau yang lain mendukung standar HTML yang ada. Secara pribadi, saya lebih suka browser dari Mozilla Corporation. Browser ini memiliki sejarah panjang (ditulis berdasarkan browser Netscape Navigator yang terkenal). Juga, saya juga suka browser ini dengan fakta bahwa itu mendukung sistem plug-in - penambahan yang dapat disapkan secara terpisah, ketika menghubungkan yang dapat Anda ubah fungsionalitas dan konfigurasikan kebutuhan Anda. Dan akhirnya, browser ini didistribusikan dengan bebas dengan kode sumber terbuka, yang juga penting. Oleh karena itu, saya memutuskan untuk menggambarkan peluang bahwa browser ini menyediakan tidak hanya kepada pengguna, tetapi juga pengembang halaman web, betapa mudah dan nyaman untuk menjadi proses debugging produk tertulis.
Mozilla Firefox adalah salah satu pengembang dan browser pengembang web paling populer. Ini menarik perhatian mereka karena kemampuan yang disediakan browser ini untuk debugging proyek yang dibuat, memperbaiki kesalahan, perbaikan. Pengiriman browser standar mencakup konsol Java (atau "konsol kesalahan"). Utilitas ini memungkinkan Anda untuk memperbaiki skrip java-script bawaan. Tetapi, fungsi yang jauh lebih besar dari browser memberikan plugin pihak ketiga yang dapat diunduh dan diinstal dari situs web resmi Mozilla Foundation. Sekarang saya ingin mempertimbangkan dua plugin ini - ini adalah pengembang web dan firebug. Kedua tambahan ini dapat diunduh sesuai dengan tautan di atas dari situs add-on resmi. Setelah instalasi dan restart browser mereka, pengembang menawarkan banyak peluang yang akan saya jelaskan di bawah ini, pada gilirannya untuk masing-masing plugin.
Plugin Firebug.
Sebagaimana dinyatakan pada halaman resmi: "Firebug terintegrasi dengan Browser Firefox untuk sangat memperkaya Toolkit Pengembang. Anda dapat mengedit, men-debug dan menjelajahi CSS, HTML, dan JavaScript "Live", di halaman web apa pun. " Dan memang begitu. Pertimbangkan beberapa fungsi plugin ini, yaitu:
- Lihat dan edit HTML.
- Bangun CSS.
- Pemantauan Kueri Jaringan
- Men-debug javascript.
- Studi JavaScript
- Logging For JavaScript.
Ini bukan daftar lengkap dari semua kemampuannya. Jadi proyek ini terbuka (OpenSource), maka siapa pun dapat mengubah dan menambah fungsionalitas.
Untuk bekerja dengan plugin, Anda harus menekan tombol F12 (Ctrl-F12 untuk bekerja dengannya di jendela terpisah). Setelah peluncuran berhasil, kami memperoleh yang berikut - Gambar 1A, 1b.
Gambar 1a. Jendela awal plugin Firebug.
Gambar 1b. Jendela awal plugin Firebug.
Selanjutnya, pekerjaan aktual dengan plugin dimulai. Misalnya, kita perlu menemukan objek tertentu dalam kode HTML, atau menentukan dengan tepat fragmen saat ini diimplementasikan menggunakan CSS. Untuk melakukan ini, Anda hanya perlu memilih opsi yang diperlukan di menu jendela plugin. Contoh di bawah ini adalah HTML dalam mode inspeksi. Sekarang, dengan pergi ke halaman dokumen, di bawah kursor mouse, kita akan melihat area persegi panjang yang mengilustrasikan plot di sini dengan mana pekerjaan sedang berlangsung. Di jendela plug-in, kita akan melihat parameter itu HTML dan CSS yang digunakan. Juga, dengan mengklik masing-masing, Anda dapat membuat perubahan dan melacaknya dalam dinamika. Tindakan yang dijelaskan diilustrasikan dalam Gambar 2,3,4.
Pengembangan proyek ini dijelaskan di atas plugin digunakan untuk tujuan ini. Namun, meskipun Java-Script tidak digunakan di sini, plugin Firebug juga dapat digunakan untuk men-debug. Contoh debugging ditunjukkan pada Gambar 5.
Pada hal ini, seperti dijelaskan di atas, fungsi ekspansi ini tidak terbatas. Anda dapat mempelajarinya sepenuhnya dan menggunakan kebutuhan Anda dengan mengunduh tautan berikut dengan menginstal Mozilla Firefox.
Plugin Pengembang Web.
Pengembang web adalah ekspansi kedua untuk browser Mozilla Firefox, sangat kuat dan fungsional, yang memungkinkan Anda menghasilkan debugging yang cepat dan efisien. Setelah menginstalnya, panel tambahan dengan alat muncul di jendela browser, ditunjukkan pada Gambar 6.Bekerja lebih lanjut dengan plugin secara intuitif dapat dimengerti. Misalnya, jika kita perlu melakukan pekerjaan dengan CSS (meskipun tidak sepenuhnya secara fungsional, seperti dengan plugin Firebug), Anda dapat mengklik menu CSS dan memblokir, menghidupkan atau mematikan.
Sangat nyaman bagi pengembang adalah setrika untuk melihat bagaimana proyeknya akan terlihat seperti pada monitor, dengan resolusi yang berbeda. Untuk melakukan ini, gunakan tab Ubah Ukuran. Di sini Anda dapat secara manual mengatur resolusi layar yang diperlukan (800x600, 1024x768, dll.), Dan kemudian dengan bebas beralih di antara mereka, menghubungi atau menghapus konten. Fungsi ini digambarkan pada Gambar 7.
Ekstensi ini juga memiliki fungsionalitas yang kaya, yang semuanya dijelaskan dan tersedia di situs resmi.
Daftar sumber bekas
- 1. www.getfirebug.com
Situs add-on resmi. - 2. http://addons.mozilla.org.
Situs web resmi Mozilla, yang menempatkan plugin untuk browser Firefox, informasi untuk pengembang, informasi tentang penggunaan plugin. - 3. http://chrispederick.com/work/web-developer/
Pengembang situs web resmi plugin webdeveloper.
Tulis HTML - Hebat, tetapi bagaimana memahami di mana kesalahan ketika sesuatu tidak berfungsi? Artikel ini menjelaskan beberapa alat yang membantu mencari dan memperbaiki kesalahan dalam HTML.
Debugging tidak menakutkan
Saat menulis beberapa kode, biasanya semuanya berjalan dengan baik sampai saat ini muncul ketika Anda melakukan kesalahan. Jadi kode Anda tidak berfungsi, atau tidak berfungsi seperti yang Anda pikirkan. Jika Anda mencoba untuk mengkompilasi program non-kerja dalam bahasa karat, kompiler akan menunjukkan kesalahan:
Dalam hal ini, pesan kesalahan adalah untuk memahami relatif sederhana - "String Penawaran Ganda Untermin". Jika Anda hati-hati melihat Println! (Halo, Dunia! "); Kemudian perhatikan bahwa tidak ada gading ganda di sini. Tentu saja, pesan kesalahan dapat menjadi jauh lebih kompleks untuk memahami karena kode Anda tumbuh, dan bahkan kasus yang paling sederhana mungkin Tampak menakutkan bagi mereka yang tidak tahu apa-apa tentang karat.
Tapi jangan takut debugging! Untuk menulis dengan nyaman dan men-debug kode apa pun, Anda perlu memahami bahasa dan alatnya.
Html dan debugging.
HTML tidak terlipat untuk memahami cara berkarat. Html tidak dikompilasi dalam bentuk lain sebelum browser akan menganalisisnya dan menunjukkan hasilnya (itu ditafsirkan, tapi tidak dikompilasi.). Sintaks elemen HTML jauh lebih jelas daripada bahasa pemrograman nyata, seperti karat, javascript, atau python. Metode di mana browser membaca HTML lebih banyak tolerange.daripada dalam bahasa pemrograman menafsirkan kode mereka lebih ketat. Itu pada saat yang sama buruk, dan bagus.
Kode toleran.
Jadi apa artinya toleran? Secara umum, ketika Anda disuntikkan dalam kode, ada dua jenis kesalahan yang akan Anda temui:
- Kesalahan sintaks (kesalahan sintaksis): Ini adalah kesalahan dalam kebenaran penulisan, karena lebih tinggi, dalam contoh dengan karat. Seperti biasanya mudah untuk diperbaiki, sejauh Anda tahu seberapa akrab dengan sintaks bahasa dan mengetahui maksud pesan kesalahan apa.
- Kesalahan logika (kesalahan logika): Ini adalah kesalahan yang muncul jika sintaksnya benar, tetapi kode tidak memenuhi tujuannya, yaitu, program ini salah. Koreksi semacam itu lebih rumit daripada sintaksis, karena pesan-pesan menunjukkan tempat Anda salah.
HTML tidak menderita kesalahan sintaksis, karena browser membaca kode secara toler, dalam arti bahwa halaman dapat ditampilkan bahkan jika kesalahan sintaksis hadir. Browser memiliki aturan bawaan untuk interpretasi dari tanda tertulis yang salah, dan Anda dapat menjalankan sesuatu, bahkan jika Anda berarti yang lain. Ini bisa menjadi masalah nyata!
Pada catatan: HTML membaca dengan toleran, karena ketika web hanya muncul, diputuskan untuk memungkinkan orang untuk mempublikasikan konten bahkan jika itu salah dalam kode, karena jauh lebih penting daripada kepercayaan diri yang benar-benar benar. Web tidak akan begitu populer sekarang, jika itu disuguhi pemula dengan ketat.
Pembelajaran aktif: Keakraban dengan kode toleran
Saatnya mempelajari sifat kode toleran di HTML.
- Untuk memulai, unduh contoh debugging kami dan simpan secara lokal. Demonstrasi ini sengaja ditulis dengan kesalahan yang harus kita deteksi.
- Selanjutnya, buka di browser. Anda akan melihat sesuatu seperti ini:
- Sekarang dokumen itu terlihat tidak terlalu bagus; Mari kita lihat kode dan cari tahu mengapa (hanya bodi dokumen yang ditampilkan):
Contoh debugging html.
Apa yang menyebabkan kesalahan dalam HTML?
- Elemen yang tidak tertutup: Jika suatu elemen tidak ditutup dengan benar, maka efeknya dapat menyebar ke area yang Anda tidak bermaksud
- Elemen-elemen bersarang: elemen bersarang dengan benar juga sangat penting untuk berperilaku dengan benar. kuat. kuat ditekankan? Apa ini?
- Atribut yang tidak tertutup: Sumber umum lainnya dari masalah HTML. Mari kita lihat contoh: Tautan ke Homepage Mozilla
- Elemen yang tidak tertutup: Jika suatu elemen tidak ditutup dengan benar, maka efeknya dapat menyebar ke area yang Anda tidak bermaksud
- Pertimbangkan masalah:
- W. параграфа!} Dan digunakan untuk membuat item daftar. "\u003e Item daftar tidak tertutup. Dalam gambar, jelas bahwa markup tidak terpengaruh, karena browser mudah disimpulkan tentang di mana satu elemen berakhir dan mulai lainnya .
- Yang pertama) menunjukkan bahwa isinya sangat penting, keseriusan atau urgensi. Browser biasanya menampilkan isi huruf tebal. "\u003e Elemen juga tidak memiliki tag penutup. Ini sudah lebih bermasalah, karena sulit untuk mengatakan di mana elemen harus berakhir. Bahkan, semua teks yang tersisa dialokasikan lemak.
- Bagian selanjutnya melanggar kesalahan bersarang: kuat. kuat ditekankan? Apa ini? . Dalam hal ini, kode juga sulit untuk ditafsirkan karena dijelaskan di atas di atas.
- Atribut HREF tidak memiliki kutipan ganda penutupan. Ini adalah penyebab masalah besar - tautannya tidak direproduksi sama sekali.
- Sekarang mari kita lihat bagaimana browser menghasilkan markupnya sendiri, sebagai lawan dari markup awal dokumen. Untuk melakukan ini, gunakan alat pengembang. Jika Anda tidak terbiasa dengan alat pengembang, luangkan waktu beberapa menit untuk meninjauan alat pengembangan di browser.
- Di DOM Inspector Anda dapat melihat bagaimana penandaan baru dihasilkan:
- Menggunakan Inspektur DOM, mari kita lihat detail kode kami untuk melihat bagaimana browser mencoba memperbaiki kesalahan kami di HTML (kami meninjau di Firefox; browser modern lain harus mengeluarkan hasil yang sama):
- Paragraf dan item daftar diperoleh dengan tag penutup.
- Itu tidak jelas di mana elemennya Seharusnya ditutup, jadi browser membungkus setiap blok teks dengan tagnya yang kuat, dan sampai bagian bawah dokumen!
- Sarang yang salah diperbaiki oleh browser sebagai berikut: kuat. kuat ditekankan? Apa ini?
- Tautan dengan tanda kutip ganda hilang dihapus oleh peringatan. Elemen terakhir dari daftar akan terlihat seperti ini:
- Atribut yang tidak tertutup: Sumber umum lainnya dari masalah HTML. Mari kita lihat contoh:
Validasi HTML.
Dari contoh di atas, jelas bahwa ada baiknya memeriksa validitas HTML. Dalam contoh sederhana dari atas, Anda cukup melihat semua kode dan menemukan kesalahan, tetapi bagaimana dengan halaman besar, kompleks?
Yang terbaik adalah memeriksa halaman dalam markup layanan validasi. Itu dibuat dan didukung oleh W3C - organisasi yang bergerak dalam HTML, spesifikasi CSS dan teknologi web lainnya. Layanan akan memeriksa HTML Anda dan membuat laporan tentang kesalahan di dalamnya.
HTML dapat diperiksa di alamat dengan mengunduh file atau hanya mengikis halaman.
Pembelajaran aktif: Memvalidasi dokumen HTML
- Buka layanan validasi markup di browser.
- Pergi untuk memvalidasi dengan mode input langsung.
- Salin seluruh kode dokumen (bukan hanya tubuh) dan masukkan ke tempat untuk masuk.
- tekan Periksa (periksa).
Anda akan melihat daftar kesalahan dan informasi lainnya.
Memperbaiki Pesan Error
Biasanya jelas jelas pesan apa artinya, tetapi kadang-kadang Anda harus mencoba memahami apa masalahnya. Sekarang kita akan melalui semua kesalahan dan bertanya-tanya apa artinya. Harap dicatat bahwa pesan menunjukkan garis dan kolom kode sehingga kesalahannya lebih mudah untuk dicari.
- "Tag end Li tersirat, tetapi ada elemen terbuka" (2 instance): Tidak ada tag penutup yang jelas, meskipun browser menebak di mana seharusnya. Pesan menunjukkan string setelah satu di mana tag penutup diharapkan, tetapi Anda akan menemukan tempat yang tepat.
- "Elemen yang tidak tertutup kuat": Ini adalah kesalahan yang sangat sederhana - elemennya) menunjukkan bahwa kontennya sangat penting, keseriusan atau urgensi. Browser biasanya menampilkan isi huruf tebal. "\u003e Tidak ditutup, dan pesan menunjukkan langsung ke tag pembukaan.
- "Tandai akhir Kuat melanggar aturan bersarang": Item ini salah diinvestasikan - pada tingkat ini tidak ada pasangan label pembuka.
- "Akhir file tercapai saat berada di dalam nilai atribut. Mengabaikan tag": Pesan misterius. Faktanya adalah bahwa suatu tempat (kemungkinan besar, pada akhir dokumen) secara salah menjabarkan properti elemen, dan akhir file ada di dalam properti ini. Browser tidak melihat tautan - kemungkinan besar masalah di sebelahnya.
- "Akhir file terlihat dan ada elemen terbuka": File selesai, tetapi beberapa elemen tidak ditutup. Pesan menunjukkan akhir file, dalam hal ini elemen contoh tidak ditutup: tautan ke beranda Mozilla ↩