Bagaimana Menggunakan Alat Pemaju Penyemak Imbas Web

Sebagai tambahan kepada kebanyakan pembuat pelayar yang memberi tumpuan kepada pengguna setiap hari yang ingin melayari Web, mereka juga memenuhi keperluan para pemaju, pereka dan profesional jaminan kualiti yang membantu membina aplikasi dan laman web yang diakses oleh pengguna tersebut dengan mengintegrasikan alat yang berkuasa ke dalam pelayar diri sendiri.

Sudah hari adalah satu-satunya alat pengaturcaraan dan pengujian yang terdapat di dalam penyemak imbas yang membolehkan anda melihat kod sumber halaman dan tiada lagi. Pelayar hari ini membolehkan anda mengambil menyelam yang jauh lebih mendalam dengan melakukan perkara-perkara seperti mengeksekusi dan menyebarkan coretan JavaScript, memeriksa dan mengedit elemen DOM, memantau trafik rangkaian masa nyata sebagai aplikasi atau halaman anda untuk mengenal pasti masalah, menganalisis prestasi CSS, memastikan bahawa kod anda tidak menggunakan memori terlalu banyak atau terlalu banyak kitaran CPU, dan banyak lagi. Dari perspektif ujian, anda boleh menghasilkan semula bagaimana aplikasinya atau halaman Web akan dipaparkan dalam pelayar yang berbeza serta pada peranti dan platform yang berbeza melalui keajaiban reka bentuk responsif dan simulator terbina dalam. Bahagian yang terbaik adalah bahawa anda boleh melakukan semua ini tanpa harus meninggalkan pelayar anda!

Tutorial di bawah ini membimbing anda untuk mengakses alat pemaju ini dalam beberapa pelayar web yang popular.

Google Chrome

Alat pembangun Chrome membolehkan anda menyunting dan menyahpepijat kod, mengaudit komponen individu untuk mendedahkan masalah prestasi, mensimulasikan skrin peranti yang berbeza termasuk yang menjalankan Android atau iOS, dan melaksanakan beberapa fungsi berguna lain.

1. Klik pada butang menu utama Chrome, ditandakan dengan tiga garisan mendatar dan terletak di sudut kanan atas penyemak imbas.
2. Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas Lebih banyak alat pilihan.
3. Sub-menu kini harus muncul. Pilih pilihan yang dilabel Alat pemaju . Anda juga boleh menggunakan pintasan papan kekunci berikut sebagai ganti item menu ini: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + saya )
4. Antara muka Alat Pembangun Chrome kini akan dipaparkan seperti yang ditunjukkan dalam tangkapan contoh contoh ini. Bergantung pada versi Chrome anda, susun atur awal yang anda lihat mungkin sedikit berbeza daripada yang dibentangkan di sini. Hub utama alat pemaju, yang biasanya terletak di sebelah bawah atau sebelah kanan skrin, mengandungi tab berikut.Elemen: Menyediakan keupayaan untuk memeriksa CSS dan kod HTML serta mengedit CSS on-the-fly, melihat kesan perubahan anda dalam masa nyata.Konsol: Konsol JavaScript Chrome membolehkan entri arahan langsung serta debugging diagnostik.Sumber: Membolehkan anda membuat kod JavaScript JavaScript melalui antara muka grafik yang kuat.Rangkaian: Berkategori dan memaparkan maklumat terperinci tentang setiap operasi berkaitan pada aplikasi atau halaman aktif, termasuk permintaan lengkap dan tajuk tindak balas serta metrik pemasaan yang canggih.Garis masa: Membolehkan analisis mendalam setiap aktiviti yang berlaku dalam penyemak imbas sebaik sahaja permintaan halaman atau aplikasi dimulakan.
5. Selain bahagian ini, anda juga boleh mengakses alat berikut melalui >> ikon, terletak di sebelah kanan Garis masa tab.Profil: Teruk ke dalam Profiler CPU dan Profiler Heap bahagian, menyediakan penggunaan memori yang komprehensif dan masa pelaksanaan keseluruhan aplikasi atau halaman aktif.Keselamatan: Sorotan masalah sijil dan isu berkaitan keselamatan yang lain dengan halaman aktif atau aplikasi.Sumber: Di sinilah anda boleh memeriksa kuki, storan setempat, cache aplikasi, dan sumber data tempatan yang lain yang digunakan oleh halaman Web atau aplikasi semasa.Audit: Menawarkan cara untuk mengoptimumkan masa beban halaman dan aplikasi dan prestasi umum.
6. Mod Peranti membolehkan anda melihat halaman aktif dalam simulator yang menjadikannya hampir tepat kerana ia akan muncul pada salah satu daripada lebih banyak peranti, termasuk beberapa model Android dan iOS yang terkenal seperti iPad, iPhone, dan Samsung Galaxy. Anda juga diberi keupayaan untuk mencontohi resolusi skrin adat untuk memenuhi keperluan perkembangan atau pengujian tertentu anda. Untuk bertukar-tukar Mod Peranti dihidupkan dan dimatikan, pilih ikon telefon mudah alih yang terletak terus ke sebelah kiri Elemen tab.
7. Anda juga boleh menyesuaikan rupa dan nuansa alat pemaju anda dengan mengklik pada butang menu utama yang diwakili oleh tiga titik yang ditempatkan secara vertikal dan terletak di sebelah kanan sebelah kanan tab yang disebutkan di atas. Dari dalam menu drop-down ini, anda boleh meletakkan semula dok, menunjukkan atau menyembunyikan alat yang berlainan serta melancarkan item yang lebih maju seperti pemeriksa peranti. Anda akan mendapati bahawa antara muka alat dev sendiri sangat disesuaikan dengan tetapan yang terdapat di bahagian ini.

