Penjelasan Menu dari Alat Pengembang IE8

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

Penjelasan terperinci tentang penggunaan alat pengembang IE8 (penjelasan terperinci tentang menu di semua tingkatan)

Versi resmi IE8 telah dirilis. Artikel ini tidak akan membuat komentar dalam omong kosong, dan kemudian memberikan kesimpulan bahwa Chrome memiliki kemampuan untuk menjalankan JavaScript yaitu 15 kali lipat IE8, yang IE8 memiliki 2,456 kali lipat dari Safari, dan apa IE8 memiliki 1,235 kali lebih tinggi dari Firefox. Siapa yang saya pedulikan lebih baik dari siapa? Yang saya tahu adalah: Ketika Windows 7 dirilis, pangsa pasar browser IE8 akan membuat pengembang front-end tidak dapat mengatakan: Jangan khawatir tentang IE8, beberapa orang menggunakannya. Jadi, artikel ini akan menjelaskannya secara pragmatis. IE8 mungkin satu -satunya alat pengembang yang membuat pengembang merasa ramah. Pada saat yang sama, kami akan memperluas beberapa informasi dan pengetahuan yang relevan. Jadi, tolong tinggalkan prasangka Anda terhadap IE8 dan terus menonton dengan sabar.

Belum diinstal IE8?

Jika Anda seorang pengembang front-end, silakan instal hal ini. Karena versi resmi telah dirilis. Berbeda dengan versi beta sebelumnya, kita harus memperhatikannya dengan serius kali ini. Pergi dan unduh dan instal satu, berikut ini adalah alamat unduhan-

IE8 Daftar Unduh Versi Cina

Windows XP

Windows Vista

Windows Server 2003

Windows Server 2008

Windows XP 64-bit

Windows Vista 64-bit

Windows Server 2003 64-bit

Windows Server 2008 64-bit

IE8 Daftar Unduh Versi Bahasa Inggris

Windows XP

Windows XP 64 Bit

Windows Vista

Windows Vista 64 Bit

Windows Server 2003

Windows Server 2003 64 bit

Windows Server 2008

Windows Server 2008 64 Bit

Oh, mungkin Anda akan khawatir bahwa IE6 atau IE7 di sistem Anda sudah berakhir. Ya, memang, ini mungkin. Namun, Anda dapat mencoba alat berikut. Ini memungkinkan Anda untuk hidup berdampingan dengan beberapa versi IE - solusi untuk koeksistensi beberapa versi IE - ietester

Superpreview (dengan unduhan)

Meskipun hal ini telah mengubah nama modisnya, itu bukan hal baru. Pendahulunya adalah Iedevtoolbar. Namun, dulu hanya plug-in untuk IE. Di IE8, browser telah secara otomatis mengintegrasikan hal ini, yang tidak hanya mengubah nama sedikit pedesaan, tetapi juga memiliki banyak peningkatan fungsi.

Alat pengembang juga dapat dipanggil di bawah menu Tools IE8 atau langsung mengklik tombol pintasan F12.

Sebelum kita memperkenalkannya, mari kita bicara tentang apa yang bisa dilakukan hal ini? Jika Anda hanya menggunakan browser untuk menelusuri situs web, tanpa khawatir tentang bagaimana halaman dibuat. Lalu saya pikir Anda bisa meninggalkan halaman ini.

Secara keseluruhan, alat pengembang adalah alat yang dirancang untuk pengembang front-end untuk mengembangkan halaman. Berikan serangkaian gadget untuk memungkinkan Anda menemukan bug halaman dengan mudah, termasuk kode HTML, kode CSS dan kode JavaScript. Pada saat yang sama, ia juga menyediakan beberapa alat kecil yang tidak berguna tetapi masih bisa memukul baunya, seperti pengambilan warna, penguasa layar, dll.

Oke, kami telah melihatnya dan tahu apa yang bisa dilakukan. Kemudian mari kita perkenalkan satu per satu sesuai dengan urutan menu-

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

【Mencabut semua】

