Pelayar Devtools Rahsia: Permulaan, Rangkaian dan Prestasi

Sepanjang dekad yang lalu, alat pemaju pelayar (DevTools) telah berkembang dari konsol JavaScript asas kepada persekitaran pembangunan dan penyahpepijatan bersepadu sepenuhnya. Sebarang aspek aplikasi web kini boleh diubahsuai dan diperiksa, tetapi beberapa orang akan menyelidiki ciri -ciri canggihnya. Artikel ini akan meneroka pelbagai ciri yang anda mungkin atau belum dipertimbangkan. Kebanyakan masa, kami akan merangkumi Devtools Chrome, tetapi jika berkenaan, alternatif Firefox juga akan ditunjukkan.

mata utama

Alat Pemaju Pelayar (DevTools) telah berkembang menjadi persekitaran pembangunan dan debug yang bersepadu yang membolehkan pengguna mengubahsuai dan memeriksa sebarang aspek aplikasi web. Pintasan papan kekunci, pilihan dok, tetapan dan ciri permulaan auto dapat meningkatkan kecekapan pemaju.
DevTools menyediakan banyak ciri pembangunan web yang berguna termasuk pemeriksaan kebolehaksesan kontras warna, penangkapan skrin, mencari CSS dan JavaScript yang tidak digunakan, melumpuhkan caching rangkaian, had kelajuan rangkaian, tindak balas rangkaian penapis, permintaan rangkaian blok, mencipta permintaan AJAX, membolehkan overlay fail offline, Semak penyimpanan, dan banyak lagi.
Devtools Chrome menyediakan monitor prestasi dan panel audit untuk analisis masa nyata penggunaan CPU, saiz timbunan JavaScript, nod Dom, pendengar acara, pengiraan semula gaya, dan banyak lagi. Panel audit juga menganalisis prestasi, kebolehcapaian, amalan terbaik, dan SEO dalam pandangan mudah alih dan desktop.

Pintasan papan kekunci

Menggunakan menu untuk memulakan DevTools akan membuang masa yang berharga! Sila cuba salah satu pilihan berikut:

f12
CTRL SHIFT I
opsyen cmd J
atau klik kanan mana-mana elemen pada halaman dan pilih Periksa atau Semak Elemen.

Chrome menyediakan bantuan pintasan papan kekunci yang berguna. Di DevTools, tekan F1 atau pilih tetapan dari tiga menu titik di sudut kanan atas. Kemudian pilih "Kunci Pintasan" dari menu:

Dolocation

Panel DevTools boleh diletakkan di sebelah kiri, kanan, atau bawah tetingkap penyemak imbas. Sekiranya anda memerlukan lebih banyak ruang, anda boleh mengosongkannya ke tetingkap yang berasingan. Pilihan dok tersedia di menu tiga titik utama di Chrome:

Pilihan Pintu di Firefox:

Tetapan

Tetapan DevTool boleh diakses melalui menu yang sama atau dengan menekan F1. Ini membolehkan anda menetapkan pilihan paparan untuk alat, tema, saiz tab, unit warna, dan banyak lagi.

Secara automatik memulakan devtools

Apabila bekerja di aplikasi web, mungkin lebih praktikal untuk membuat pintasan desktop yang berdedikasi untuk memulakan penyemak imbas, buka URL, dan mulakan DevTools dalam satu langkah. Untuk Chrome, gunakan pilihan baris arahan Chrome berikut untuk membuat ikon desktop:

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

di mana https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 adalah url pembangunan anda. Operasi serupa untuk Firefox:

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

(nama fail yang boleh dilaksanakan mungkin berbeza dari sistem ke sistem.)

mod yang tidak kelihatan digunakan semasa pembangunan

mod yang tidak dapat dilihat/peribadi tidak mengekalkan data seperti kuki dan localStorage selepas menutup penyemak imbas. Mod ini sesuai untuk menguji aplikasi web progresif (PWAS) dan sistem log masuk. Anda secara manual boleh memulakan penyemak imbas dan memasukkan mod incognito, atau anda boleh melakukannya dengan menambah --Encognito ke baris arahan Chrome atau -Membuat ke baris arahan Firefox.