Mozilla Firefox

Bahagian Pembangun Web Firefox merangkumi alat untuk pereka, pemaju, dan penguji sama seperti editor gaya dan eyedropper penargetan piksel.

Bacaan Disyorkan Lifewire:Top 25 Greasemonkey dan Skrip Pengguna Tampermonkey

1. Klik pada butang menu utama Firefox, yang diwakili oleh tiga garisan mendatar dan terletak di sudut kanan atas tetingkap penyemak imbas.
2. Apabila menu lungsur muncul, pilih ikon berlabel Pemaju . The Pemaju Web menu kini akan dipaparkan, mengandungi pilihan berikut.Anda akan melihat bahawa kebanyakan item menu mempunyai pintasan papan kekunci yang berkaitan dengannya.Togol Alat: Memaparkan atau menyembunyikan antara muka alat pemaju, biasanya diletakkan di bahagian bawah tetingkap penyemak imbas. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + saya ), Windows ( CTRL + SHIFT + I )Inspektor: Membolehkan anda untuk memeriksa dan / atau tweak kod CSS dan HTML pada halaman aktif serta pada peranti mudah alih melalui penyahpepijat jauh. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )Konsol Web: Membolehkan anda melaksanakan ekspresi JavaScript dalam halaman aktif serta mengkaji pelbagai data log yang dilog termasuk amaran keselamatan, permintaan rangkaian, mesej CSS dan banyak lagi. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )Debugger: The Debugger JavaScript membolehkan anda menentukan dan memperbaiki kecacatan dengan menetapkan titik putus, memeriksa nod DOM, sumber luaran tinju hitam, dan banyak lagi. Begitu juga dengan Inspektor , ciri ini juga menyokong debugging jarak jauh. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S) Editor Gaya: Membolehkan anda membuat gaya baru dan menggabungkannya dengan halaman Web yang aktif, atau mengedit helaian sedia ada dan menguji bagaimana perubahan anda membuat dalam pelayar dengan hanya satu klik. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F7 )Prestasi: Menyediakan pecahan terperinci prestasi rangkaian halaman aktif, data kadar bingkai, masa pelaksanaan JavaScript dan keadaan, cat berkelip, dan banyak lagi. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F5 )Rangkaian: Menyenaraikan setiap permintaan rangkaian yang dimulakan oleh pelayar bersama dengan kaedah yang sama, domain asal, jenis, saiz, dan masa berlalu. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )Toolbar Pemaju: Membuka penterjemah talian arahan interaktif. Masukkan membantu ke dalam jurubahasa untuk senarai semua perintah yang ada dan sintaks yang betul. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Menyediakan keupayaan untuk mencipta dan melaksanakan aplikasi Web melalui peranti sebenar yang menjalankan OS Firefox atau melalui Firefox OS Simulator. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F8 )Konsol Pelayar: Menyediakan fungsi yang sama seperti Konsol Web (lihat di atas). Walau bagaimanapun, semua data yang dikembalikan adalah untuk keseluruhan aplikasi Firefox (termasuk sambungan dan fungsi peringkat penyemak imbas) berbanding laman web aktif sahaja. Pintasan papan kekunci: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )Paparan Reka Bentuk Responsif: Membolehkan anda untuk melihat halaman Web dalam resolusi, susun atur dan saiz skrin yang berbeza dengan serta-merta untuk meniru pelbagai peranti termasuk tablet dan telefon pintar. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )Eyedropper: Memaparkan kod warna hex untuk piksel dipilih individu.Scratchpad: Membolehkan anda menulis, mengedit, mengintegrasikan dan melaksanakan coretan kod JavaScript dari dalam tetingkap Firefox keluar. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F4 )Sumber Halaman: Alat pemaju berasaskan pelayar asal, pilihan ini hanya memaparkan kod sumber yang tersedia untuk halaman aktif. Pintasan papan kekunci: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Dapatkan Lebih Banyak Peralatan: Membuka Kotak Tool Pemaju Web koleksi di laman web rasmi Mozilla, yang menampilkan kira-kira sedozen pelanjutan popular seperti Firebug dan Greasemonkey.

