Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

Chrome Dev alat: Markup dan gaya

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

Hal ini diperlukan untuk pengembang web untuk memahami dan tahu bagaimana menggunakan alat-alat pengembang browser, dan dalam tutorial ini, saya akan memperkenalkan Anda ke Chrome Developer Tools. Anda akan belajar beberapa dasar-dasar, dimulai dengan menandai dan styling halaman web.

Sebuah catatan cepat ke pengguna alat pengembang yang ada: tujuan dari tutorial ini adalah untuk memberikan pengenalan relatif dasar alat-alat pengembang Chrome. Jika Anda menggunakan alat pengembangan browser apapun, seperti Firebug di Firefox atau IE alat pengembangan, maka Anda mungkin menemukan bahwa Anda sudah tahu banyak informasi yang dibahas dalam tutorial ini tertentu.


Pengenalan

Alat-alat pengembangan browser memungkinkan Anda untuk menelusuri halaman web dan memeriksa hanya tentang segala sesuatu di halaman. Misalnya Anda dapat:

  • Lihat elemen sesuai kode HTML (misalnya header semacam)
  • mendapatkan gambaran dari CSS yang digunakan dalam halaman dan bagaimana CSS berlaku untuk elemen
  • memodifikasi CSS secara real time dan visual melihat perubahan Anda dalam browser
  • Lihat HTTP permintaan yang dilakukan oleh browser
  • menjalankan kode JavaScript dalam konteks halaman
  • mengidentifikasi bottleneck kinerja dan mengambil berbagai metrik kinerja
  • Poke di sekitar dengan sumber daya offline untuk mencari tahu apa data halaman pertanyaan menyimpan secara lokal

Alat-alat pengembang browser

Sebelum menggali ke dalam alat-alat pengembang Chrome, saya ingin memberi Anda hanya singkat melihat alat-alat pengembangan yang disediakan oleh browser utama. Catatan bahwa ini bukan komprehensif melihat alat ini dan fitur mereka, tetapi saya memberikan informasi dasar untuk setiap alat.

Chrome alat pengembang

Anda dapat menggunakan alat-alat pengembang di Chrome, Chrome Canary dan bahkan kromium.

  • Browser men-Download: google.com/chrome
  • Membuka: Control + Shift + saya
  • Dokumentasi: developers.google.com/chrome-developer-tools
  • Catatan: Juga dapat dibuka dengan mengklik kanan elemen pada halaman dan memilih 'Memeriksa elemen'

Safari WebKit Inspektur

Safari menggunakan kode dari repositori Inspektur Web; Namun, Anda mungkin menemukan bahwa itu tidak diperbarui sesering Chrome.

  • Browser men-Download: apple.com/safari/
  • Membuka: Control + alt + saya atau "Berkembang" > "Tampilkan Web Inspektur"
  • Dokumentasi: developer.apple.com/library/safari/documentation
  • Catatan: Juga dapat dibuka dengan mengklik kanan elemen pada halaman dan memilih 'Memeriksa elemen'

Alat pengembang Firefox

Firefox sekarang datang dengan mengatur sendiri pengembang alat-alat yang memiliki fokus bagus pada sisi visual hal. Bagi mereka yang digunakan untuk Firebug, yang masih tersedia sebagai add-on.

  • Browser men-Download: mozilla.org/en-US/firefox
  • Membuka: klik kanan pada halaman > memeriksa elemen
  • Dokumentasi: developer.mozilla.org/en-US/docs/Tools
  • Catatan: Firebug adalah sebuah ekstensi untuk Firefox.

Internet Explorer Developer Tools

  • Browser men-Download: microsoft.com/ie
  • Membuka: F12
  • Dokumentasi: msdn.microsoft.com/en-us/library/dd565628
  • Catatan: Jika Anda memiliki Chrome Frame terpasang, alat-alat pengembang Chrome akan bekerja dengan IE.

Opera Dragonfly

  • Browser men-Download: opera.com/browser/
  • Membuka: Control + Shift + saya
  • Dokumentasi: opera.com/dragonfly/documentation/
  • Catatan: Dragonfly adalah bagian dari Opera

Persiapan

Catatan: tutorial ini menggunakan membangun Canary Chrome. Oleh karena itu, beberapa fitur yang dibahas dalam artikel ini mungkin atau mungkin tidak tersedia di rilis beta atau stabil.

