Melihat apa yang baru di Chrome Devtools pada tahun 2020

Melihat ciri -ciri baru Chrome Devtools pada tahun 2020

Artikel ini akan membawa anda dengan cepat mempelajari beberapa ciri baru Chrome Devtools. Kami akan memperkenalkannya secara ringkas, kemudian menyelam ke banyak ciri DevTools baru dan belajar tentang kemajuan dalam pelayar lain. Saya terus memberi tumpuan kepada aspek -aspek ini kerana saya mencipta tip dev, koleksi devtools terbesar yang anda dapati dalam talian!

Adalah penting untuk memahami perubahan dalam DevTools kerana ia terus berkembang, dengan ciri -ciri baru yang direka untuk membantu kami meningkatkan pengalaman pembangunan dan debug kami.

Mari kita lihat ciri -ciri terkini dan terbaik. Walaupun versi Chrome yang stabil mempunyai kebanyakan ciri -ciri ini, saya menggunakan Chrome Canary kerana saya suka berada di barisan hadapan teknologi.

Mercusuar

Lighthouse adalah alat sumber terbuka untuk mengaudit laman web, biasanya di sekitar prestasi, SEO, kebolehcapaian, dan banyak lagi. Mercusuar telah dibundel bersama sebagai sebahagian daripada Devtools untuk beberapa waktu, bermakna anda boleh menemuinya di panel yang dipanggil ... Lighthouse!

Saya sangat suka Lighthouse kerana ia adalah salah satu bahagian paling mudah untuk digunakan. Klik "Hasilkan Laporan" dan anda akan segera mendapatkan komen yang boleh dibaca manusia untuk laman web, seperti:

Dokumen Gunakan saiz fon yang mudah dibaca, 100% teks mudah dibaca

atau:

Elakkan saiz DOM yang berlebihan (1,189 elemen)

Hampir setiap ulasan dikaitkan dengan dokumentasi pemaju yang menjelaskan mengapa semakan gagal dan bagaimana ia dapat diperbaiki.

Cara terbaik untuk memulakan dengan Lighthouse adalah menjalankan audit di laman web anda sendiri:

1. Buka Devtools dan navigasi ke panel Mercusuar semasa anda melawat salah satu laman web
2. Pilih projek yang ingin anda semak ( Amalan Terbaik adalah titik permulaan yang baik)
3. Klik untuk menghasilkan laporan
4. Klik pada ulasan yang diluluskan/gagal untuk menyiasat hasilnya

Walaupun Lighthouse telah menjadi sebahagian daripada Devtools untuk beberapa waktu (sejak 2017!), Ia masih bernilai disebut kerana ia terus menawarkan ciri-ciri yang dihadapi pengguna seperti:

• Semak jika elemen utama menyelesaikan audit URLnya (Fakta Menarik: Saya terlibat dalam kerja ini!)
• Periksa sama ada metrik lukisan kandungan maksimum cukup pantas untuk semakan
• Memberi amaran kepada anda tentang pengauditan yang tidak menggunakan javascript

Lebih baik "Periksa Elemen"

Ini adalah ciri yang sangat kecil dan sangat kecil dalam beberapa cara, tetapi ia boleh memberi impak yang mendalam kepada bagaimana kita mengendalikan akses web.

Ia berfungsi seperti berikut. Apabila anda menggunakan unsur -unsur cek, boleh dikatakan penggunaan devtools yang paling biasa, anda kini mendapat petua yang mengandungi maklumat tambahan mengenai kebolehaksesan.

Sebab saya katakan ini mempunyai kesan yang mendalam ialah Devtools mempunyai aksesibiliti untuk seketika, tetapi berapa ramai daripada kita yang sebenarnya menggunakannya? Termasuk maklumat ini dalam ciri yang biasa digunakan seperti Elemen Semak akan memberikan penglihatan yang lebih tinggi dan menjadikannya lebih mudah.

Petua alat termasuk:

• Nisbah kontras teks (berapa banyak kontras adalah teks latar depan dengan warna latar, atau betapa buruknya)
• Perwakilan teks
• Peranan Aria
• Sama ada elemen yang diperiksa boleh difokuskan pada papan kekunci

Untuk mencuba ciri ini, klik kanan (atau CMD Shift C) elemen dan pilih semak untuk melihatnya di DevTools.

Saya membuat video selama 14 minit mengenai debugging akses dengan Chrome Devtools, yang meliputi sebahagian daripada mereka dengan lebih terperinci.

Kecacatan penglihatan simulasi

Seperti namanya, anda boleh menggunakan Chrome Devtools untuk mensimulasikan gangguan visual. Sebagai contoh, kita dapat melihat laman web dari perspektif penglihatan kabur.

Bagaimana anda melakukan ini di DevTools? Seperti ini:

1. Buka DevTools (klik kanan dan pilih CHECK atau CMD Shift C).
2. Buka menu arahan DevTools (CMD Shift P pada Mac dan Ctrl Shift P pada Windows).
3. Pilih Tunjukkan Rendering dalam menu Perintah.
4. Pilih kecacatan dalam panel rendering .

Kami menggunakan penglihatan kabur sebagai contoh, tetapi Devtools mempunyai pilihan lain termasuk: kebutaan warna penuh, kebutaan warna separa, buta teal, dan jumlah buta warna.

Seperti mana -mana alat sedemikian, ia direka untuk melengkapkan kemahiran kebolehaksesan yang sedia ada (mudah -mudahan) kami. Dalam erti kata lain, ia tidak mengajar, tetapi mempunyai kesan ke atas reka bentuk dan pengalaman pengguna yang kami buat.

Berikut adalah beberapa sumber tambahan mengenai kebolehcapaian dan simulasi penglihatan yang rendah:

• Keperluan kebolehcapaian untuk orang yang mempunyai penglihatan yang rendah (W3C)
• Meningkatkan kebolehcapaian halaman dengan mensimulasikan kecacatan penglihatan

Dapatkan masa prestasi

Panel prestasi di Devtools kadang -kadang kelihatan seperti campuran bentuk dan warna yang tidak kemas.

Kemas kini untuk ini adalah hebat kerana ia berfungsi dengan lebih baik untuk membentangkan metrik prestasi yang bermakna.

Apa yang kita mahu lihat ialah segi empat tepat masa tambahan yang ditunjukkan dalam masa dalam rekod panel prestasi. Sorotan ini:

• DOMContentLoaded: Acara dipecat apabila pemuatan HTML awal
• Cabutan Pertama: Apabila penyemak imbas pertama kali menarik piksel ke skrin
• Lukisan Kandungan Pertama: Penyemak imbas menarik titik kandungan dari DOM, yang menunjukkan kepada pengguna bahawa kandungan dimuatkan
• Onload: Apabila halaman dan semua sumbernya dimuatkan
• Lukisan Kandungan Maksimum: Elemen imej atau teks terbesar yang diberikan dalam paparan

Di samping itu, jika anda mendapati acara lukisan kandungan terbesar dalam rekod panel Prestasi, anda boleh mengkliknya untuk maklumat tambahan.

Walaupun terdapat banyak maklumat berharga di sini, "nod yang relevan" mungkin merupakan projek yang paling berguna kerana ia menentukan elemen yang menyebabkan acara LCP.

Untuk mencuba ciri ini:

1. Buka DevTools dan navigasi ke panel Prestasi
2. Klik "Mula Analisis dan Muat semula Halaman"
3. Perhatikan petunjuk masa di bahagian masa rekod
4. Klik pada setiap metrik untuk melihat maklumat tambahan yang anda perolehi

Memantau prestasi

Jika anda ingin memulakan dengan DevTools dengan cepat dan anda telah mencuba Lighthouse, maka saya cadangkan ciri Monitor Prestasi. Ia seperti mempunyai webpagetest.org di hujung jari anda, seperti penggunaan CPU.

Inilah cara mengaksesnya:

1. Buka devtools
2. Buka Menu Perintah (CMD Shift P pada Mac dan Ctrl Shift P pada Windows)
3. Pilih "Tunjukkan Monitor Prestasi" dari menu Perintah
4. Berinteraksi dengan laman web dan menyemak imbas
5. Hasil pemerhatian

Pemantau prestasi boleh memberi anda metrik yang menarik, tetapi, tidak seperti rumah api, ia memerlukan anda untuk memikirkan cara mentafsirkannya sendiri dan mengambil tindakan. Tiada nasihat disediakan. Anda perlu mengkaji carta penggunaan CPU sendiri dan meminta 90% jika ia boleh diterima (mungkin tidak).

Monitor Prestasi mempunyai legenda interaktif di mana anda boleh menghidupkan dan mematikan metrik, sebagai contoh:

• Penggunaan CPU
• JS Heap Saiz
• Dom Node
• Pendengar acara JS
• dokumen
• Rangka Kerja Dokumen
• Susun atur/kedua
• Gaya Recalculation/Second

Gambaran Keseluruhan CSS dan Gambaran Keseluruhan Tempatan

Trik CSS telah memperkenalkan ciri-ciri ini, jadi periksa!

• Gambaran Keseluruhan CSS: Panel Devtools yang mudah yang menyediakan banyak statistik menarik mengenai CSS yang digunakan oleh halaman
• Overlay Tempatan: Ciri yang kuat yang membolehkan anda menimpa laman web pengeluaran dengan sumber -sumber tempatan supaya anda dapat dengan mudah melihat perubahan

Jadi, bagaimana dengan DevTools dalam penyemak imbas lain?

Saya pasti anda perasan bahawa saya menggunakan Chrome sepanjang artikel. Ini adalah penyemak imbas peribadi saya. Iaitu, patut dipertimbangkan:

• Firefox Devtools kelihatan hebat sekarang
• Apabila Microsoft Edge berkembang dari Chromium, ia juga akan mendapat manfaat daripada ciri -ciri DevTools ini
• Seperti yang dibuktikan oleh Nota Pelepasan Pratonton Teknologi Safari (cari Inspektor Web di halaman ini), Safari Devtools telah membuat kemajuan yang hebat

Dalam erti kata lain, sila perhatikan, kerana ini adalah kawasan yang berkembang pesat!

kesimpulannya

Kami banyak menutupi masa yang sangat singkat!

• Mercusuar: Panel yang menyediakan prestasi, kebolehcapaian, SEO dan tips amalan terbaik dan cadangan.
• Semak Elemen: Peningkatan untuk Memeriksa Ciri Elemen, yang menyediakan maklumat kebolehaksesan untuk Pemilihan Elemen Tooltips
• Defisit Visi Simulasi: Ciri dalam panel rendering untuk melihat halaman dari perspektif penglihatan yang rendah.
• Masa Panel Prestasi: Metrik lain dalam Rekod Panel Prestasi, memaparkan statistik berorientasikan pengguna seperti lukisan kandungan maksimum
• Monitor Prestasi-Visualisasi masa nyata metrik prestasi laman web semasa seperti penggunaan CPU dan saiz DOM

Jika anda ingin mengetahui kemas kini terkini dan dapatkan lebih daripada 200 petua pembangunan web, lihat Tips Dev Senarai Mel saya! Saya juga mempunyai kursus video canggih di modendevtools.com. Dan, saya cenderung untuk menyiarkan banyak sumber pembangunan web tambahan di Twitter.

Atas ialah kandungan terperinci Melihat apa yang baru di Chrome Devtools pada tahun 2020. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!