Semua operasi yang dilakukan dalam alat pengembang telah dibatalkan dan struktur halaman dan DOM disegarkan.

【Sumber upaya penjelajah internet khusus】

【Sumber yang mencoba】 Kata benda yang sungguh. Dengan cara yang sederhana, itu adalah: editor apa yang digunakan untuk melihat file sumber web. Misalnya: Saya menggunakan editplus.

【berhenti】

Agar tidak menghina IQ Anda, saya tidak akan banyak bicara tentang ini. Nah, F12 adalah kunci pintasan paritas, mari kita sebutkan ini.

【Temukan】 Menu

Klik untuk memilih elemen

Kunci pintasan Ctrl B memiliki efek yang sama dengan mengklik tombol ICO mouse pada gambar. Fungsi yang paling umum digunakan. Ini juga merupakan sakelar paritas. Saat membuka, saat mengklik elemen pada halaman dengan mouse, elemen yang dimodifikasi akan dipilih dan struktur DOM, gaya CSS dan informasi lain dari elemen yang dimodifikasi akan terdaftar.

Misalnya, gambar di atas. Area di sebelah kiri menunjukkan informasi DOM untuk elemen hyperlink ini. Elemen orang tua, anak, dan saudara kandungnya dapat dilihat dengan jelas.

Area di sebelah kanan menunjukkan informasi gaya elemen. Gaya yang dicoret oleh garis berarti bahwa gaya tidak lagi berfungsi karena prioritasnya tidak cukup tinggi. Selama debugging, kait sebelumnya dapat dihubungkan. Saat terhubung, itu berarti gaya ini dipaksa untuk dihapus. Selain itu, properti dari masing -masing gaya dapat dimodifikasi segera setelah mengklik dengan mouse. Ini akan langsung melihat efek halaman yang dimodifikasi, yang sangat nyaman.

Teman -teman yang menggunakan Firefox's Firebug harus terbiasa dengan ini. Satu -satunya perbedaan adalah: Firebug mengatur gaya dengan prioritas yang lebih rendah di bawah ini, hanya itu.

Fungsi [penelusuran gaya] dan [gaya] tampilan adalah sama, dan mereka digunakan untuk melihat informasi gaya dari elemen yang dipilih. Satu -satunya perbedaan adalah: ia telah mengubah metode tampilannya. Pandangan spesifik tentang kebiasaan Anda tergantung pada preferensi Anda sendiri.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

[Tata letak] Tampilan dapat menampilkan informasi model kotak dari elemen -elemen yang dipilih. Meskipun dapat menampilkan lebih banyak informasi daripada Firebug, saya masih lebih suka cara di Firebug untuk mengekspresikannya langsung pada halaman dengan blok warna.

[Properti] Tampilan dapat melihat informasi atribut dari elemen yang dipilih. Ini sangat memuaskan: Anda dapat menambahkan atau menghapus beberapa properti segera untuk dengan cepat men -debug halaman.

Oh, benar. Perlu dicatat bahwa apakah Anda memodifikasi gaya atau atribut elemen yang dipilih dalam alat pengembang, mereka hanya debugging sementara dan tidak akan memodifikasi kode sumber halaman web Anda.

【Nonaktifkan】 Menu

【naskah】

Skrip JavaScript atau VBScript di halaman dilarang. Mengapa menonaktifkannya? Untuk menguji ketahanan halaman. Beberapa pelanggan yang memiliki persyaratan tinggi untuk desain halaman akan bertanya: Jika pelanggan menonaktifkan skrip, dapatkah halaman ini masih digunakan? Ya, fungsi ini digunakan untuk menguji kebutuhan sesat dari pelanggan sialan ini.

【Blocker jendela pop-up】

Filter untuk jendela popup. Digunakan untuk menguji mana yang dapat membuat browser atau perangkat lunak keamanan memfilter jendela popup saya.

【CSS】

CSS Nude Festival akan datang! Gunakan ini untuk menguji postur halaman Anda saat berjalan telanjang di CSS. Ini juga merupakan tes penting untuk memverifikasi ketahanan dan aksesibilitas halaman. Meskipun, tidak ada banyak orang buta yang dapat mengakses halaman web di Cina sekarang.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