Sebelum mengambil melihat isi dari elemen panel, mari kita luangkan waktu untuk memahami sedikit kontrol di bagian atas dan bawah. Silakan merujuk ke daftar bernomor di bawah gambar berikut yang menjelaskan elemen UI yang berbeda di jendela alat.

  1. Dekat alat pengembang.
  2. Tombol untuk memilih berbagai alat panel (elemen saat ini dipilih).
  3. Sebuah alat kustom yang diinstal oleh pihak ketiga extention (PageSpeed).
  4. Mengubah tata letak developer tools.
  5. Menunjukkan konsol (akan dibahas dalam tutorial berbeda).
  6. Memilih sebuah elemen dalam alat dengan mengkliknya di halaman.
  7. JavaScript kesalahan dalam halaman.
  8. Buka pengaturan layar tampilan.

Hal ini baik untuk memilih tata letak yang Anda merasa nyaman dengan. Klik sekali di sudut kiri bawah dan melihat bagaimana panel alat pengembang melepaskan diri dari jendela utama--sempurna untuk multi monitor setup. Mengklik dan memegang pada ikon kiri bawah memungkinkan Anda dermaga ke kanan, seperti ini:


Elemen Panel

Panel elemen daftar halaman markup seperti ia dituliskan dalam browser. Perubahan yang dibuat DOM melalui JavaScript ini tercermin dalam unsur-unsur yang ditemukan di panel ini.

Mari kita mendapatkan akrab dengan panel ini. Seperti sebelumnya, mengacu pada daftar item di bawah screenshot berikut yang mengidentifikasi bagian yang berbeda dari panel elemen.

