Alat Pengembang Chrome (Tutorial)

Menerapkan Chrome Developer Tools secara efektif (Tutorial)

Bahasa: Jerman

Menerapkan Chrome Developer Tools dengan efektif (Tutorial)

Dengan Chrome Developer Tools, kamu dapat menganalisis dan mengedit halaman webmu, melakukan analisis kinerja, dan menguji halamanmu untuk berbagai perangkat dan ukuran layar. Pelajari dalam tutorial ini fungsi utama dari DevTools. Cara menemukan kesalahan dalam HTML, CSS, dan JavaScript, menemukan cara untuk mengoptimalkan kinerja dan penggunaan memori, dan meningkatkan tata letak halamanmu - Pelatih Stephan Haewß akan menunjukkan langkah-langkahnya melalui contoh praktis!

Pelajari fungsi-fungsi utama dari Chrome Developer Tools
Mendiagnosa dan mengoptimalkan kode HTML, CSS, JavaScript
Melacak alur kode, mengungkap dan memperbaiki kesalahan
Menyesuaikan animasi, gaya, dan tata letak CSS
Meningkatkan kinerja dan penggunaan memori dari halaman web
Untuk situs web yang bebas dari kesalahan dan cepat dengan tata letak yang dioptimalkan - kursus selama lebih dari enam jam oleh pelatih Stephan Haewß

Kode yang bersih sangat berkontribusi pada keterlihatan situs web Anda. Pelajari sekarang, bagaimana menggunakan Chrome DevTools untuk menganalisis dan mengoptimalkan halaman Anda.

detail

Isi: 6 h Pelatihan video
Lisensi: pribadi dan komersial Hak penggunaan

Kategori

Desain web, CMS, & pengembangan

Dibuat dengan cinta:

Stephan Haewß

Pengantar ke kursus tentang Alat Pengembang Chrome

Chrome Developer Tools: 1.1 | Apa yang Anda pelajari dalam kursus ini?

Gratis

Chrome Developer Tools: 1.1 | Apa yang kamu pelajari dalam kursus ini?

Di sini akan diberikan gambaran tentang semua topik yang akan dibahas dalam kursus ini.

Membuat Aplikasi Web Uji Coba: 1.2 | Chrome Developer Tools

Gratis

Chrome Developer Tools: 1.2 | Membuat Aplikasi Web Uji

Aplikasi web pertama akan dibuat, dengan penjelasan langkah-langkah pertama dalam menggunakan Dev-Tools.

Gratis

Chrome Developer Tools: 1.3 | Gambaran Pertama tentang Fungsionalitas

Pengenalan tentang berbagai panel di DevTools dan cara kerjanya secara dasar.

Pengaturan, Layout, Tampilan di tab Elemen

Chrome Developer Tools: 2.1 | Memeriksa Struktur DOM di tab Elements

Penelitian rinci struktur HTML dari sebuah situs web dan bagaimana memilih dan mengedit elemen di tab Elements-.

Chrome Developer Tools: 2.2 | Ganti gaya

Alat Pengembang Chrome: 2.2 | Mengubah Gaya

Penyuntingan langsung gaya CSS dan penyelidikan pengaruhnya terhadap tampilan situs web.

Alat Pengembang Chrome: 2.3 | Mengedit HTML, DOM

Chrome Developer Tools: 2.3 | Mengedit HTML, DOM

Mengubah struktur HTML dan mengamati dampaknya pada DOM.

Alat Pengembang Chrome: 2.4 | Tampilan Mobile - Menguji Desain Responsif

Chrome Developer Tools: 2.4 | Tampilan Mobile - Menguji Desain Responsif

Simulasi berbagai ukuran perangkat dan memeriksa kelayakan adaptasi situs web.

Chrome Developer Tools: 2.5 | Latihan Praktis: Memperbaiki Menu Halaman

Memperbaiki kesalahan dalam menu halaman.

Chrome Developer Tools: 2.6 | Latihan Praktis: Memperbaiki Layout/Overflow