【Informasi Kelas dan ID】

Kunci pintasannya adalah Ctrl I, sakelar paritas. Setelah membukanya, Anda akan melihat bahwa halaman tersebut ditutupi dengan blok warna merah padat. Nama kelas atau nama ID akan ditampilkan. Ya, ini adalah efek dari melihat informasi kelas dan ID. Tapi sejujurnya, siapa yang tertarik dengan bangku merah ini? Tidak hanya halaman yang terlihat seperti pakaian pengemis yang penuh dengan tambalan, tetapi juga sama sekali tidak menyadarinya -_- B ...

【Jalur tautan】

Sama seperti di atas. Ini akan kotak semua hyperlink di halaman dengan warna merah dan menampilkan alamat tautannya.

【Laporan Tautan】

Menggunakan fitur Link Report, alat pengembang akan membantu Anda membuat laporan tautan untuk halaman ini. Termasuk informasi seperti jumlah tautan, alamat tautan, apakah jendela baru terbuka, dll. Tapi apa gunanya hal ini? Saya juga tidak tahu.

【Indeks tab】

Sorot semua elemen yang berisi atribut TabIndex. Pengaturan properti TabIndex dapat mengubah urutan di mana elemen halaman web mendapatkan fokus.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

【Kunci Akses】

Sorot semua elemen yang berisi atribut AccessKey. Atur atribut AccessKey untuk mengatur tombol pintas untuk elemen untuk mendapatkan fokus.

【File sumber】 Sumber elemen dengan gaya

Hasilkan file sumber yang berisi gaya elemen yang dipilih, kode HTML, dan informasi tingkat web.

Elemen harus dipilih sebelum perintah ini valid. Selain itu, file sumber yang dihasilkan hanya terkait dengan elemen yang dipilih.

【File Sumber】 DOM (Elemen)

Kunci pintasannya adalah Ctrl T. menghasilkan file sumber. File sumber ini hanya berisi informasi struktur DOM untuk elemen yang dipilih. Teman -teman yang telah menggunakan Firebug dapat memikirkan kode COPY COPY Elemen HTML. Sebenarnya, yang ini mirip dengan yang itu. Hanya saja ini dihasilkan ke jendela, dan Firebug disalin langsung ke clipboard.

【File sumber】 dom (halaman)

Kunci pintas Ctrl G. Hasilkan file sumber. File sumber ini berisi struktur informasi DOM dari seluruh halaman. Ini fitur yang sangat sialan. Saya tidak tahu apakah itu karena bug. Fitur ini sebenarnya untuk melihat kode sumber halaman web. Karena kode sumber yang dihasilkan tidak hanya informasi DOM, tetapi juga CSS dan informasi skrip.

Status asli 【file sumber】

Fungsi yang sangat sialan sebenarnya untuk melihat kode sumber halaman web. Setiap orang lebih suka menggunakan tombol mouse kanan untuk mengklik langsung di halaman web.

Menu [outline] jelas merupakan perintah untuk menguraikan elemen yang memenuhi persyaratan dan menampilkannya.

【Sel meja】

Ini untuk membingkai setiap sel dari tabel bentuk dengan wireframe oranye . Beri tahu Anda-oh. Ternyata ini adalah sel meja.

【permukaan】

Ini untuk membingkai formulir dalam gambar oranye . Beri tahu Anda-oh. Ternyata ini adalah bentuk bentuknya.

【Div Elements】

Ini adalah menggunakan wireframes hijau untuk semua elemen div di halaman. Beri tahu Anda-oh. Ternyata ini adalah elemen div.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

【gambar】

Ini untuk membingkai semua elemen IMG di halaman dalam rangka wireframe ungu . Beri tahu Anda-oh. Ternyata semua ini adalah elemen IMG.

【Elemen apa pun】

Yang ini lebih kuat. Anda dapat menyesuaikan label apa pun dan warna apa yang ingin mereka gunakan untuk mengacaukan. Klik menu ini dan kotak dialog di bawah ini akan muncul. Sangat sederhana. Tidak ada lagi penjelasan.