Kuasa yang diberikan kepada kita oleh alat dev ada pendek daripada menakjubkan.

  1. Unsur-unsur seperti yang diberikan dalam dokumen.
  2. Panah menandakan bahwa elemen memiliki anak. Posisi panah menandakan Apakah elemen runtuh atau diperluas.
  3. Elemental remah roti yang dimulai dengan dokumen elemen (<html></html>) dan berakhir dengan elemen yang dipilih saat ini. Melayang di atas setiap remah menyoroti elemen masing-masing dalam jendela browser.
  4. Sebuah sekat yang bergerak untuk memisahkan daftar elemen dari informasi yang gaya.
  5. Togglable panel yang berisi styling (dan lebih) informasi.
  6. Dihitung gaya Tampilkan informasi styling browser dihitung untuk elemen yang dipilih.
  7. Menunjukkan Anda gaya mewarisi dari gaya browser default yang diterapkan ke elemen yang dipilih.
  8. Tampilkan pengguna Anda ditambahkan gaya, seperti: gaya yang Diperoleh dari file styles.css sesuai halaman, gaya ditambahkan melalui JavaScript, dan gaya yang ditambahkan melalui developer tools.
  9. "Aturan gaya baru" tombol. Ini menciptakan aturan gaya baru untuk elemen yang dipilih.
  10. Toggle elemen negara memungkinkan Anda memicu pengguna memulai negara seperti: hover (melayang di atas sesuatu dengan mouse mereka, pengguna: aktif, dan banyak lagi. Gambar menunjukkan tombol dalam keadaan "on"; It's off secara default.
  11. Bagian font menampilkan hanya font yang browser harus men-download.

  12. Memungkinkan Anda untuk mengatur format yang disukai untuk nilai warna. Anda dapat menjaga default ("seperti menulis"), mengubah segalanya hex, menggunakan RGB atau bahkan set ke HSL.
  13. Visualisasi elemen kotak oleh margin yang mengambil, perbatasan dan padding ke account.

Informasi tambahan

  • Apa: Elemen panel memungkinkan untuk melihat dan mengedit informasi gaya dan unsur-unsur.
  • Dimana: Itu adalah panel pertama. Anda juga dapat mengaksesnya dengan mengklik kanan elemen pada halaman dan memilih elemen memeriksa.
  • Mengapa: Ada beberapa kasus digunakan. Anda mungkin ingin memodifikasi DOM dengan menghapus sebuah node atau menambahkan yang baru. Markup samping, panel elemen adalah tempat yang tepat untuk melihat gaya diterapkan sebuah node tertentu. Anda dapat juga menambahkan dan menghapus gaya, serta membuat aturan baru mungkin menambahkan ke stylesheet Anda.

DOM modifikasi

Memodifikasi DOM dalam panel elemen adalah proses yang cukup sederhana. Untuk menghapus sebuah node, cukup klik kanan dan pilih Hapus node. Seperti yang Anda duga, menghapus sebuah node induk juga menghapus anak-anak. Berguna tip: Anda juga dapat menekan tombol delete di keyboard untuk menghapus node yang dipilih.

Mengubah jenis elemen dimungkinkan dengan mengklik ganda pada nama elemen itu sendiri. Sebagai contoh: bagian p pada ayat tag. Tentu saja, mengubah elemen dari satu jenis lain menyebabkan pembukaan dan penutupan Tag untuk mengubah.

renaming an element

Melihat halaman sumber daya sangat penting untuk debugging.

Menambahkan atribut dapat dicapai dengan mengklik kanan pada elemen dan memilih Tambah atribut. Kursor segera posisi sendiri mana Anda akan berharap untuk, dan Anda dapat mulai mengetik atribut Anda ingin menambahkan elemen. Sebagai contoh: class = "judul". Menekan tombol tab pada keyboard Anda posisi kursor ke posisi atribut berikutnya.

Mengedit atribut serupa dengan menambahkan mereka. Menemukan atribut yang ingin Anda edit, dan double klik nama atribut atau nilainya. Mantan menyoroti nama atribut, dan yang kedua menyoroti nilai.

HTML mentah mengedit diaktifkan dengan mengklik kanan pada sebuah elemen dan memilih Edit sebagai HTML.

Menemukan elemen

Alat-alat pengembang menyediakan beberapa techniquies yang berguna untuk menemukan elemen dalam dokumen. Melayang di atas unsur-unsur di panel elemen menyebabkan rendered elemen sesuai untuk disorot dalam halaman. Ini adalah cara yang bagus untuk menemukan yang elemen dalam pengembang alat pertandingan sesuai dengan elemen di halaman.

Hovering over elements in the panel to locate them on the page

Tentu saja, kita tidak melihat unsur-unsur di luar viewport peramban yang disorot saat melayang di atas unsur-unsur yang sesuai di panel elemen. Untungnya, kita melihat tooltip yang menunjukkan arah elemen out-of-viewport. Lapisan gula pada kue, bagaimanapun, adalah gulir ke fitur Lihat ditemukan dalam elemen menu konteks. Itu tidak persis apa yang mengatakan: itu gulungan elemen ke tampilan.

Scrolling an element into view

Alat pengembang yang juga memiliki fitur pencarian. Sementara panel alat dev memiliki fokus, tekan Control + f untuk membuka kotak pencarian. Ini adalah kotak Cari teks sederhana; Jadi, mengetik "tubuh" akan menemukan contoh pertama teks "tubuh" dalam dokumen.

Melihat informasi gaya

Sebelum kita masuk ke panel gaya (sisi kanan) dari unsur-unsur tab, kita dapat mengakses beberapa informasi gaya langsung dari elemen jika memiliki semua tiga margin, paddings dan batas-batas yang ditentukan dalam stylesheet. Melayang di atas salah satu elemen-elemen ini memberi kita sekilas di kotak model, seperti ini:

result of hovering over an element

Ketika Anda bertanya-tanya mengapa sebagian melayang elemen tidak berfungsi seperti yang diharapkan, melihat margin/padding informasi dapat membantu mendiagnosa masalah. Misalnya, Anda mungkin menemukan bahwa elemen lebih luas daripada apa yang Anda diharapkan karena padding tambahan.

Sementara pada subjek margin/paddings/perbatasan, mari kita beralih lebih ke daerah gaya panel elemen dan memeriksa panel "Metrik".

the metrics pane

Hal ini memungkinkan Anda untuk melacak dan mengidentifikasi kemungkinan masalah sebagai ke mengapa elemen menuliskan cara melakukan. Hal ini juga sarana belajar besar; Jika Anda belum mendapatkan kepala Anda di sekitar Model kotak CSS, maka diagram metrik adalah bantuan visual besar.

Panel metrik memungkinkan Anda melihat dimensi elemen, padding, perbatasan dan margin. Perhatikan bagaimana Anda dapat menyorot atas setiap bagian individu untuk mendapatkan representasi visual tentang bagaimana merender dalam browser. Diagram metrik juga memberikan pengukuran berbasis pixel untuk setiap bagian dari elemen, misalnya aturan gaya padding: 10px 5px (10px di bagian atas dan bawah, 5px kanan dan kiri) akan menunjukkan pengukuran yang tepat untuk setiap sisi dari elemen.

Pengaturan gaya informasi

Melihat informasi gaya itu menyenangkan, tapi segera bermain-main dengan gaya halaman apapun peringkat jauh lebih tinggi pada ' ol menyenangkan meter. Apakah itu adalah untuk mendidik diri kita sendiri, bereksperimen dengan desain atau bahkan mengkomunikasikan ide dengan rekan-rekan kami, kuasa yang diberikan kepada kita oleh alat dev ada pendek daripada menakjubkan.

Pastikan panel gaya diperluas dan mengklik hanya untuk hak braket keriting pembukaan. Anda akan melihat kursor otomatis posisi itu sendiri sehingga Anda dapat menulis properti gaya. Ketik nama properti, tekan tab untuk memindahkan kursor ke bagian nilai, dan ketik nilai. Aku akan menambahkan CSS berikut:

Panel elemen daftar halaman markup seperti ia dituliskan dalam browser.

Ketika Anda mulai mengetikkan nama properti, Chrome menyediakan saran, memberi Anda keuntungan dari auto-completion. Keren! Menekan tab memilih pertandingan terdekat untuk apa yang Anda ketik dan menggerakkan kursor ke posisi nilai. Namun, menekan tombol panah kanan menyebabkan kursor untuk tetap di bagian properti tetapi mengisi pertandingan terdekat untuk apa yang Anda ketikkan.

Auto-completion juga bekerja dengan nilai properti. Sebagai contoh, mengetik di "pos" * tab * "fi" * tab * menciptakan properti gaya posisi: fixed. Saat memasuki pixel persentase berbasis nilai-nilai, seperti 15% atau 10px, kita dapat kenaikan dan pengurangan nilai-nilai tersebut menggunakan atas dan bawah tombol panah. Untuk peningkatan 10, gunakan shift + up tombol panah.

Memodifikasi nilai warna sangat mudah berkat warna pemetik. Setelah memasukkan nilai warna, satu-klik di alun-alun kecil, berwarna ke kiri dari nilai untuk memunculkan warna picker alat. Anda juga dapat beralih antara format nilai warna dengan menggunakan shift + klik berwarna persegi kecil.

Anda dapat membuat aturan gaya baru dengan mengklik ikon di panel gaya + kecil. Markup yang tampak seperti:

Secara otomatis menghasilkan aturan gaya berikut:

Markup yang tampak seperti:

Secara otomatis menghasilkan berikut:

Markup yang tampak seperti:

Menghasilkan:

Markup yang tampak seperti:

Secara otomatis menghasilkan:

Tentu saja, gaya aturan dapat dimodifikasi sesuai dengan keinginan Anda.

Panel elemen memberi Anda banyak kekuasaan dengan struktur dan gaya halaman, tapi alat dev memberi kita banyak alat-alat lain yang penting untuk pekerjaan kita.


Sumber daya Panel

Panel sumber daya menunjukkan sumber daya apa halaman menggunakan. Mari kita lihat apa yang menyediakan.

Panel metrik memungkinkan Anda melihat dimensi elemen, padding, perbatasan dan margin.

  1. Tombol untuk aktif panel sumber daya.
  2. Panel kategori menunjukkan berbagai jenis sumber daya yang kita dapat memeriksa. Header sumber daya (seperti "Frame" atau "Sesi penyimpanan") mungkin memiliki kesalahan sebelahnya. Ini menunjukkan ada lebih banyak informasi, dan mengklik header mengungkapkan informasi tersebut. Panel ini resizable; Jadi membuatnya sebagai besar atau kecil seperti yang Anda inginkan.
  3. Halaman sumber daya termasuk font, Gambar, JavaScript, CSS dan halaman itu sendiri dapat ditemukan di sini. Jika halaman menggunakan beberapa frame (misalnya menggunakan bingkai), maka setiap frame muncul sebagai folder terpisah dalam folder induk "Frame". Hal ini berguna untuk memahami hubungan antara bingkai dan sumber daya.
  4. Jika Web SQL database yang digunakan di halaman, ini menunjukkan isinya.
  5. Mirip dengan Web SQL, IndexedDB menampilkan isi dari IndexedDB database.
  6. Menampilkan pasangan kunci/nilai yang disimpan dalam localStorage.
  7. Menampilkan pasangan kunci/nilai yang disimpan dalam sessionStorage.
  8. Daftar cookie yang dibuat oleh domain.
  9. Menampilkan aset cache menurut nyata cache. Bagian ini berisi banyak informasi yang berguna. Sebagai contoh, sumber daya seperti perpustakaan JavaScript akan menunjukkan path sumber daya, ukuran file, dan jenis file.
  10. Menampilkan rincian mengenai sumber daya yang dipilih di panel kiri.

Informasi tambahan

Alat pengembang yang juga memiliki fitur pencarian.

  • Apa: Panel sumber daya menunjukkan sumber-sumber yang terkait dengan halaman.
  • Dimana: Kedua panel, langsung setelah panel elemen dan sebelum panel jaringan.
  • Mengapa: Melihat halaman sumber daya sangat penting untuk debugging. Anda juga mungkin ingin tahu mengenai informasi apa situs-situs lain menyimpan localStorage, kuki atau mekanisme penyimpanan data lain. Selain itu, sumber daya tertentu, seperti localStorage dapat diubah melalui developer tools.

Melihat isi individu Frame

Meskipun kurangnya penggunaan bingkai dalam situs web hari ini, memahami bagaimana untuk memeriksa halaman dengan beberapa frame adalah keterampilan yang berharga untuk memiliki. Screenshot berikut, Anda akan melihat halaman yang berbentuk kolom mana setiap kolom mewakili bingkai berbeda:

viewing multiple frames

Anda dapat menghemat sumber daya komputer Anda

Setiap frame ditempatkan di dalam folder sendiri. Masing-masing folder berisi setiap halaman aset, dan Anda dapat klik pada setiap halaman untuk menampilkan isinya. Melihat isi dari halaman HTML berguna, tetapi kita bisa pergi menggali lebih dalam setiap halaman dan melihat sumber daya. JavaScript, CSS, Gambar, dan bahkan font dapat dilihat! Aset yang berisi kode yang ditampilkan dalam penampil kode developer tools', yang datang dengan sintaks penyorotan dan baris nomor.

Font

Penting untuk dicatat bahwa sistem font, seperti Arial atau Helvatica, tidak terdaftar di bawah font; Bagian font menampilkan hanya font yang browser harus men-download.

Viewing the fonts of a page

Font skala sehingga hal ini dapat cocok dalam wilayah konten sumber daya; oleh karena itu, mengubah ukuran daerah konten sumber daya juga mengubah ukuran aset!

Gambar

Hal ini jelas bahwa beberapa pemikiran yang pergi ke gambar tampilan UI.

Images within a page from the resources panel

Developer tools menampilkan gambar di daerah konten, dan skala gambar sesuai dengan ukuran daerah konten. Gambar dengan transparansi (seperti yang ada di gambar di atas) ditampilkan dengan kotak-kotak di latar belakang, sehingga lebih mudah untuk melihat gambar. Informasi yang berguna lainnya, seperti dimensi, ukuran file, dan jenis MIME yang ditampilkan di bawah gambar.

Script

JavaScript! Mengklik script file akan menampilkan isinya, tetapi tidak banyak yang lain.

JavaScript that a page has loaded

Tapi jangan putus asa; melihat aset adalah hanya bahwa: melihat aset. Dalam tutorial masa depan, kita akan melihat perangkat dev dukungan JavaScript dan kemampuan.

Stylesheet

Anda dapat melihat berbagai stylesheet yang dimuat browser untuk halaman web.

Stylesheets from Chrome dev tools

Seperti dengan file JavaScript, Anda tidak bisa berbuat banyak dengan aset stylesheet.

Sumber daya yang gagal untuk beban

Kadang-kadang, browser akan gagal untuk memuat sumber daya tertentu karena masalah jaringan atau kesalahan pengembang.

A resource which has not been found

Ketika ini terjadi, muncul notifikasi merah kecil ke kanan aset. Nomor menyatakan berapa banyak kesalahan terjadi, dan panel konten menyediakan rincian lebih lanjut tentang kesalahan.

Menyimpan dan melihat sumber daya

Setiap sumber daya mempunyai menu konteks; hanya mengklik kanan pada sumber daya yang menunjukkan menu yang mirip dengan ini:

the context menu shown for assets

Anda dapat menyimpan sumber daya ke komputer Anda, membuka sumber daya dalam tab baru, dan melakukan banyak tugas lainnya. Double-klik sumber terbuka aset dalam tab baru.

Cookie

Seperti yang saya sebutkan sebelumnya, Anda dapat melihat informasi kuki untuk situs web tertentu. Sebagai contoh, menavigasi ke kericau sementara yang masuk dapat menyajikan informasi yang sama untuk apa yang ditampilkan dalam gambar ini:

viewing the cookies on a page

Di sini, kita melihat:

Ketika Anda bertanya-tanya mengapa sebagian melayang elemen tidak berfungsi seperti yang diharapkan, melihat margin/padding informasi dapat membantu mendiagnosa masalah.

  • Nama - nama dari cookie. Sebagai contoh, ada sebuah nama dengan "remember_checked" yang memiliki nilai 1. Hal ini mungkin untuk menyatakan apakah pengguna telah dicentang kotak centang "Ingat saya" selama tanda dalam proses.
  • Nilai - nilai cookie. Untuk "_twitter_sess" bernama cookie, ada sebuah ID sesi panjang dienkripsi untuk nilai.
  • Domain - domain kuki. . twitter.com memungkinkan untuk setiap sub domain di twitter.com.
  • Path - mirip dengan domain, bidang jalan menyatakan jalan yang berlaku. "/" memungkinkan untuk semua jalur.
  • ««««Kedaluwarsa - tanggal browser menghapus cookie.
  • Ukuran - ukuran cookie dalam bytes.
  • HTTP - memaksa cookie hanya dapat diakses melalui protokol HTTP. Ini mencegah mengakses cookie melalui JavaScript dan dapat membantu memerangi cookie mencuri melalui cross site scripting.
  • Aman - memerintahkan browser untuk berkomunikasi data kuki hanya melalui sambungan yang terenkripsi, seperti HTTPS

Anda dapat menghapus cookie dengan mengklik kanan pada cookie dan memilih Hapus dari menu konteks.

Hal ini menarik untuk dicatat bagaimana browser menggunakan informasi kuki untuk menentukan apakah Anda pengguna keasliannya. Saat log in ke Twitter, menghapus cookie "auth_token" dan "_twitter_sess" mendorong kita untuk login setelah menyegarkan halaman. Kericau mungkin toko kami log dalam status dan lainnya bit informasi sensitif dalam cookie tersebut.

Penyimpanan lokal

Menyimpan dan melihat kunci/nilai pasangan di localStorage adalah agak mudah. Daripada menyimpan kunci kita sendiri, kita akan menggunakan situs web yang ada sebagai contoh. Screenshot berikut menunjukkan lokal penyimpanan Lihat dapur tenggelam contoh aplikasi dibuat dengan kerangka aplikasi mobile web Sencha Touch.

Viewing the local storage on a page

Ketika pertama kali melihat halaman, browser membuat permintaan untuk CSS file. Menyegarkan laman terasa banyak snappier karena Sencha disimpan CSS penyimpanan lokal. App wastafel dapur memiliki beberapa pasangan kunci/nilai yang menarik. Sebagai contoh, salah satu kunci terlihat seperti ini:

Nilai untuk kunci yang dimulai dengan ini:

Steve Souders menulis tentang menyimpan aset penyimpanan lokal; sangat menarik dan menyenangkan penggunaan penyimpanan lokal yang dapat meningkatkan kinerja--terutama pada perangkat mobile.

Tembolok aplikasi

Tembolok aplikasi memberitahu browser sumber daya yang harus cache, dan kategori tembolok aplikasi Mari kita lihat apa yang telah cache.

the application cache view in the resources panel

Ada tiga kolom dengan pandangan ini:

  • Sumber daya - path lengkap dari sumber daya. Ekstensi file yang biasanya aset dan file HTML. Salah satu sumber daya adalah berkas manifes itu sendiri!
  • Ketik - dapat bervariasi. Tipe "Nyata" adalah jenis unik diberikan kepada berkas manifes itu sendiri. Jenis lain eksplisit: sumber daya yang secara eksplisit ditetapkan dalam berkas manifes. Jenis mundur menunjukkan sumber daya yang bertindak sebagai mundur untuk sumber daya lain. Master jenis adalah sumber daya yang dimulai cache: halaman itu sendiri.
  • Ukuran - ukuran sumber daya dalam kilobyte atau byte.

Melihat tutorial ini jika Anda tidak akrab dengan HTML5 aplikasi cache.


Sampai jumpa lagi

Kami baru saja akan memulai. Dalam bagian kedua, kita akan melihat panel lainnya dengan sedikit fokus pada kinerja, sehingga kami dapat memberikan pengalaman pengguna yang lebih baik.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.