Penyelesaian masalah tata letak dan kesalahan overflow.

Pemecahan masalah skrip melalui Sumber-sumber dan Konsol

Chrome Developer Tools: 3.1 | Perkenalan: Debugging Skrip dan menetapkan breakpoint pertama

Chrome Developer Tools: 3.1 | Pengenalan: Debugging Skrip dan menetapkan Breakpoint pertama

Pengenalan tentang mem-debug kode JavaScript dan menetapkan breakpoint.

Alat Pengembang Chrome: 3.2 | Latihan Praktis: Mendepan Aplikasi TypeScript

Alat Pengembang Chrome: 3.2 | Latihan Praktis: Debug Aplikasi TypeScript

Debugging kode TypeScript dengan DevTools.

Chrome Developer Tools: 3.3 | Latihan Praktis: Debugging – Menemukan kesalahan saat menghapus dari Array

Alat Pengembang Chrome: 3.3 | Latihan Praktis: Debugging - Temukan kesalahan saat menghapus dari Array

Mencari dan memperbaiki kesalahan saat menghapus elemen dari sebuah array.

Alat Pengembang Chrome: 3.4 | Latihan Praktis: Mendepan aplikasi React

Chrome Developer Tools: 3.4 | Latihan Praktis: Mendepbug Aplikasi React

Teknik debugging yang spesifik untuk aplikasi React.

Alat Pengembang Chrome: 3.5 | Breakpoints Bersyarat

Alat Pengembang Chrome: 3.5 | Henti Bersyarat

Menetapkan breakpoint yang hanya akan dipicu di bawah kondisi tertentu.

Chrome Developer Tools: 3.6 | DOM-Breakpoints

Peralatan Pengembang Chrome: 3.6 | Poin Istirahat DOM

Chrome Developer Tools: 3.6 | Titik Hentikan DOM

Memantau perubahan pada elemen DOM tertentu.

Alat Pengembang Chrome: 3.7 | Fetch-Breakpoints

Chrome Developer Tools: 3.7 | Fetch-Breakpoints Perangkat Pengembang Chrome: 3.7 | Fetch-Breakpoints

Berhenti kode saat permintaan jaringan.

Peralatan Pengembang Chrome: 3.8 | Exception-Breakpoints

Alat Pengembangan Chrome: 3.8 | Titik Henti Pengecualian

Berhenti otomatis saat terjadi kesalahan.

Chrome Developer Tools: 3.9 | Overrides dan Workspace

Chrome Developer Tools: 3.9 | Penimpaan dan Ruang Kerja

Penyesuaian gaya dan skrip tanpa mengubah kode asli.

Chrome Developer Tools: 3.10 | Debugging langkah demi langkah dan pada titik tertentu

Alat Pengembang Chrome: 3.10 | Mendebung dalam langkah-langkah dan ke titik tertentu

Kontrol yang Detail dari Proses Debugging.

Chrome Developer Tools: 3.11 | Konsol: Ikhtisar, eksekusi kode sederhana, dan output

Chrome Developer Tools: 3.11 | Konsol: Overview, eksekusi kode sederhana, dan output

Pengenalan tentang konsol dan fungsinya yang dasar.

Chrome Developer Tools: 3.12 | Akses ke Elemen DOM di Console

Manupulasi DOM langsung melalui Konsol.

Alat Pengembang Chrome: 3.13 | Potongan Kode dan Pengukuran Waktu di Console

Chrome Developer Tools: 3.13 | Potongan Kode dan Pengukuran Waktu di Console

Potongan kode yang dapat digunakan kembali dan pengukuran kinerja.

Chrome Developer Tools: 3.14 | Mengelompokkan dan Mendesain keluaran log

Alat Pengembang Chrome: 3.14 | Mengelompokkan dan Mendesain Tulisan Log

Output log dapat diubah warna dan jenis huruf serta dikelompokkan.

Chrome Developer Tools: 3.15 | Metode Konsol Tambahan yang Berguna