【Elemen penentuan posisi】 relatif

Ini akan dibingkai berwarna hijau , semua elemen dengan posisi: gaya relatif.

【Elemen Penentuan posisi】 Absolute

Ini akan dibingkai dengan wireframe hitam , semua elemen dengan posisi: gaya absolut.

【Elemen penentuan posisi】 diperbaiki

Ini akan dibingkai dengan warna biru , semua elemen dengan posisi: gaya statis.

【Elemen Posisikan】 Mengapung

Ini akan dibingkai dengan wireframes kuning , semua elemen dengan gaya float.

【Garis Bersihkan】

Ketika halaman Anda telah dibuat dengan berbagai warna garis seperti tabel Excel, Anda dapat menggunakan perintah ini untuk menghapus semua baris.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

Jelas, perintah ini mengontrol berbagai gambar di halaman.

【Nonaktifkan gambar】

Agar tidak menghina IQ Anda, saya tidak akan mengatakan ini. Satu -satunya hal yang harus dijelaskan adalah bahwa tidak hanya elemen IMG, tetapi juga gambar latar belakang elemen akan dinonaktifkan.

【Tampilkan ukuran gambar】

Fitur yang sangat bagus. Anda dapat dengan cepat mengetahui ukuran setiap gambar tanpa memeriksa atribut gambar. Tentu saja, unitnya adalah piksel.

【Tampilkan ukuran file gambar】

Fitur yang sangat bagus. Anda dapat dengan cepat mengetahui ukuran file setiap gambar tanpa memeriksa properti gambar. Tentu saja, unit ini byte.

【Tampilkan jalur gambar】

Fitur yang sangat bagus. Anda dapat dengan cepat mengetahui jalur URL dari setiap gambar tanpa memeriksa atribut gambar, dan Anda juga dapat menyalinnya.

【Tampilkan teks alt】

Teks atribut alt dari elemen IMG dapat ditampilkan. Ngomong -ngomong: Jangan menumpuk kata kunci untuk gambar, jika tidak, itu akan dengan mudah dianggap sebagai optimasi transisi SEO.

【Lihat Laporan Gambar】

Hasilkan laporan gambar terperinci untuk memodifikasi halaman. Berisi informasi yang sangat rinci untuk setiap gambar.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

Kelola grup menu cache dan cookie. Ini akan menjadi fitur yang sangat menyenangkan bagi pengembang.

【Selalu menyegarkan dari server】

Sepertinya perintah yang sangat mendalam. Dengan kata lain, dilarang menggunakan cache browser.

【Hapus cache browser】

Kunci pintas Ctrl R. Tidak ada yang bisa dikatakan, itu hanya menyederhanakan langkah -langkah operasi sebelumnya.

Saya tidak tahu jika Anda memperhatikan bahwa ada tiga titik di belakang [Clear Browser Cache] di menu. Ini berarti bahwa kotak dialog akan dikonfirmasi setelah mengklik menu ini.

【Hapus cache browser untuk domain ini】

Kunci pintas Ctrl D. Tidak ada yang bisa dikatakan, cukup hapus cache browser di domain ini.

【Nonaktifkan cookie】

Tidak ada manfaat untuk dikatakan. Tidak ada biskuit yang diizinkan.

【Cookie Sesi Bersihkan】

Bersihkan semua cookie di browser Anda. Forum dan komunitas Anda sedang menunggu untuk masuk lagi.

【Bersihkan cookie domain】

Hanya membersihkan cookie di domain ini.

【Lihat Informasi Cookie】

Lihat informasi cookie yang terkandung di halaman ini. Bahkan tidak memikirkannya, Anda tidak akan mendapatkan kata sandi.

Beberapa gadget yang berguna disertakan dengan alat pengembang, meskipun mereka sedikit lebih lemah daripada alat terkait khusus lainnya. Tapi tanggap darurat masih cukup.

【Ubah Ukuran】