Panel Perintah

Chrome Devtools menyediakan panel arahan seperti editor. Tekan CTRL Shift P:

Ia menyediakan akses cepat ke kebanyakan ciri dan fail sumber (tekan Backspace untuk memadam>).

Pergi ke Konsol

Konsol sangat berguna tidak kira panel DevTool yang anda gunakan. Tekan ESC untuk memaparkan dan menyembunyikan tetingkap konsol di panel bawah.

Cari warna halaman

Apabila anda mengklik sebarang atribut warna CSS, kebanyakan pelayar memaparkan pemilih warna. Chrome juga memaparkan warna yang digunakan di halaman di bahagian bawah panel:

Panel ini boleh diklik untuk memaparkan lebih banyak warna.

Fungsi bantuan kontras warna

pemilih warna juga memaparkan nisbah kontras yang menunjukkan perbezaan visual antara teks latar depan dan warna latar belakang. Klik nisbah untuk melihat bagaimana ia dinilai dengan piawaian akses AA dan AAA yang memastikan kebanyakan orang dapat membaca teks:

Mana -mana warna pada bar warna yang berada di bawah baris ini akan disyorkan oleh kontras AA.

tangkapan tangkapan

dari panel arahan Chrome (CTRL Shift P), ketik "screenshot" dan pilih pilihan untuk menangkap viewport semasa, keseluruhan halaman, atau elemen yang aktif sekarang. Fail akan disimpan ke folder muat turun. (Chrome 74 juga membolehkan penangkapan kawasan.) Firefox menyediakan sistem tangkapan skrin yang boleh diakses dari kebanyakan menu. Di samping itu, anda boleh klik kanan mana-mana elemen dalam paparan DOM dan pilih nod tangkapan skrin.

Cari CSS dan JavaScript yang tidak digunakan

Panel liputan baru Chrome membolehkan anda dengan cepat mencari kod yang tidak digunakan. Pilih "Liputan" dari submenu DevTools More Tools, kemudian klik butang Rekod dan semak imbas dalam aplikasi. Kemudian klik mana -mana fail untuk membuka kod sumbernya:

Kod yang tidak digunakan diserlahkan dalam slot nombor dalam baris. Perhatikan bahawa Chrome nampaknya tidak mengingati kod yang digunakan/tidak digunakan apabila anda menavigasi ke halaman baru, tetapi saya menjangkakan ini akan tersedia dalam pelepasan masa depan.

Lumpuhkan Cache Rangkaian

Pilih Cache Lumpuhkan dalam panel rangkaian untuk memuat semua fail dari rangkaian. Ini memberikan penilaian yang lebih baik untuk memuatkan halaman pertama.

had kelajuan rangkaian

Begitu juga, ia tidak masuk akal untuk menguji sistem yang disambungkan 1Gbps apabila kebanyakan pengguna mengaksesnya lebih dari 3G. Panel Rangkaian menyediakan menu drop-down dalam talian di Chrome dan menu lungsur had di Firefox, membolehkan anda mensimulasikan kelajuan rangkaian tertentu.

Chrome juga menyediakan ciri untuk menambah profil sekatan anda sendiri.

Respons Rangkaian Rangkaian

Secara lalai, panel rangkaian memaparkan jadual untuk permintaan dan respons mengikut urutan muat turun. Walau bagaimanapun, anda boleh mengklik mana -mana tajuk jadual untuk menyusun semula mengikut nama, status, jenis, saiz, masa tindak balas, dll.

Permintaan tidak lengkap

Untuk mencari permintaan HTTP yang tidak lengkap atau tidak responsif, lawati panel rangkaian dan masukkan: berjalan di dalam kotak penapis.

penapis mengikut saiz tindak balas

Dalam panel rangkaian, masukkan lebih besar daripada: s dalam kotak penapis, di mana S berada di bait (1000000), kilobytes (1000k), atau megabytes (1m). Tanggapan yang lebih besar daripada saiz yang dipilih akan dipaparkan. Untuk mencari tindak balas yang lebih kecil, gunakan -larger -daripada: s.