Chrome Developer Tools: 3.15 | Metode Konsol yang Berguna Lainnya

Beberapa fungsi konsol yang jarang digunakan tetapi tetap berguna.

Analisis dan optimisasi jaringan

Alat Pengembang Chrome: 4.1 | Jaringan: Tinjauan Fitur

Alat Pengembang Chrome: 4.1 | Jaringan: Gambaran Umum tentang Fungsinya

Analisis dari permintaan dan respons jaringan.

Peralatan Pengembangan Chrome: 4.2 | Jaringan: Pembatasan, Header, dan Pratinjau

Alat Pengembang Chrome: 4.2 | Jaringan: Throttling, Header, dan Pratinjau

Simulasi koneksi jaringan lambat dan pemeriksaan HTTP headers.

Optimalisasi kinerja dan penyimpanan

Alat Pengembang Chrome: 5.1 | Profiler - Melihat dan mengoptimalkan kinerja

Alat Pengembang Chrome: 5.1 | Profiler - Memeriksa dan mengoptimalkan kinerja

Identifikasi bottleneck performa pada kode JavaScript.

Alat Pengembang Chrome: 5.2 | Mengoptimalkan penggunaan memori dengan Profiler Memori

Chrome Developer Tools: 5.2 | Mengoptimalkan penggunaan memori dengan Memory Profiler

Menganalisis penggunaan memori dan mengidentifikasi kebocoran memori.

Tab aplikasi dan alat lainnya

Chrome Developer Tools: 6.1 | Alat Bantu yang Berguna dan Tab Rendering

Chrome Developer Tools: 6.1 | Alat-alat Berguna dan Tab Rendering

Alat lain untuk mengoptimalkan performa.

Meninjau dan menyesuaikan animasi pada Chrome Developer Tools: 6.2

Chrome Developer Tools: 6.2 | Memeriksa dan menyesuaikan animasi

Analisis detail animasi dan transisi CSS. Optimisasi performa dengan menyesuaikan fungsi waktu dan properti.

Chrome Developer Tools: 6.3 | Memeriksa sumber daya web aplikasi dengan tab Aplikasi

Alat Pengembang Chrome: 6.3 | Memeriksa Sumber Daya Aplikasi Web dengan Tab Aplikasi

Memeriksa data yang disimpan oleh aplikasi web seperti Local Storage, Session Storage, dan IndexedDB. Mengoptimalkan manajemen penyimpanan.

Chrome Developer Tools: 6.4 | Gunakan Ekstensi React Dev Tools

Pengenalan tentang add-on Browser React DevTools. Memeriksa struktur komponen React, Props, dan State.

Pengaturan

Peralatan Pengembang Chrome: 7 | Pengaturan Terpenting Alat Pengembang Chrome

Konfigurasi DevTools untuk bekerja lebih efisien. Penyesuaian tema, pintasan keyboard, dan pengaturan lainnya.

DevTools dari browser lain

Chrome Developer Tools: 8.1 | Alat Pengembang MS Edge

Sangat mirip dengan alat pengembangan Chrome, tetapi ada perbedaan detail.

Chrome Developer Tools: 8.2 | Alat Pengembang Firefox

Perbedaan yang signifikan ada, tetapi secara prinsip sangat mirip.

Chrome Developer Tools: 8.3 | Alat Pengembang Safari

Ada perbedaan yang lebih besar dengan Chrome di beberapa bagian, tetapi prinsipnya sama di sini.

Detail tentang isi

Optimalkan situs web Anda dengan Chrome Developer Tools

Situs web yang bebas dari kesalahan, sangat cepat dimuat, dan terlihat baik pada setiap ukuran layar?! Untuk mencapai itu, Anda harus menganalisis dan mengoptimalkan kode halaman Anda. Chrome Developer Tools sangat cocok untuk itu. Dengan alat ini, Anda dapat menemukan kesalahan dalam kode HTML, CSS, dan JavaScript Anda. Selain itu, Anda dapat melihat dengan rinci performa, alur kode, dan penggunaan memori. Manfaatkan wawasan ini untuk mengedit halaman Anda dengan tujuan dan akhirnya meningkatkan keterlihatan halaman Anda melalui debugging dan optimisasi.