Microsoft Edge / Internet Explorer

Umumnya disebut sebagai Alat Pemaju F12 , penghormatan kepada pintasan papan kekunci yang telah melancarkan antara muka sejak versi Internet Explorer yang terdahulu, tool set dev di IE11 dan Microsoft Edge telah datang jauh sejak penubuhannya dengan menawarkan kumpulan pemantau, debuggers, emulators dan penyusun terbang.

1. Klik pada Lebih aksi menu, diwakili oleh tiga titik dan terletak di sudut kanan atas tetingkap penyemak imbas. Apabila menu lungsur muncul, pilih pilihan berlabel Alat Pemaju F12 . Seperti yang telah saya sebutkan, anda juga boleh mengakses alat melalui F12 pintasan papan kekunci.
2. Antara muka pembangunan kini harus dipaparkan, biasanya di bahagian bawah tetingkap penyemak imbas. Alat berikut tersedia, masing-masing boleh diakses dengan mengklik pada tajuk tab masing-masing atau menggunakan pintasan papan kekunci yang disertakan.DOM Explorer: Membolehkan anda untuk mengedit stylesheet dan HTML di halaman aktif, memberikan hasil yang diubah suai semasa anda pergi. Menggunakan fungsi IntelliSense untuk kod autoklampung jika berkenaan. Pintasan papan kekunci: (CTRL + 1) Konsol: Menyediakan keupayaan untuk menyerahkan maklumat debug termasuk kaunter, pemasa, jejak, dan mesej tersuai melalui API bersepadu. Juga, membolehkan anda menyuntik kod ke laman web aktif dan mengubah nilai yang diberikan kepada pemboleh ubah individu dalam masa nyata. Pintasan papan kekunci: (CTRL + 2) Debugger: Membolehkan anda menetapkan titik putus dan debug kod anda semasa ia dijalankan, garis demi baris jika perlu. Pintasan papan kekunci: (CTRL + 3) Rangkaian: Menyenaraikan setiap permintaan rangkaian yang dimulakan oleh pelayar semasa beban halaman dan pelaksanaan termasuk butiran protokol, jenis kandungan, penggunaan lebar jalur, dan banyak lagi. Pintasan papan kekunci: (CTRL + 4) Prestasi: Butiran kadar bingkai, penggunaan CPU, dan metrik yang berkaitan dengan prestasi lain untuk membantu anda mempercepat waktu beban halaman dan kegiatan lain. Pintasan papan kekunci: (CTRL + 5) Memori: Membantu anda mengasingkan dan membetulkan kebocoran memori yang berpotensi pada halaman Web semasa dengan memaparkan tempoh masa penggunaan memori bersama dengan snapshot dari selang waktu yang berbeza. Pintasan papan kekunci: (CTRL + 6) Emulasi: Menunjukkan kepada anda bagaimana halaman aktif akan diberikan dalam pelbagai resolusi dan saiz skrin, meniru telefon pintar, tablet, dan peranti lain. Juga menyediakan keupayaan untuk memodifikasi ejen pengguna dan orientasi halaman, serta mensimulasikan geolokasi yang berbeza dengan memasukkan latitud dan longitud. Pintasan papan kekunci: (CTRL + 7)
3. Untuk memaparkan Konsol manakala dalam mana-mana alat lain klik pada butang persegi dengan pendakap kanan di dalamnya, yang terletak di sudut kanan atas antara muka alat pembangunan.
4. Untuk mengundurkan diri, alat pemaju bersambung supaya menjadi tetingkap berasingan, klik pada butang yang diwakili oleh dua segi empat tepat atau menggunakan pintasan papan kekunci berikut: CTRL + P . Anda boleh meletakkan alat tersebut semula di lokasi asalnya dengan menekan CTRL + P buat kali kedua.

Apple Safari (OS X sahaja)

Dev toolset dev pelbagai mencerminkan komuniti pemaju besar yang menggunakan Mac untuk keperluan reka bentuk dan pengaturcaraan mereka. Selain konsol yang kuat dan ciri pembalakan dan debugging tradisional, mod reka bentuk responsif yang mudah digunakan dan alat untuk membuat pelanjutan penyemak imbas anda juga disediakan.

