Piranti sing terpadu kanggo perancang Web, pangembang lan penguji
Saliyane para pembuat browser sing paling akeh fokus ing pangguna saben dina kanggo nggoleki Web, uga ngidini para pangembang Web, perancang lan profesional jaminan kualitas sing mbantu mbangun aplikasi lan situs sing bisa diakses dening pangguna kanthi nggabungake alat sing kuat langsung menyang browser piyambakipun.
Mungkasi dina sing program pamrograman lan pengujian mung ditemokake ing browser sing ngidini sampeyan ndeleng kode sumber kaca lan ora ana liyane. Browser dina iki ngidini sampeyan njupuk nyilem kanthi jero kanthi nindakake kaya ngeksekusi lan debug JavaScript snipet, mriksa lan nyunting elemen DOM, ngawasi lalu lintas jaringan real-time minangka aplikasi utawa kaca kanggo ngidentifikasi kemacetan, nganalisa kinerja CSS, sing mesthine kode sampeyan ora migunakake memori sing akeh banget utawa siklus CPU sing akeh, lan luwih akeh. Saka perspektif testing, sampeyan bisa ngasilake carane aplikasi utawa kaca Web bakal nerjemahake ing browser beda uga ing piranti lan platform sing beda-beda liwat sihir desain responsif lan simulator sing dibangun. Sisih paling apik sing bisa nindakake kabeh iki tanpa kudu ninggalake browser sampeyan!
Tutor ing ngisor iki bakal mlayu babagan carane ngakses piranti pangembang ing sawetara browser Web populer.
Google Chrome
Piranti pangembang Chrome ngidini sampeyan nyunting lan debug kode, ngganti komponen individu kanggo mbabarake masalah kinerja, simulasi layar piranti sing beda-beda kalebu sing ngoper Android utawa iOS , lan nindakake sawetara fungsi migunani liyane.
- Klik tombol menu utama Chrome, ditandai kanthi telung baris horisontal lan dumunung ing pojok tengen ndhuwur browser.
- Nalika menu gulung mudhun katon, tarik kursor mouse liwat pilihan Piranti liyane .
- A sub-menu saiki kudu katon. Pilih pilihan labeled Alat pangembang . Sampeyan uga bisa nggunakake shortcut keyboard ing ngisor item menu iki: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND +
- Antarmuka Piranti Pangembang Chrome saiki kudu ditampilake, kaya sing katon ing gambar iki contone. Gumantung versi Chrome sampeyan, tata letak awal sing sampeyan tingali bisa rada beda saka sing diwenehi ing kene. Pusat utama alat pangembang, biasané dumunung ing sisih ngisor utawa tengen layar, ngemot tab ngisor iki.
Unsur: Nyedhiyakake kemampuan kanggo mriksa kode CSS lan HTML uga ngedit CSS on-the-fly, ningali efek saka owah-owahan sampeyan ing wektu nyata.
Konsol: Konsol JavaScript Chrome ngidini kanggo masang printah langsung uga debugging diagnostik.
Sumber: Ngijini sampeyan debug kode JavaScript liwat antarmuka grafis sing kuat.
Jaringan: Ngategorifikasikaké lan nampilake informasi rinci babagan saben operasi sing ana hubungane karo aplikasi utawa kaca aktif, kalebu panjaluk lengkap lan header jawaban uga metrik wektu sing luwih maju.
Timeline: Ngidini analisis jero-jero saben aktivitas sing kedadeyan ing browser kasebut nalika pangguna kaca utawa aplikasi diwenehake. - Saliyane ing bagean iki, sampeyan uga bisa ngakses alat kasebut liwat >> lambang, sing ana ing sisih tengen tab Timeline .
Profile: Broken down into profiler CPU and Heap profiler sections, nyedhiyakake panggunaan memori komprehensif lan wektu eksekusi sakabèhé saka aplikasi utawa kaca aktif.
Keamanan: Ndhuwur masalah sertifikat lan masalah sing gegandhengan karo keamanan karo kaca utawa aplikasi aktif.
Resources: Iki sampeyan bisa mriksa cookie, panyimpenan lokal, cache app, lan sumber data lokal sing digunakake dening kaca web utawa aplikasi sing saiki.
Audit: Nawakake cara kanggo ngoptimalake wektu mbukak kaca utawa aplikasi lan kinerja umum. - Mode piranti ngidini sampeyan ndeleng kaca aktif ing simulator sing nyetel meh meh kaya bakal katon ing salah siji saka luwih saka limalas piranti, kalebu sawetara model Android lan iOS kondhang kayata iPad, iPhone, lan Samsung Galaxy. Sampeyan uga diwenehi kemampuan kanggo ngrampungake resolusi layar adat supaya cocog karo kabutuhan tartamtu utawa kebutuhan pangujian. Kanggo nguripake lan mateni Mode Piranti , pilih lambang telpon seluler sing ana ing sisih kiwa tab Elemen .
- Sampeyan uga bisa ngatur tampilan lan aran saka piranti pangembang kanthi ngeklik tombol menu sing diwakili dening telung titik sing dipasang vertikal lan dumunung ing sisih tengen sisih ndhuwur tab kasebut. Saka ing menu gulung mudhun iki, sampeyan bisa ngganti ulang dermaga, nuduhake utawa ndhelikake piranti sing beda-beda uga miwiti item luwih maju kayata inspektur piranti. Sampeyan bakal nemokake yen antarmuka alat dev dhewe wis ditrapake banget liwat setelan sing ditemokake ing bagean iki.
Mozilla Firefox
Bagian Pengembang Web Firefox kalebu alat kanggo desainer, pangembang, lan penguji kayata kayata editor gaya lan eyedropper penargetan piksel.
Dianjurake Reading: Top 25 Greasemonkey lan Tampermonkey Scripts User
- Klik tombol menu utama Firefox, diwakili dening telung baris horisontal lan dumunung ing pojok tengen ndhuwur jendhela browser.
- Nalika menu gulung mudhun, pilih lambang label Developer . Menu Pangembang Web saiki kudu ditampilake, ngemot pilihan ing ngisor iki. Sampeyan bakal sok dong mirsani sing paling akeh item menu nduweni trabasan keyboard sing digandhengake karo wong-wong mau.
Toggle Tools: Nampilake utawa ndhelikake antarmuka alat pangembang, biasane diposisikan ing ngisor jendhela browser. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspektur: Ngidini sampeyan mriksa lan / utawa ngapiki CSS lan kode HTML ing kaca aktif uga ing piranti portabel liwat debugging remot. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Console: Ngidini sampeyan ngeksekusi ekspresi JavaScript ing kaca aktif uga nampilake data data sing dicatekake, kalebu peringatan keamanan, panjalukan jaringan, pesen CSS, lan liya-liyane. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Debugger: Debugger JavaScript ngijini sampeyan nemtokake lan ndandani cacat kanthi ngatur breakpoint, mriksa node DOM, sumber eksternal tinju, lan luwih akeh. Minangka kasus karo Inspektur , fitur iki uga ndhukung debugging jarak jauh. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Editor Gaya: Ngidini sampeyan nggawe gaya gaya anyar lan nggabungake karo kaca Web sing aktif, utawa ngowahi lembar sing wis ana lan nyoba cara owah-owahan gawe ing browser kanthi mung siji klik. Shortcut keyboard: Mac OS X, Windows ( SHIFT + F7 )
Kinerja: Nyedhiyakake rincian rinci kinerja jaringan kaca aktif, data frame rate, wektu eksekusi JavaScript, state flash, lan liya-liyane. Shortcut keyboard: Mac OS X, Windows ( SHIFT + F5 )
Jaringan: Ndhaptar saben request jaringan sing diprakirakake dening browser bebarengan karo metode sing cocog, domain asal, jinis, ukuran, lan wektu sing liwati. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Toolbar pangembang: Mbukak interpreter baris perintah interaktif. Ketik bantuan menyang interpreter kanggo dhaptar kabeh printah sing kasedhiya lan sintaks sing bener. Shortcut keyboard: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Ndhukung kemampuan kanggo nggawé lan nglakokaké aplikasi Web liwat piranti nyata sing nganggo Firefox OS utawa liwat Firefox OS Simulator. Shortcut keyboard: Mac OS X, Windows ( SHIFT + F8 )
Browser Console: Nyedhiyakake fungsi sing padha karo Web Console (ndeleng ndhuwur). Nanging, kabeh data sing dikembangke kanggo kabeh aplikasi Firefox (kalebu ekstensi lan fungsi tingkat browser) minangka oposisi mung kaca Web aktif. Shortcut keyboard: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Tampilan Desain Responsif: Ngidini sampeyan langsung ndeleng kaca Web kanthi resolusi, tata letak, lan ukuran layar sing beda kanggo niru sawetara piranti kalebu tablet lan smartphone. Shortcut keyboard: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Nampilake kode warna hex kanggo piksel sing dipilih.
Scratchpad : Ngijini nulis, nyunting, nggabungake lan nglakokake cuplikan kode JavaScript saka jeroning jendhela Firefox. Shortcut keyboard: Mac OS X, Windows ( SHIFT + F4 )
Page Source: Alat pangembang basis browser asli, pilihan iki mung nampilake kode sumber sing kasedhiya kanggo kaca aktif. Shortcut keyboard: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Njaluk Piranti Liyane: Mbukak koleksi Toolbox ing Pengembang Web ing situs resmi Mozilla, sing nampilake babagan ekstase populèr kayata Firebug lan Greasemonkey.
Microsoft Edge / Internet Explorer
Umumé diarani minangka Alat Pangembang F12 , penghormatan kanggo trabasan keyboard sing wis ngluncuraké antarmuka wiwit versi sadurungé Internet Explorer, toolset dev ing IE11 lan Microsoft Edge wis teka kanthi cara sing lawas wiwit wiwitan kanthi nyiyapake grup banget migunani pemantau, debuggers, emulators, lan kompiler sing on-the-fly.
- Klik ing menu Tindakan liyane , diwakili dening telung titik lan dumunung ing pojok tengen ndhuwur jendhela browser. Nalika menu gulung mudhun, pilih opsi label F12 Alat Panuntun . Minangka aku wis kasebut, sampeyan uga bisa ngakses alat kasebut liwat trabasan keyboard F12 .
- Antarmuka pangembangan saiki kudu ditampilake, biasane ing ngisor jendhela browser. Alat kasebut kasedhiya, saben diakses kanthi ngeklik ing judhul tab sing gegandhengan utawa nggunakake trabasan keyboard sing diiringi.
DOM Explorer: Ngijini sampeyan nyunting stylesheets lan HTML ing kaca aktif, ngowahi asil sing diowahi nalika sampeyan lunga. Nggunakke fungsi IntelliSense kanggo kode autocomplete ing ngendi ditrapake. Shortcut keyboard: (CTRL + 1)
Console: Nyedhiyakake kemampuan kanggo ngirim informasi debugging kalebu counter, timer, jejak, lan pesen khusus liwat API terpadu. Uga, ngijini sampeyan nyuntik kode menyang kaca Web aktif lan ngowahi angka-angka sing ditugasake marang variabel individu ing wektu nyata. Shortcut keyboard: (CTRL + 2)
Debugger: Monggo sampeyan nyetel breakpoints lan debug kode sampeyan nalika ngeksekusi, baris demi baris yen perlu. Shortcut keyboard: (CTRL + 3)
Jaringan: Ndhaptar saben request jaringan sing diprakirakake dening browser sajrone mbukak lan eksekusi halaman kalebu rincian protokol, jinis isi, panggunaan bandwidth, lan liya-liyane. Shortcut keyboard: (CTRL + 4)
Kinerja: Rangka kothak rincian, pemanfaatan CPU, lan metrik sing gegandhengan karo kinerja kanggo mbantu sampeyan nyepetake wektu mbukak kaca lan aktivitas liyane. Shortcut keyboard: (CTRL + 5)
Memori: Mbantu sampeyan ngisolasi lan mbenerake bocoran memori potensial ing kaca Web saiki kanthi nampilake timeline panggunaan memori bebarengan karo jepretan saka interval wektu sing beda-beda. Shortcut keyboard: (CTRL + 6)
Emulasi: Nuduhake sampeyan carane kaca aktif bakal nerjemahake ing macem-macem resolusi lan ukuran layar, emulating smartphones, tablets, and other devices. Uga nyedhiyakake kemampuan kanggo ngowahi agen pangguna lan orientasi halaman, uga nyinkronake geolokasi beda kanthi ngetik garis lintang lan bujur. Shortcut keyboard: (CTRL + 7) - Kanggo nampilake Console nalika ing piranti apa wae, klik tombol kothak kanthi krenjang tengen ing papan kasebut, ing pojok sisih ndhuwur saka antarmuka alat pangembangan.
- Kanggo undock, antarmuka pangembang supaya dadi jendhela kapisah, klik tombol sing dituduhake nganggo rong persegi panjang cascading utawa nggunakake trabasan keyboard ing ngisor iki: CTRL + P. Sampeyan bisa nyelehake piranti kasebut ing lokasi asli kanthi mencet CTRL + P kaping pindho.
Apple Safari (OS X mung)
Safari's dev toolset sing nyakup komunitas pangembang gedhe sing nggunakake Mac kanggo kabutuhan desain lan program. Saliyane konsol kuat lan fitur logging lan debugging tradisional, mode desain responsif sing gampang gunakake lan alat kanggo nggawe ekstensi browser sampeyan uga kasedhiya.
- Klik ing Safari ing menu browser, sing ana ing sisih ndhuwur layar. Nalika menu gulung mudhun, pilih Preferensi . Sampeyan uga bisa nggunakake trabasan tombol ing ngisor iki ing panggonan item menu iki: COMMAND + COMMA (,)
- Antarmuka preferensi Safari saiki kudu katon, overlaying jendhela browser. Klik ing lambang Advanced , dumunung ing sisih tengen sisih tengen header.
- Preferensi Lanjut saiki kudu katon. Ing ngisor layar iki ana pilihan labeled Show Develop menu ing menu bar , diiringi kothak mriksa. Yen ora ana tandha tandha ing kothak, klik sapisan kanggo nyelehake ing kono.
- Nutup antarmuka Preferensi kanthi ngeklik abang 'x' ditemokake ing sudhut kiwa ndhuwur.
- Sampeyan saiki bakal sok dong mirsani opsi anyar ing menu browser sing jenenge Develop , dumunung antarane Tetenger lan Window . Klik menu item iki. A menu gulung mudhun saiki kudu ditampilake, ngemot pilihan ing ngisor iki.
Bukak Page Kanthi: Ngijini sampeyan mbukak kaca Web aktif ing salah sijine browser liyane sing saiki diinstal ing Mac.
Agen Panganggo: Monggo sampeyan milih saka luwih saka selusin nilai panganggo sing didéfinisi sadurunge kalebu sawetara versi Chrome, Firefox lan Internet Explorer, uga nemtokake senar khusus sampeyan.
Ketik Mode Desain Responsif : Nuduhake kaca saiki minangka bakal katon ing macem-macem piranti lan ing resolusi layar sing beda.
Tampilake Inspektur Web: Nglayokake antarmuka utama kanggo alat dev Safari, biasane dilebokake ing dhasar layar browser lan ngemot bagean ing ngisor iki: Unsur , Jaringan , Sumber Daya , Jangka Waktu , Debugger , Panyimpenan , Konsol .
Nuduhake Konfigurasi Kesalahan: Disimpen uga antarmuka alat dev, langsung menyang tab Konsol sing nuduhake kasalahan, peringatan, lan data log sing bisa ditemokake liyane.
Tampilake Sumber Kaca: Mbukak tab Resources , sing nuduhake kode sumber kanggo kaca aktif sing dikategorikake dening document.
Tampilake Page Resources: Nindakake fungsi sing padha karo opsi Show Page Source .
Show Snippet Editor: Mbukak jendela anyar ing ngendi sampeyan bisa ngetik kode CSS lan HTML, pratinjau keluarane on-the-fly.
Tampilake Extension Builder: Nyedhiyakake kemampuan kanggo nggawe utawa ngedit ekstensi Safari nganggo CSS, HTML, lan JavaScript.
Tampilake Timeline Rekaman: Mbukak tab Timeline lan wiwit nampilake panjalukan jaringan, tata letak lan informasi rendering uga execution JavaScript ing wektu nyata.
Cache Empires: Mbusak kabeh cache saiki sing disimpen ing hard drive.
Nonaktifake Caches: Mungkasi Safari saka caching supaya kabeh isi dijupuk saka server marang saben kaca mbukak.
Nonaktifkan Gambar: Ngalangi gambar saka rendering ing kabeh kaca Web.
Nonaktif Gaya: Ngeculke sifat CSS nalika kaca dimuat.
Mateni JavaScript: Matesi eksekusi JavaScript ing kabeh kaca.
Pateni Ekstensi: Nolak kabeh ekstensi diinstal saka mlaku ing browser.
Nonaktif Hacks Situs-spesifik: Yen Safari wis diowahi kanthi tegas nangani masalah (s) tartamtu menyang kaca Web aktif, pilihan iki bakal mblokir owah-owahan kasebut supaya kaca bakal diundur amarga bakal ngowahi modifikasi kasebut.
Mateni Watesan Gambar Lokal: Ngidini browser duwe akses menyang file ing disk lokal, tumindak sing diwatesi kanthi standar kanggo alasan keamanan.
Nonaktifake Watesan Asal-Usul: Watesan iki dicithak kanthi gawan kanggo nyegah XSS lan bebaya potensial liyane. Nanging, asring kasebut kudu dipateni kanggo tujuan pembangunan.
Ngidini JavaScript saka Bidang Panelusuran Cerdas: Yen aktif, menehi kemampuan kanggo ngetik URL nganggo javascript: digabung langsung menyang bilah alamat.
Nambani sertifikat SHA-1 minangka Insecure: Sertifikat SSL nggunakake algoritma SHA-1 sing dianggep asale ora ono lan ngrugekke.