Gadget yang sangat berguna. Anda dapat dengan cepat menyesuaikan jendela browser ke ukuran yang relevan. Dengan cara ini, akan jauh lebih nyaman untuk menguji kompatibilitas resolusi web.

【Tunjukkan Penguasa】

Alat penggaris sederhana. Gunakan untuk mengukur panjang, jarak, dan informasi lainnya. Warna garis dapat diubah. Beberapa judul juga dapat dibuat. Jika terlalu tipis, Anda dapat menggunakan fungsi kaca pembesar .

【Tampilkan pemetik warna】

Alat pengambilan warna sederhana. Klik mouse untuk memilih warnanya. Namun, saya merekomendasikan alat lain untuk Anda - Toolbox kerja saya - ColorPic, yang terlalu sederhana di alat pengembang.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

Ini pasti akan menyebabkan badai berdarah di dunia (terima kasih Xiaoqi karena telah mengingatkan saya pada idiom ini yang tiba -tiba saya lupa, sayangnya ~ mungkin karena saya telah membaca lebih sedikit novel seni bela diri terbaru. Tapi saya sepertinya terbiasa dengan idiom seperti terengah -engah dan lianlian baru -baru ini). Dalam waktu dekat, Kong Yiji yang tak terhitung jumlahnya pasti akan diproduksi.

【Html】

Verifikasi kode HTML halaman. Halaman ini akan dikirim ke alat verifikasi HTML W3C dan laporan verifikasi akan diperoleh.

【CSS】

Verifikasi kode CSS halaman. Halaman ini akan dikirim ke alat verifikasi CSS W3C dan laporan verifikasi akan diperoleh.

【sumber】

Verifikasi kode file sumber halaman. Halaman ini akan dikirim ke alat verifikasi feedvalidator.org dan laporan verifikasi akan diperoleh.

【Link】

Verifikasi tautan ke halaman. Halaman ini akan dikirim ke alat verifikasi W3C dan laporan verifikasi akan diperoleh.

【Html lokal】

Buka alat verifikasi HTML W3C untuk memverifikasi halaman lokal.

【CSS lokal】

Buka alat verifikasi CSS W3C untuk memverifikasi halaman lokal.

【Fungsi Accessive】 Daftar WCAG

Verifikasi WCAG halaman (Aksesibilitas Laporan Konten Konten Web). Halaman ini akan dikirim ke alat verifikasi ContentQuality.com dan laporan verifikasi akan diperoleh.

Daftar [Fungsi Asesif]

Verifikasi Standar Halaman 508. Halaman ini akan dikirim ke alat verifikasi ContentQuality.com dan laporan verifikasi akan diperoleh.

【Berbagai verifikasi】

Verifikasi halaman pada saat yang sama untuk memverifikasi spesifikasi berganda.

Mengenai verifikasi halaman, saya ingin mengatakan beberapa kata: Faktanya, apakah halaman perlu melewati verifikasi sebelum dapat diluncurkan? Saya pribadi merasa bahwa itu sama sekali tidak perlu. Jika Anda seorang pelajar, berbaring di dalam menara gading. Anda dapat melemparkan halaman Anda kapan saja, karena Anda adalah pelanggan dan Anda hanya punya waktu. Namun, tidak perlu menyia -nyiakan sumber daya proyek yang berharga untuk pass untuk proyek komersial. Karena tidak ada pelanggan yang peduli dengan Anda, halaman yang saya buat telah diverifikasi oleh W3C dalam banyak aspek. Jika benar -benar ada pelanggan yang peduli, maka saya hanya bisa mengatakan bahwa saya mengagumi kemampuan Anda untuk menipu.

Artikel ini telah menjelaskan secara singkat berbagai menu alat pengembang. Saya percaya bahwa setiap orang dapat dengan mudah menggunakan alat yang kuat ini.

Tapi kami belum menyebutkan fungsi yang lebih kuat sama sekali. Semua, silakan nantikan artikel kami berikutnya. Pada artikel berikutnya, kami akan menjelaskan secara rinci penggunaan debugging JavaScript, mode browser, mode teks dan fungsi lainnya.