1. Klik pada Safari dalam menu penyemak imbas, terletak di bahagian atas skrin anda. Apabila menu lungsur muncul, pilih Keutamaan . Anda juga boleh menggunakan pintasan papan kekunci berikut untuk menggantikan item menu ini: COMMAND + COMMA (,)
2. Safari Keutamaan antara muka kini akan dipaparkan, memaparkan tetingkap pelayar anda. Klik pada Advanced ikon, terletak di sebelah kanan sebelah header.
3. The Advanced pilihan sekarang boleh dilihat. Di bahagian bawah skrin ini terdapat pilihan berlabel Papar Kembangkan menu dalam bar menu , disertai dengan kotak centang. Sekiranya tiada tanda semak yang ditunjukkan dalam kotak, klik pada sekali untuk meletakkan satu di sana.
4. Menutup Keutamaan antara muka dengan mengklik pada 'x' merah yang terdapat di sudut kiri atas.
5. Anda kini perlu melihat pilihan baru dalam menu penyemak imbas bernama Membangunkan , terletak di antara Penanda buku dan Tetingkap . Klik pada item menu ini. Menu drop-down kini akan dipaparkan, mengandungi pilihan berikut.Halaman Terbuka Dengan: Membolehkan anda membuka halaman Web aktif di salah satu pelayar lain yang kini dipasang pada Mac anda.Ejen Pengguna: Membolehkan anda memilih daripada lebih daripada sedozen nilai ejen pengguna yang telah ditetapkan termasuk beberapa versi Chrome, Firefox dan Internet Explorer, serta menentukan rentetan tersendiri anda sendiri.Masukkan Mod Reka Bentuk Responsif: Membuat halaman semasa kerana ia akan muncul pada pelbagai peranti dan pada resolusi skrin yang berbeza.Tunjukkan Inspektor Web: Luncurkan antara muka utama untuk alat dev Safari, biasanya diletakkan di bahagian bawah skrin penyemak imbas anda dan mengandungi bahagian yang berikut: Elemen , Rangkaian , Sumber , Garis masa , Debugger , Penyimpanan , Konsol .Tunjukkan Konsol Ralat: Juga melancarkan antara muka alat dev, terus ke Konsol tab yang memaparkan ralat, amaran, dan data log yang boleh dicari lain.Tunjukkan Sumber Halaman: Membuka Sumber tab, yang memaparkan kod sumber untuk halaman aktif yang dikategorikan oleh dokumen.Tunjukkan Sumber Halaman: Melakukan fungsi yang sama dengan Tunjukkan Sumber Halaman pilihan.Paparkan Editor Coretan: Membuka tetingkap baru di mana anda boleh memasukkan kod CSS dan HTML, menyamai keluarannya secara on-the-fly.Tunjukkan Pembina Pelanjutan: Menyediakan keupayaan untuk membuat atau mengedit sambungan Safari dengan CSS, HTML, dan JavaScript.Tunjukkan Rakaman Masa: Membuka Garis masa tab dan mula memaparkan permintaan rangkaian, susun atur dan maklumat rendering serta pelaksanaan JavaScript dalam masa nyata.Kosong Kos: Memadamkan seluruh cache yang kini disimpan pada cakera keras anda.Lumpuhkan Cache: Menghentikan Safari dari caching supaya semua kandungan diambil dari pelayan pada setiap beban halaman.Lumpuhkan Imej: Menghalang imej dari rendering pada semua laman Web.Lumpuhkan Gaya: Abaikan sifat CSS apabila halaman dimuatkan.Lumpuhkan JavaScript: Mengehadkan pelaksanaan JavaScript pada semua halaman.Lumpuhkan Sambungan: Melarang semua sambungan yang dipasang daripada berjalan dalam penyemak imbas.Lumpuhkan Hacks khusus laman: Sekiranya Safari telah diubah suai untuk mengendalikan isu yang jelas secara spesifik ke halaman Web yang aktif, pilihan ini akan menghalang perubahan tersebut supaya halaman tersebut dimuatkan seperti sebelum pengubahsuaian ini diperkenalkan.Lumpuhkan Sekatan Fail Tempatan: Membenarkan penyemak imbas mempunyai akses kepada fail pada cakera setempat anda, tindakan yang dihadkan secara lalai untuk tujuan keselamatan.Lumpuhkan Sekatan Serangan Asal: Sekatan ini diletakkan secara lalai untuk mencegah XSS dan potensi bahaya lain. Walau bagaimanapun, mereka sering perlu dilumpuhkan buat sementara waktu untuk tujuan pembangunan.Benarkan JavaScript dari Medan Carian Pintar: Apabila didayakan, menyediakan keupayaan untuk memasukkan URL dengan javascript: dimasukkan terus ke dalam bar alamat.Rawat Sijil SHA-1 sebagai Tidak Aman: Sijil SSL menggunakan algoritma SHA-1 secara meluas dianggap sebagai hari ketinggalan dan terdedah.