Toolsets bersepadu untuk pereka Web, pemaju dan penguji
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.
- Klik pada butang menu utama Chrome, ditandakan dengan tiga garisan mendatar dan terletak di sudut kanan atas penyemak imbas.
- Apabila menu lungsur muncul, gerakkan kursor tetikus anda ke atas pilihan Lagi alat .
- Sub-menu kini harus muncul. Pilih pilihan yang dilabel alat Pembangun . Anda juga boleh menggunakan pintasan papan kekunci berikut untuk menggantikan item menu ini: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- 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 penyahpepijat diagnostik.
Sumber: Membolehkan anda membuat kod JavaScript JavaScript melalui antara muka grafik yang kuat.
Rangkaian: Mengelaskan dan memaparkan maklumat terperinci mengenai setiap operasi berkaitan pada aplikasi atau halaman aktif, termasuk permintaan lengkap dan tajuk respons serta metrik masa yang lebih maju.
Garis masa: Membolehkan analisis mendalam setiap aktiviti yang berlaku dalam penyemak imbas sebaik sahaja permintaan halaman atau aplikasi dimulakan. - Sebagai tambahan kepada bahagian ini, anda juga boleh mengakses alat-alat berikut melalui >> ikon, terletak di sebelah kanan tab Timeline .
Profil: Broken ke dalam profiler CPU dan bahagian profiler Heap , 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 atau aplikasi aktif.
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 atau laman beban aplikasi dan prestasi umum. - Mod Peranti membolehkan anda melihat halaman aktif dalam simulator yang menjadikannya hampir tepat kerana ia akan muncul pada salah satu daripada lebih dozen 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 menghidupkan dan mematikan Mod Peranti , pilih ikon telefon mudah alih yang terletak terus ke sebelah kiri tab Unsur .
- 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 yang disyorkan: Skrip Pengguna Top 25 Greasemonkey dan Tampermonkey
- Klik pada butang menu utama Firefox, yang diwakili oleh tiga garisan mendatar dan terletak di sudut kanan atas tetingkap penyemak imbas.
- Apabila menu lungsur muncul, pilih ikon yang dilabel Pemaju . Menu Pembangun Web kini harus dipaparkan, mengandungi pilihan berikut. Anda akan melihat bahawa kebanyakan item menu mempunyai pintasan papan kekunci yang berkaitan dengannya.
Togol Tools: Memaparkan atau menyembunyikan antara muka alat pemaju, biasanya diletakkan di bahagian bawah tetingkap penyemak imbas. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspektor: Memungkinkan anda untuk memeriksa dan / atau tweak CSS dan kod HTML pada halaman aktif serta pada peranti mudah alih melalui debugging 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 yang dilog termasuk peringatan keselamatan, permintaan rangkaian, mesej CSS dan banyak lagi. Pintasan papan kekunci: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: JavaScript Debugger membolehkan anda menentukan dan memperbaiki kecacatan dengan menetapkan titik putus, memeriksa nod DOM, sumber luar tinju hitam, dan banyak lagi. Begitu juga dengan Inspektor , ciri ini juga menyokong debugging 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 penyemak imbas dengan hanya satu klik. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F7 )
Prestasi: Menyediakan pecahan terperinci prestasi rangkaian halaman aktif, data kadar bingkai, waktu 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 Pembangun: Membuka penterjemah talian arahan interaktif. Masukkan bantuan ke penterjemah untuk senarai semua perintah yang ada dan sintaks yang betul. Pintasan papan kekunci: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Menyediakan keupayaan untuk membuat 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: Memungkinkan anda untuk melihat halaman Web dalam resolusi, susun atur, dan saiz skrin yang berbeza 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 yang dipilih secara 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 Peralatan Lebih: Membuka koleksi Kotak Alat Pengembang Web di laman web rasmi Mozilla, yang menampilkan kira-kira sedozen pelanjutan popular seperti Firebug dan Greasemonkey.
Microsoft Edge / Internet Explorer
Digunakan secara umum sebagai Alat Pembangun F12 , penghormatan kepada pintasan papan kekunci yang telah melancarkan antara muka sejak versi Internet Explorer terdahulu, tool set dev di IE11 dan Microsoft Edge telah datang jauh sejak penubuhannya dengan menawarkan kumpulan yang sangat berguna monitor, debugger, emulator, dan penyusun di atas yang terbang.
- Klik pada menu Lagi tindakan , diwakili oleh tiga titik dan terletak di sudut kanan atas tetingkap penyemak imbas. Apabila menu lungsur muncul, pilih pilihan berlabel F12 Alat Pembangun . Seperti yang telah saya sebutkan, anda juga boleh mengakses alat melalui pintasan papan kekunci F12 .
- 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 stylesheets dan HTML di halaman aktif, memaparkan hasil yang diubah suai semasa anda pergi. Menggunakan fungsi IntelliSense untuk kod autoklampung jika berkenaan. Pintasan papan kekunci: (CTRL + 1)
Console: Menyediakan keupayaan untuk menyerahkan maklumat debugging 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 melaksanakan, baris demi baris jika perlu. Pintasan papan kekunci: (CTRL + 3)
Rangkaian: Menyenaraikan setiap permintaan rangkaian yang dimulakan oleh penyemak imbas 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 berkaitan prestasi lain untuk membantu anda mempercepatkan masa beban halaman dan aktiviti 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-sama dengan syot kilat dari selang waktu yang berlainan. Pintasan papan kekunci: (CTRL + 6)
Emulasi: Menunjukkan kepada anda bagaimana halaman aktif akan diberikan dalam pelbagai resolusi dan saiz skrin, mencantumkan 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) - Untuk memaparkan Konsol semasa dalam mana-mana alat lain, klik pada butang persegi dengan pendakap kanan di dalamnya, yang terletak di sudut kanan atas antara muka alat pembangunan.
- Untuk undock, 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 di lokasi asalnya dengan menekan CTRL + P untuk 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.
- Klik pada Safari dalam menu pelayar, yang terletak di bahagian atas skrin anda. Apabila menu lungsur muncul, pilih Pilihan . Anda juga boleh menggunakan pintasan papan kekunci berikut sebagai ganti item menu ini: COMMAND + COMMA (,)
- Antara muka Keutamaan Safari kini harus dipaparkan, overlaying tetingkap pelayar anda. Klik pada ikon Advanced , terletak di sebelah kanan sebelah kanan pengepala.
- Keutamaan lanjutan kini boleh dilihat. Di bahagian bawah skrin ini terdapat pilihan yang diberi label Show Show menu dalam bar menu , disertai dengan kotak centang. Sekiranya tiada tanda semak yang ditunjukkan dalam kotak, klik pada sekali untuk meletakkan satu di sana.
- Tutup antara muka Pilihan dengan mengklik pada 'x' merah yang terdapat di penjuru kiri sebelah atas.
- Anda kini perlu melihat pilihan baru dalam menu penyemak imbas bernama Berkembang , yang terletak di antara Penanda Halaman 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.
Agen 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 : Lakukan 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 Daya , Jangka masa , Debugger , Penyimpanan , Konsol .
Tunjukkan Ralat Konsol: Juga melancarkan antara muka alat dev, terus ke tab Konsol yang memaparkan ralat, amaran, dan data log yang boleh dicari lain.
Tunjukkan Sumber Halaman: Membuka tab Sumber , yang memaparkan kod sumber untuk halaman aktif yang dikategorikan oleh dokumen.
Tunjukkan Sumber Halaman: Melakukan fungsi yang sama seperti pilihan Show Page Source .
Paparkan Editor Coretan: Buka tetingkap baru di mana anda boleh memasukkan kod CSS dan HTML, pratonton keluarannya on-the-fly.
Tunjukkan Pembina Pelanjutan: Menyediakan keupayaan untuk membuat atau mengedit sambungan Safari dengan CSS, HTML, dan JavaScript.
Tunjukkan Rangkauan Masa: Membuka tab Timelines dan mula memaparkan permintaan rangkaian, susun atur dan maklumat rendering serta pelaksanaan JavaScript dalam masa nyata.
Cak Sampah: Memadam seluruh cache yang sedang 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: Hadkan pelaksanaan JavaScript pada semua halaman.
Lumpuhkan Sambungan: Melarang semua sambungan yang dipasang daripada berjalan dalam penyemak imbas.
Lumpuhkan Hacks yang khusus untuk Situs: Jika Safari telah diubahsuai untuk mengendalikan isu-isu tertentu secara eksplisit ke halaman Web aktif, pilihan ini akan menghalang perubahan tersebut supaya halaman dimuatkan seperti sebelum pengubahsuaian ini diperkenalkan.
Lumpuhkan Sekatan Fail Tempatan: Memungkinkan 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 yang 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 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.