Penapis kandungan pihak ketiga

Dalam panel rangkaian, enter -domain:*. Yourdomain dalam kotak penapis, di mana anda adalah URL utama anda, seperti sitepoint.com. Respons yang tinggal menunjukkan permintaan pihak ketiga untuk CDN, pelacak, butang media sosial, dan banyak lagi. Bilangan permintaan dan saiz muatan dipaparkan dalam bar status di bawah jadual.

Permintaan rangkaian blok

Semasa ujian, pelacak, analisis, widget media sosial, atau sebarang permintaan lain boleh disekat. Klik kanan sebarang permintaan HTTP dalam panel rangkaian Chrome dan pilih URL Permintaan Blok untuk menyekat URL, atau pilih domain permintaan blok untuk menyekat sebarang permintaan ke domain. Panel penyekat permintaan dibuka di mana anda boleh menambah atau memadam URL atau domain tambahan:

Cipta semula permintaan AJAX

Operasi AJAX XMLHTTPREQUEST boleh diperiksa dengan mengklik kanan entri pada jadual rangkaian dan memilih pilihan salinan seperti curl, mengambil, atau PowerShell. Ini mewujudkan arahan dengan tajuk, ejen pengguna, cookies, dan sumber perujuk yang sama yang boleh disisipkan ke editor atau terminal.

Dayakan fail Offline Overwrite

Chrome membolehkan menyimpan sebarang fail ke sistem anda supaya penyemak imbas dapat mendapatkan fail dari peranti dan bukannya rangkaian. Sebagai contoh, jika anda ingin memuat atau mengedit aset yang biasanya diakses dari CDN, ini boleh membolehkan pembangunan luar talian. Buka panel Overlay di sumber, klik Pilih Folder Overlay, dan pilih folder yang sesuai.

Sekarang, klik kanan mana-mana sumber dalam panel rangkaian dan pilih simpan untuk menimpa. Mana -mana halaman semula halaman berikutnya akan mengakses fail dari sistem tempatan dan bukannya web. Fail yang disimpan juga boleh diubah suai.

Periksa penyimpanan

Panel Aplikasi di Chrome dan Panel Penyimpanan di Firefox membolehkan anda menyemak, mengubah suai, dan memadam nilai yang disimpan dalam kuki, penyimpanan cache, localStorage, sessionstorage, indexeddb, dan web sql (jika disokong). Panel penyimpanan yang jelas Chrome juga membersihkan semua nilai domain, yang berguna apabila membangunkan aplikasi web progresif.

monitor prestasi

Monitor prestasi baru Chrome boleh diakses dari menu DevTools More Alat dan menyediakan analisis penggunaan CPU, saiz timbunan JavaScript, nod Dom, pendengar acara, pengiraan semula gaya, dan banyak lagi. Tidak seperti panel prestasi utama, carta dikemas kini dalam masa nyata - tidak perlu merakam fail konfigurasi terlebih dahulu.

Audit

Panel audit Chrome pada asalnya direka untuk menilai keupayaan aplikasi web progresif, tetapi alat ini telah berkembang menjadi alat yang sama untuk menganalisis prestasi, kebolehcapaian, amalan terbaik, dan SEO dalam pandangan mudah alih dan desktop.

Ia tidak akan menemui semua masalah, anda mungkin tidak bersetuju dengan beberapa perkara, tetapi ia adalah cara yang berguna untuk menilai masalah yang berpotensi dengan cepat. Semoga anda menemui sesuatu yang baru. Lebih banyak rahsia Devtool akan datang tidak lama lagi ...

(bahagian Soalan Lazim dalam teks asal harus dimasukkan di sini. Oleh kerana panjang artikel, ia akan ditinggalkan di sini. Bahagian FAQ dapat diperbaharui seperti yang diperlukan)

Atas ialah kandungan terperinci Pelayar Devtools Rahsia: Permulaan, Rangkaian dan Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!