Bagaimana cara menggunakan Chrome Developer Tools secara efektif, Anda akan pelajari dalam tutorial ini yang berdurasi lebih dari enam jam dari pengembang perangkat lunak dan pelatih Stephan Haewß. Mulai dari dasar-dasar Chrome DevTools hingga teknik-teknik lanjutan - untuk penampilan halaman web Anda yang bersih dan bertenaga!

HTML, CSS, JavaScript - Debugging untuk situs web bersih, cepat dengan tata letak yang dioptimalkan

Kursus ini dimulai dengan pengenalan Chrome Developer Tools yang tersedia langsung di browser. Anda akan mengetahui apa itu DevTools dan bagaimana Anda dapat menerapkannya secara fundamental. Selanjutnya, Anda akan membahas Tab Elements, di mana Anda dapat memeriksa dan mengedit gaya, tata letak, dan penampilan halaman Anda. Dengan bagian Sources dan Console, Anda dapat melakukan debugging script. Selain itu, Anda akan belajar cara melakukan analisis jaringan, serta optimisasi performa dan memori menggunakan Chrome Developer Tools. Akhirnya, Anda akan mendapatkan gambaran tentang DevTools dari browser lain. Secara keseluruhan, kursus ini cocok untuk semua pengembang web yang ingin melakukan debugging dan optimisasi halaman web dengan menggunakan DevTools Chrome.

Manfaatkan Chrome DevTools secara efektif - konten tutorial secara keseluruhan

Pengenalan Chrome DevTools: Kursus ini menunjukkan cara membuka DevTools, menavigasi di dalamnya, dan menggunakan fungsi penting untuk mengedit dan memperbaiki kesalahan HTML, CSS, dan JavaScript secara efisien.
Debugging HTML dan CSS: Bagaimana Anda dapat menyelidiki pohon DOM halaman web, mengedit HTML dan CSS secara langsung dalam mode langsung, dan dengan demikian langsung memperbaiki masalah tata letak dan kesalahan gaya CSS - ideal untuk pengujian dan penyesuaian desain yang cepat, sebelum perubahan permanen diadopsi.
Debugging JavaScript: Pelajari cara memuat file JavaScript, menetapkan breakpoint, dan menjalankan kode langkah demi langkah. Variabel dan objek dapat diselidiki secara real-time, sedangkan CallStack memudahkan pelacakan pemanggilan fungsi - ideal untuk pencarian kesalahan yang akurat.
Menggunakan Console: Konsol DevTools Chrome memungkinkan membuka dan menganalisis log, menjalankan kode JavaScript, serta memanipulasi elemen halaman web secara langsung. Melalui output log yang diarahkan, Anda dapat menganalisis dan mengoptimalkan kode secara mendalam, yang secara signifikan memudahkan debugging dan peningkatan kinerja.
Optimisasi performa: Periksa permintaan jaringan dan waktu pemuatan, pantau penggunaan penyimpanan, dan identifikasi kebocoran memori. Dengan mengoptimalkan kinerja JavaScript secara fokus dan menganalisis kinerja aplikasi secara mendetail, kecepatan pemuatan dan manajemen sumber daya dapat ditingkatkan dengan efisien.
Teknik-teknik Lanjutan: Panel Aplikasi Chrome DevTools memungkinkan akses ke penyimpanan web seperti LocalStorage, IndexedDB, dan Cache, serta manajemen Service Worker dan Manifests. Selain itu, ekstensi seperti React-DevTools dapat diintegrasikan untuk melakukan debugging aplikasi reaktif dengan lebih baik. Pengaturan yang dapat disesuaikan juga menyediakan penyiapan DevTools yang optimal untuk kebutuhan kerja individu.