Ketahui apa yang alat boleh lakukan untuk anda Pembangun Chrome DevTools dan belajar menggunakan potensi penuh mereka.

Daripada semua disiplin pengaturcaraan komputer, pembangunan web pastinya mempunyai halangan paling rendah untuk masuk. Hampir semua yang anda perlukan untuk membuat halaman web ringkas ialah Notepad dan penyemak imbas.

Walau bagaimanapun, apabila susun atur menjadi lebih kompleks, menjejaki perubahan dalam kod halaman dalam Notepad biasa menjadi lebih sukar. Saya sendiri tahu bahawa pembangun web pemula boleh menghabiskan lebih daripada satu jam hanya cuba mencari peraturan dalam helaian gaya untuk menukar penampilan elemen ini atau itu...

Anda boleh, tentu saja, mencari secara rawak, tetapi pakar yang sudah diajar oleh pengalaman pahit tidak bergantung pada kewaspadaan mereka. Mereka hanya menggunakan yang istimewa alat pembangun, yang terbina dalam kebanyakan penyemak imbas dan membolehkan anda memeriksa kod dengan cepat dan menguji pilihan tertentu untuk operasinya.

Jenis alat yang serupa muncul dalam Internet Explorer. Opera lama menggunakan panel Dragonfly untuk tujuan ini dan juga mempunyai analog Notepad terbina dalam sendiri dengan penyerlahan kod, yang membolehkan anda menaip terus dalam persekitaran penyemak imbas:

Hari ini dari amalan yang serupa melangkah ke belakang dan menyediakan pelayar web dengan pemeriksa kod khas. Penyemak imbas berdasarkan enjin Chromium boleh membanggakan alat pembangun yang paling berfungsi, dan lebih khusus lagi Google Chrome. Mari kita lihat segala-galanya menggunakan contoh beliau.

Alat pembangun panggilan dan paparan halaman

Anda boleh memanggil alat pembangun dalam Chrome dalam beberapa cara:

1. Dari menu utama. Klik pada butang menu (tiga titik di sebelah kanan bucu atas tetingkap penyemak imbas), tuding pada senarai juntai bawah "Lagi Alat" dan klik pada item tersebut "Alat Pembangun".
2. Kekunci panas. Anda boleh menekan butang untuk memanggil F12 atau gabungan CTRL+SHIFT+I.
3. daripada menu konteks (paling mudah untuk memeriksa elemen halaman tertentu). klik Klik kanan tetikus pada objek yang dikehendaki pada halaman web dan pilih item tersebut "Lihat kod"(atau "Periksa Elemen" dalam beberapa lagi versi terdahulu Chroma).

Bar alat pembangun ialah satu set tab di mana modul berfungsi tertentu terletak, serta butang kawalan dan konfigurasi. Pertama sekali, anda harus memberi perhatian kepada butang umum. Di sebelah kiri anda boleh menemui butang pemilihan elemen halaman dan butang pemilihan paparan halaman:

Kami masih akan mengkaji tingkah laku yang pertama, tetapi untuk yang kedua, ia membolehkan anda meniru paparan halaman web pada skrin salah satu peranti mudah alih yang tersedia (contohnya, iPhone) atau pada paparan resolusi yang diberikan dalam piksel. Apa yang perlu anda lakukan ialah tekan dan pilih peranti yang dikehendaki:

Terdapat juga beberapa butang dan penunjuk di sebelah kanan. Penunjuk memaparkan bilangan ralat (berwarna merah) dan amaran (berwarna kuning) dalam pengendalian skrip. Butang utama di sini boleh dipanggil menu tetapan. Ia membolehkan anda menukar pengikatan panel itu sendiri berbanding bingkai dengan halaman, serta mendayakan dan melumpuhkan tab tambahan dengan alatan (bahagian "Lagi alatan"). Secara lalai, ia terletak di bahagian bawah di bawah halaman yang sedang diperiksa, tetapi ia juga boleh diletakkan di tepi atau bahkan dilabuhkan ke dalam tetingkap berasingan:

Menu ini juga mempunyai bahagian "Tetapan", yang memberikan akses kepada banyak tetapan alat pembangun. Tetapi sebagai permulaan, anda mungkin tidak memerlukannya, jadi sekadar mengetahui tentangnya sudah memadai. Dan kita akan melihat tab utama dengan fungsi yang berguna.

Tab Unsur

Oleh Chrome lalai DevTools dibuka dalam tab "Elemen". Ini adalah salah satu tab yang paling berguna kerana ia membolehkan anda melihat dan menukar kod HTML dan CSS dengan cepat pelbagai elemen laman sesawang. Untuk memilih elemen, hanya aktifkan butang pertama di sebelah kiri panel (“Pilih elemen dalam halaman untuk memeriksanya”) dan halakan kursor tetikus pada serpihan halaman yang dikehendaki. Pada halaman itu sendiri, pemilihan dan saiz blok dalam piksel akan dipaparkan di sekeliling elemen yang dipilih, dan dalam tab "Unsur" kod HTML akan berkembang ke baris yang menerangkan serpihan yang dipilih:

Setelah memilih elemen, kami boleh mengeditnya dan gaya yang dikaitkan dengannya mengikut keperluan. Sebagai contoh, kami ingin menukar teks dan rupa blok "awan" dengan frasa Frida di tapak web kami. Untuk melakukan ini, pilih blok itu sendiri dan lihat kandungannya:

Seperti yang anda lihat, di dalamnya terdapat tiga blok dengan replika berbeza dan skrip yang menukar replika ini selepas tempoh masa tertentu. Untuk menulis sesuatu yang kita sendiri, kita boleh menghentikan skrip dan menulis teks kita dalam salah satu blok (pengeditan HTML tersedia selepas mengklik dua kali pada elemen). Walaupun, mengapa membuang masa dengan perkara remeh? Kami boleh mengalih keluar semua blok yang tidak perlu, hanya meninggalkan satu (dan pada masa yang sama kami boleh merobohkan skrip :)):

Jadi, kami menukar teks dalam blok, tetapi ia kelihatan sedikit kecil... Kami memerlukan skala "jenayah" kami untuk dilihat pada pandangan pertama :) Dan di sini fungsi penyuntingan gaya, yang tersedia di bahagian tambahan daripada tab "Unsur", akan membantu kami . Pilih blok yang diperlukan dalam kod dan Klik dua kali dalam panel sisi anda boleh mengedit gaya yang sudah ada dan menambah yang baharu. Dengan cara ini anda boleh mencapai hasil yang sangat ketara :)

Sila ambil perhatian bahawa semua elemen yang kami tambahkan pada panel gaya didaftarkan secara automatik sebagai gaya sebaris (parameter atribut "gaya") bagi blok kod HTML yang dipilih. Selain itu, setiap daripada mereka boleh dilumpuhkan dengan cepat dengan menyahtanda kotak semak di sebelah kiri (dalam kod, parameter yang dilumpuhkan dialih keluar secara automatik sebagai ulasan).

Dan, mungkin, perkara yang paling berguna ialah untuk setiap pemilih dengan penerangan gaya terdapat pautan tepat ke baris di mana ia sebenarnya ditulis dalam fail CSS. Ini membolehkan anda membuka fail dan membuat perubahan yang diperlukan terlebih dahulu. tempat yang terkenal bukannya mencari secara manual! Iaitu, anda boleh menggunakan alat pembangun pada tab "Elemen" untuk memasukkan dan menilai awal suntingan sementara kod ( semua suntingan hilang selepas memuatkan semula halaman) diikuti dengan memperkenalkan perubahan yang paling berjaya pada kod secara berterusan.

Ia juga perlu diperhatikan akhirnya bahawa panel untuk gaya penyuntingan mempunyai beberapa tab sendiri, yang mana "Gaya" hanyalah yang pertama. Inilah yang bahagian tambahan disana ada:

• Dikira- memaparkan model blok yang dipilih dan gaya yang dikira secara automatik untuknya, yang tidak dinyatakan secara eksplisit atau diwarisi daripada blok induk;
• Pendengar Acara- memaparkan senarai fungsi yang "mendengar" acara tertentu untuk keseluruhan halaman atau blok yang dipilih secara khusus (anda perlu menyahtanda kotak;
• Titik Putus DOM- mengandungi apa yang dipanggil "titik putus" DOM ​​​​(disingkat "Dokumen" Model Objek" - "model objek document"), yang boleh dibuat daripada menu konteks kod HTML (kumpulan "Break on") apabila mengubah suainya untuk membatalkan/menggunakan perubahan yang dibuat dengan cepat;
• Hartanah- membolehkan anda melihat senarai penuh Sifat JavaScript untuk blok yang dipilih pada halaman;
• Kebolehcapaian- menunjukkan tahap hierarki sarang untuk blok yang dipilih tanpa mengambil kira jenis blok, kelas, pengecamnya atau ciri lain.

Kehadiran semua alat tambahan ini tidak mewajibkan anda untuk menggunakannya. Biasanya, keupayaan untuk mengedit kod HTML dan CSS adalah mencukupi. Walau bagaimanapun, jika anda perlu menggunakan JavaScript, maka senarai dengar, titik putus DOM dan sifat blok boleh menjadi sangat berguna kepada anda!

Konsol

Memandangkan kita bercakap tentang JavaScript, kita tidak boleh tidak bercakap tentang alat yang terbina dalam Chrome DevTools seperti konsol. Anda boleh menemuinya di tempat yang berasingan Tab "Konsol"., dan ia juga dipaparkan secara lalai sebagai panel bawah tambahan pada semua tab lain (anda boleh melumpuhkan paparan dalam tetapan dengan memilih "Sembunyikan laci konsol" atau menekan butang ESC):

Konsol boleh melaksanakan dua fungsi sekaligus: pemantauan acara pada halaman yang memaparkan amaran dan ralat, serta pelaksanaan arahan JavaScript dimasukkan oleh pengguna. Fungsi pertama dilaksanakan dengan jelas. Dalam output konsol, semua acara dikumpulkan kepada tiga kategori dengan warna latar belakang yang berbeza:

1. putih- "kalah mati" tentang acara yang berjaya diselesaikan.
2. Kuning- amaran tentang kemungkinan ralat dan kegagalan yang tidak kritikal.
3. Merah- ralat dalam pelaksanaan skrip atau dalam mengakses sumber tertentu yang diminta.

Ralat dan amaran mengandungi Penerangan Ringkas masalah dan pautan ke fail dan baris di dalamnya yang menyebabkan masalah ini. Mengetahui lokasi sebenar masalah (dengan mengandaikan ia berlaku dalam fail pada pelayan anda), anda boleh menyetempatkan dan membetulkan ralat dengan cepat.

Bagi melaksanakan kod pengguna, maka peluang ini Ia digunakan dengan kerap untuk menyahpepijat kod dengan cepat dan menjalankan pelbagai eksperimen dengan JavaScript. Contohnya, semasa mempelajari bahasa ini, anda tidak selalu memerlukan Notepad yang berasingan atau persekitaran pembangunan yang lengkap. Anda boleh melaksanakan skrip mudah secara terus dalam konsol (terutamanya kerana ia menyokong penyiapan arahan).

Untuk pengaturcaraan konsol, sebaiknya buka halaman dalaman yang tidak wujud dalam Chrome (contohnya, chrome://blank/) atau tab kosong baharu (chrome://newtab/). Ini akan mengelakkan pertindihan dalam pelaksanaan skrip yang telah dijalankan pada halaman. Sebenarnya, itu sahaja - kita boleh menulis kod dalam konsol dan melaksanakannya dengan menekan Enter. Satu-satunya perkara yang anda perlu ingat ialah untuk output, bukannya "document.write("");", pembinaan "console.log("");" digunakan. Berikut ialah contoh paling primitif untuk memaparkan rentetan teks:

console.log("Output teks pertama saya dalam konsol Chrome:)");

Konsol menyokong beberapa penentu yang membolehkan anda mentakrifkan jenis output secara eksplisit (rentetan/nombor/elemen DOM/objek JavaScript), melakukan penggantian data jenis yang ditetapkan, atau menggunakan pemformatan:

Berikut ialah beberapa contoh penggunaan penentu:

*** Contoh 1 ***

console.log("Saya mengira hingga lima: %d, %d, %d, %d, %d \n%s", 1, 2, 3, 4, 5, "Saya akan lihat! ");

*** Contoh 2 ***

console.log("%cIni akan ditulis dalam huruf merah besar pada latar belakang biru", "color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold");

*** Contoh 3 ***

var curDate = new Date();
var day = curDate.getDate();
var month = curDate.getMonth();
var arr = [
"Januari",
"Februari",
"Mac",
"April",
"Mungkin",
"Jun",
"Julai",
"Ogos",
"September",
"November",
"Disember",
];
console.log("%cHari ini: %s - %d nombor", "warna: oren; saiz fon: 30px; latar belakang: biru; padding: 20px", arr, hari);

Seperti yang anda lihat, konsol boleh berjaya digunakan bukan sahaja untuk memeriksa kod sedia ada, tetapi juga sebagai persekitaran untuk mempelajari JavaScript. Ia menyokong kedua-dua ungkapan satu baris dan binaan berbilang baris yang lebih kompleks dengan pembolehubah, tatasusunan dan gelung. Untuk menyuap baris dalam konsol, bukannya Enter, anda perlu menekan SHIFT+ENTER dan untuk menyuap baris dalam hasil output, gunakan aksara suapan baris - "\n".

Tab Sumber

Pada pandangan pertama, tujuan tab ketiga alat pembangun "Sumber" tidak begitu jelas. Secara lalai, di tengah-tengah ruang kerja, kod sumber halaman juga dibuka di sini, yang, atas sebab tertentu, tidak boleh diedit. Terdapat dua panel di sisi: "Halaman" (kiri) dan "Benang" (kanan). Dan begitu sahaja panel kiri dan merupakan "kekayaan" utama tab "Sumber"!

Panel ini membolehkan anda melihat semua sumber yang dimuatkan bersama halaman. Gambar, skrip, helaian gaya - semua ini boleh dipilih dan dilihat di kawasan kerja (dan skrip juga boleh diedit):

Selain melihat sumber dan mengedit JavaScript (secara langsung, anda boleh menggunakan alatan dari panel kanan), tab "Sumber" membolehkan anda memuat turun sebarang fail ke komputer anda. Ciri ini boleh digunakan untuk memuat turun, contohnya, foto daripada Instagram dan sumber web lain yang tidak dapat menyimpan imej secara langsung! Cuma buka alat pembangun dan cari dalam senarai sumber gambar yang diperlukan, dan kemudian simpannya:

Begitu juga, anda boleh memuat turun, sebagai contoh, fon kegemaran anda, grafik SVG dan sumber yang serupa, penjimatan langsung yang mungkin tidak tersedia.

Alat Pengujian dan Audit

Tiga tab yang dibincangkan di atas, boleh dikatakan, yang utama dalam alat pembangunan. Komposisi dan bilangan yang lain mungkin berubah dari versi ke versi Google Chrome (seperti, sebagai contoh, berlaku dengan tab "Memori", yang muncul dan hilang). Di samping itu, bilangan tab boleh ditambah disebabkan sambungan yang dipasang yang menambah bar alat mereka sendiri.

hidup masa ini relevan versi Google Chrome ialah cawangan ke-69 yang dikemas kini baru-baru ini. Oleh itu, kami akan mempertimbangkan tab tambahan menggunakan contohnya.

Tab rangkaian

Tab "Rangkaian" membolehkan anda melihat statistik pemuatan untuk semua elemen halaman web yang diperiksa, serta memantau permintaan yang dihantar olehnya semasa operasi. Untuk memulakan penjejakan, anda perlu mengklik butang rekod di sebelah kiri tab dan muat semula halaman (F5). Anda boleh menghentikan rakaman pada bila-bila masa, bagaimanapun, adalah dinasihatkan untuk melakukan ini selepas itu muatan penuh halaman semua sumber yang diperlukan:

Hasil yang diperoleh boleh dikaji menggunakan penapisan peristiwa mengikut jenis data yang dihantar, mengikut saiznya, masa pemuatan, dsb. Selain itu, anda boleh meniru pemuatan halaman dengan had laju buatan yang sepadan dengan tertentu rangkaian mudah alih(senarai lungsur "Dalam Talian"). Semua ini boleh digunakan untuk mengenal pasti fail yang paling "berat" dan mengoptimumkan pemuatannya (atau menghapuskannya sama sekali) untuk menjimatkan trafik dan mempercepatkan tapak anda.

Tab Prestasi

Jika tab sebelumnya membenarkan kami menjejaki semata-mata aktiviti rangkaian halaman, kemudian "Prestasi", bekerja pada prinsip yang sama (tindakan merekod), membolehkan anda menilai beban sumber web yang dicipta pada komputer pengguna. Untuk mendapatkan jumlah data yang mencukupi untuk analisis, sudah cukup untuk merekodkan operasi halaman selama seminit, selepas itu kita berhenti dan melihat hasilnya:

Graf mempunyai label berbilang warna yang membolehkan anda melihat proses mana yang mengambil paling banyak masa dan sumber komputer sepanjang keseluruhan imbasan. Dan anda boleh meringkaskan data yang diperolehi dengan melihat carta pai di bahagian bawah, yang memaparkan jumlah masa ujian, serta peratusan yang dibelanjakan untuk menjalankan skrip, memaparkan elemen halaman, melukis imej, memuatkan elemen lain (contohnya, skrip pihak ketiga) dan masa henti. Semua data ini juga boleh digunakan untuk mengoptimumkan halaman web.

Tab Memori

Salah satu yang paling berubah-ubah tab Google DevTools, yang ada dan kemudian hilang. Ia boleh berfungsi dalam dua mod. Secara lalai, ia memaparkan penggunaan memori semasa umum muka surat. Jika kamu perlu laporan terperinci, anda boleh memulakan proses rakaman yang serupa dengan proses rakaman tab sebelumnya. Akibatnya, anda akan menerima data tentang semua proses yang digunakan Ram komputer:

Menariknya, penggunaan memori dipaparkan bukan sahaja oleh halaman itu sendiri, skripnya dan sumber yang dimuatkan, tetapi juga oleh sambungan Chrome yang sedang aktif! Ini boleh berguna dalam kes di mana penyemak imbas menjadi sangat perlahan kerana "terlalu banyak" dengan pemalam yang tidak diperlukan. Mengetahui "pemakan" sumber utama, anda boleh mengalih keluarnya, mengembalikan Chrome anda kepada tahap ringannya.

Tab Aplikasi

Jika anda perlu mengetahui perkara yang disimpan oleh halaman web dalam sesi, kuki atau lain-lain storan tempatan, Anda ke tab "Aplikasi". Di sini semuanya semudah mungkin - di panel kiri kami memilih storan data yang kami minati, dan di kawasan utama kami melihat kandungannya. Dan, yang biasa, di sini kita boleh mengedit kandungan ini dengan serta-merta dan bahkan memadamkannya sepenuhnya (butang "Kosongkan semua" dan "Padam yang dipilih"):

Tab keselamatan

Kini hampir perlu untuk menggunakan protokol HTTPS selamat di tapak web. Untuk menilai prestasinya dan kemungkinan jurang dalam keselamatan halaman web, anda boleh menggunakan tab "Keselamatan". Di sini, selepas memuat semula halaman, kami akan melihat laporan tentang sumber yang selamat dan berbahaya dan, dengan itu, kami akan dapat mengambil langkah selanjutnya untuk menghapuskan kekurangan yang dikenal pasti:

Tab Audit

Akhir sekali, untuk mengatasi semuanya, Google Chrome boleh memberi kami nasihat praktikal untuk meningkatkan prestasi tapak. Untuk melakukan ini, pergi ke tab "Audit", mulakan ujian dan tunggu sehingga selesai. Berdasarkan keputusan audit, carta dan pengesyoran khusus untuk pengoptimuman halaman selanjutnya akan dihasilkan:

kesimpulan

Google Chrome menyediakan pengguna dengan agak set yang bagus alat pembangun. Ia mempunyai hampir semua yang anda perlukan untuk memeriksa dan mengoptimumkan halaman web. Anda boleh menggunakan alatan untuk mengedit kod HTML, mengurus gaya dan juga kawalan penuh atas skrip. Selain itu, dalam Chrome DevTools anda akan menemui alatan untuk menguji prestasi tapak, yang akan membolehkan anda mengenal pasti cara untuk pengoptimuman selanjutnya.

Dan semua ini tidak memerlukan pemasangan apa-apa program tambahan atau sambungan. Walaupun, sesetengah sambungan boleh menambah alatan mereka sendiri pada senjata Chrome yang sudah kaya. Jika anda menguasai sekurang-kurangnya separuh daripada apa yang DevTools sediakan, anda boleh meningkatkan produktiviti anda dengan ketara dan meningkatkan kualiti halaman web yang anda buat!

P.S. Kebenaran diberikan untuk menyalin dan memetik artikel ini secara bebas, dengan syarat pautan aktif terbuka kepada sumber ditunjukkan dan kepengarangan Ruslan Tertyshny dipelihara.

Tutorial ini akan menunjukkan kepada anda cara menggunakan Alat Penyelidikan Google Chrome.

Anda mungkin sudah tahu tentang FireBug, pemalam untuk Mozilla Firefox. Salah satu tutorial video kami akan menunjukkan kepada anda cara bekerja dengan FireBug. Daripada tutorial ini, anda akan belajar cara bekerja dengan sambungan yang serupa untuk Google Chrome.

Untuk menggunakan Alat Penyelidikan Google Chrome, ikut arahan ini:

Alat ini mempunyai beberapa tetapan yang tersedia:

Mengedit Gaya CSS

Tab unsur(Elemen) membolehkan anda mengedit CSS secara langsung. Ini bermakna anda boleh pratonton perubahan yang anda buat pada CSS tapak anda sebelum membuat perubahan terus pada tapak anda.

Di sini anda boleh melihat gaya yang diperuntukkan kepada elemen tertentu tapak anda.

Meneroka HTML Markup

Untuk mengakses kod HTML dalam penyemak imbas anda, buka Alat Pembangun Google Chrome anda daripada menu penyemak imbas atau menggunakan alat Element Explorer.

Di bahagian kiri yang luas, anda akan melihat kod HTML yang digunakan pada halaman anda.

Dengan memilih elemen khusus tapak anda, anda akan melihat kod HTML yang sepadan diserlahkan dalam penyemak imbas. Sebagai alternatif, anda boleh klik pada elemen HTML terus dalam Inspektor, dan elemen akan diserlahkan pada halaman.

Bekerja dengan Konsol

Konsol akan membantu anda mencari pepijat pada halaman anda. Untuk membuka halaman Konsol:

Gunakan pintasan papan kekunci CRTL+Shift+J untuk Windows (atau Cmd+Opt+J untuk Mac).

Atau klik pada butang Konsol(Konsol) dalam alat pembangun yang dibuka sebelum ini.

Apabila Konsol dibuka, anda akan melihat ralat dipaparkan pada tapak anda.

Alat ini sangat berguna jika anda mempunyai sebarang masalah dengan tapak. Konsol akan memaparkan semua ralat tapak dan beberapa petua tentang cara menyelesaikannya.

Anda juga boleh menggunakan tab Rangkaian untuk melihat fail yang menyebabkan ralat. Ralat ditandakan dengan warna merah.

Untuk mengetahui lebih lanjut tentang konsol Google Chrome, anda boleh menyemak tapak web Google Chrome standard.

Menggunakan ciri Emulator Peranti Google Chrome

Fungsi ini akan membantu anda menyemak kebolehsuaian tapak dengan meniru saiz yang berbeza skrin dan resolusi.

Untuk mengakses ciri ini, pastikan Alat Pembangun anda dibuka. Klik pada butang Bar alat peranti boleh seret(Togol Bar Alat Peranti) (atau gunakan pintasan papan kekunci CTRL+Shift+M):

Dengan mendayakan fungsi ini, anda boleh memilih peranti mudah alih, di mana anda perlu mengetahui rupa tapak anda pada resolusi skrin tertentu.

Anda juga boleh menyemak tutorial video terperinci di bawah.

Orang ramai menggunakan penyemak imbas bukan sahaja untuk melihat halaman di tapak web, tetapi juga untuk mencipta halaman baharu. Mod pembangun dalam penyemak imbas Yandex (dan mana-mana yang lain) membolehkan pengguna mengakses alatan yang diperlukan untuk pengaturcaraan web.

Baca artikel dan anda akan mengetahui sebab mod ini diperlukan dan cara konsol pembangun diaktifkan dalam pelayar web ini.

Untuk apa mod pembangun?

Alat pembangunan ialah modul khas yang dicipta dan digunakan oleh juruweb pihak ketiga untuk tugas yang berbeza. Pada mulanya dalam pelayar Yandex Sudah terdapat beberapa pemalam yang dipasang yang boleh membantu anda melaksanakan tugas pembangunan web asas.

Konsol Pembangun menyediakan beberapa pilihan untuk menyesuaikan dan menguji halaman dalam masa nyata. Antaranya:

• Lihat kod HTML halaman.
• Memantau kemajuan semua tindakan yang dilakukan oleh pengguna pada tapak web tertentu.
• Pemeriksaan fail log, yang mengandungi rujukan kepada ralat yang berlaku semasa pengendalian skrip, dsb.

Perkhidmatan "alat pembangun" tidak mungkin diperlukan oleh pengguna biasa yang tidak perlu menguji, membuat dan menyemak halaman tapak web untuk ralat. Tetapi juruweb mungkin memerlukannya, katakan, untuk menyahpepijat halaman, melaraskan imej kepada saiz tertentu, dsb.

Rata-rata pengguna mungkin memerlukan alat pembangun, contohnya, jika dia menyukai fon atau warna halaman tertentu, dan dia ingin tahu namanya. Sebarang elemen boleh dilihat dengan membuka kod html dan gaya css yang digunakan pada halaman ini. Kemudian anda boleh menyalin data yang diperlukan (contohnya, gaya dan kod butang) dan tampalkannya ke tapak anda.

Pengaktifan mod

Bagaimana untuk mendayakan mod pembangun? Antara muka dengan alatan didayakan dalam beberapa cara. Pertama, buka penyemak imbas Yandex pada mana-mana halaman.

Cara pertama ialah membuka konsol dengan alat:

1. Di penjuru kanan sebelah atas pelayar web, klik pada ikon "tetapan" (dengan tiga jalur mendatar).
2. Dalam senarai yang terbuka, pilih item "lanjutan".
3. Seterusnya, klik pada "Lagi alat".
4. Pilih alat yang betul.

Kaedah kedua adalah untuk mereka yang tidak mahu membuka konsol dengan tetikus. Untuk melakukan ini, anda boleh menggunakan kekunci pintas untuk mengaktifkan alat yang diperlukan, dengan sebarang susun atur papan kekunci dan tidak kira sama ada kekunci "Caps Lock" ditekan:

• Ctrl+U (untuk papan kekunci Rusia – huruf “G”) – untuk melihat kod halaman (“Lihat kod halaman”). Untuk membuat perubahan, klik pada butang "Edit".
• Ctrl+Shift+J (“O”) – untuk membuka konsol java(“konsol JavaScript”) Alat dibuka selepas mengklik tab "Konsol".
• Ctrl+Shift+I (Ш) – untuk memilih alat pembangun (“Alat pembangun”).

Alat pembangun boleh dibuka dengan hanya satu kekunci - "F12". Seterusnya, klik pada tab "Konsol" yang sama. hidup Sistem Mac Alat pembangun didayakan dengan menekan Cmd" ⌘, "Option" ⌥ dan "I".

Pembangun sambungan juga boleh menggunakan konsol. Untuk melakukan ini anda perlukan:

1. Buka penyemak imbas Yandex.
2. Tampal ke dalam bar alamat pautan penyemak imbas://extensions/ (kaedah yang sama berfungsi dalam Chrome).
3. Ikut la.

Anda akan diarahkan ke sini:

Tandai kotak di bahagian atas yang tertera "Mod Pembangun". Selepas ini, pengguna diberi pilihan tentang perkara yang perlu dilakukan dengan sambungan:

• Untuk mengemas kini sambungan yang dipasang dalam penyemak imbas, klik pada "kemas kini sambungan".
• Jika anda perlu mengujinya, pilih pilihan "Muat sambungan yang tidak dibungkus", dan kemudian klik pada fail yang dikehendaki.

Untuk mendayakan sambungan, anda perlu pergi ke bahagian "Tambah". Di sini anda akan melihat senarai semua sambungan yang dipasang dalam penyemak imbas. Sesetengah daripada mereka mungkin aktif, manakala yang lain mungkin dilumpuhkan. Anda boleh melancarkan dan melumpuhkan sambungan menggunakan suis khas.

Oleh itu, mengetahui cara membuka mod pembangun, pakar boleh mempercepatkan kerja pada halaman tapak web dengan ketara.

Hello, kawan-kawan yang dikasihi!

Hari ini saya ingin bercakap tentang alat unik untuk pembangun web, terbina dalam pelayar popular Google Chrome. Alat ini dipanggil WebTools atau pemeriksa web. Kerana kesederhanaan dan kemudahannya, ia boleh digunakan oleh kedua-dua orang yang terlibat secara profesional dalam membuat tapak web, dan mereka yang hanya sedikit biasa dengan bahasa HTML dan CSS. Alat ini membolehkan anda membetulkan ralat dalam kod tapak web semasa pembuatannya, membuat perubahan pada tapak web sedia: menukar susunan elemen, reka bentuknya dan banyak lagi.

Mari kita lihat dengan lebih dekat alat WebTools.

Ini boleh dilakukan dengan dua cara:

Tetingkap alat terdiri daripada dua bahagian. Secara lalai, tab Elemen dibuka di sebelah kiri, yang memaparkan kod HTML halaman dan tab Gaya dibuka di sebelah kanan. Ia mengandungi kod CSS bagi elemen yang dipilih.

Perlu diperhatikan dengan segera bahawa tetingkap WebTools boleh diletakkan dalam cara yang berbeza. Untuk melakukan ini, klik pada ikon di sebelah butang tutup dan pilih pilihan yang dikehendaki:

• Di bahagian bawah tetingkap penyemak imbas.
• DENGAN sebelah kanan. Ini boleh menjadi mudah apabila menggunakan skrin skrin lebar.
• Dalam tetingkap yang berasingan. Pilihan ini mudah jika anda menggunakan, anda boleh mencuba kod pada satu monitor, dan melihat hasilnya pada yang kedua.

Cara untuk menavigasi melalui kod

Dua kaedah sedemikian adalah mungkin.

• Pada mulanya, kami hanya menggerakkan tetikus ke atas kod dalam tetingkap Pemeriksa Web dan kawasan yang sepadan dengan kod itu diserlahkan pada halaman web itu sendiri. Iaitu, kita mencari elemen menggunakan kod.
• Kaedah kedua adalah sebaliknya, apabila kod ditemui oleh elemen. Dalam kes ini, kami bergerak di sekitar halaman dan kawasan kod diserlahkan. Dengan mengklik pada elemen yang kami minati, kami akan melihat kodnya dalam tetingkap di bawah.

Untuk menukar mod pergerakan, gunakan butang paling kiri.

Kod Suntingan

Kelebihan utama WebTools ialah semua perubahan dalam kod kelihatan serta-merta pada halaman web dalam tetingkap penyemak imbas, iaitu, alat ini mengubah penyemak imbas anda menjadi editor visual.

Untuk mengedit kod yang anda perlu lakukan Klik dua kali pada teg yang sepadan, atribut, pemilih CSS atau nilainya. Elemen akan diserlahkan dan boleh diedit.

Alat ini mempunyai banyak perkara kecil yang berbeza yang menjadikan kerja anda lebih mudah. Contohnya, dengan memilih gaya elemen, anda boleh menentukan dalam baris mana dan dalam fail CSS mana ia ditulis. Apabila bekerja dengan warna, palet muncul untuk membantu anda memilih warna yang betul. Apabila anda menyerlahkan URL imej, lakaran kecil dipaparkan, dsb.

Ciri menarik alat ini ialah ia membolehkan anda menyerlahkan kod bukan sahaja dalam baris, tetapi juga dalam lajur. Untuk melakukan ini, pergi ke tab Sumber, pilih fail untuk diedit, cari baris yang diperlukan, tekan kekunci Alt dan pilih lajur dengan kepingan kod yang sama. Dengan cara ini, anda boleh mengedit beberapa elemen yang sama dalam baris yang berbeza sekaligus.

Menguji susun atur penyesuaian

Satu lagi fungsi berguna dan berkaitan alat WebTools ialah menyemak paparan halaman dihidupkan pelbagai peranti. Untuk mengaktifkannya, klik pada butang dengan gambar telefon. Kini anda boleh memilih resolusi skrin, memutarkannya dan menukar skala. Tingkap pemeriksa itu sendiri tidak berubah.

Pengekodan imej Base64

Dalam artikel itu, saya menulis bahawa untuk mempercepatkan pemuatan tapak, imej kecil boleh dikodkan dalam format URL data dan dimasukkan terus ke halaman HTML. Jadi, alat unik kami membolehkan anda melakukan pengekodan sedemikian. Bagaimana hendak melakukannya?

Helah rahsia

Menggunakan alat ini, anda boleh mengkaji kod bukan sahaja tapak web anda, tetapi juga kod lain yang dibuka dalam penyemak imbas. Dan, jika anda menyukai mana-mana elemen tapak orang lain, tetapi anda tidak tahu cara ia dibuat, anda hanya boleh menyalin kod HTML dan gaya CSS yang sepadan, menampalnya ke dalam fail anda dan kemudian mengeditnya. Sudah tentu, ini memerlukan sekurang-kurangnya pengetahuan minimum tentang bahasa-bahasa ini.

Kecacatan

Apabila bekerja dengan alat penyuntingan kod yang dipertimbangkan, anda akan segera melihat kelemahannya - semua perubahan yang dibuat pada kod tidak disimpan. Selepas memuat semula halaman dalam penyemak imbas, ia akan kembali kepada bentuk asalnya. Untuk menyimpan perubahan ini, anda perlu membuka fail yang sepadan penyunting teks, edit kod dan simpannya. Saya ingin semua pelarasan yang dibuat dalam WebTools disimpan dengan segera. Masalah ini boleh diselesaikan, dan kita akan melihat bagaimana untuk melakukannya dalam post seterusnya. Oleh itu, langgan kemas kini blog supaya tidak terlepas bahan baru (borang langganan di sebelah kanan).

Sementara itu, untuk kejelasan, saya cadangkan menonton video:

Hari ini saya memperkenalkan anda kepada salah satu alat yang berguna untuk pembangunan web, tetapi terdapat banyak alat sedemikian, jadi pasukan WebForMyself telah membangunkan kursus baru "Alat Pembangun Bahagian Depan". Jika anda terlibat dalam mencipta laman web, maka kursus ini mungkin menarik dan berguna kepada anda. Berikut adalah pautan ke kursus

Alat Pembangun Bahagian Hadapan

Hai semua.

Saya menghasilkan versi artikel saya yang lebih maju menggunakan alat pembangun web dalam Google Chrome. Penyemak imbas adalah popular dan oleh itu alatnya adalah dalam permintaan. Lebih-lebih lagi, baru-baru ini Google mengedarkan sambungan yang berguna untuk mengoptimumkan halaman html. Tetapi kini Google telah mengubah fikirannya dan penilaian ini hanya tersedia dalam talian.

Di bawah adalah catatan oleh seorang penulis bernama Akkad.

Siaran ini adalah kesinambungan daripada semakan penyemak imbas Google Chrome itu sendiri. Di dalamnya saya ingin menarik perhatian kepada Alat Pembangun Google Chrome. Saya fikir adalah buruk untuk tidak memberikan produk ini sekurang-kurangnya sedikit perhatian. Lagipun, pelayar ini menyediakan benar-benar berharga dan cara penting, dengan bantuan yang mana anda boleh menambah baik dan menambah baik operasi halaman anda, skrip, mencari dan menghapuskan banyak ralat, mengawal paparan visual halaman, dsb. Satu-satunya perkara yang boleh menjadi penghalang kepada penggunaan aktif alat ini mungkin adalah ketidakupayaan untuk menggunakannya dan juga kekurangan pengetahuan bahawa ia wujud.)

Sebelum beralih ke perihalan antara muka itu sendiri, saya ingin memikirkan soalan ini: bagaimana untuk menentukan penyemak imbas Google Chrome?

Ini mungkin diperlukan jika anda perlu menulis kod khas khusus untuknya, atau sebaliknya - untuk memaklumkan pengguna bahawa pelayar lain diperlukan, atau boleh digunakan kebolehan istimewa, khusus untuknya. Anda boleh menentukan bahawa pengguna menggunakan penyemak imbas Chrome seperti berikut:

jika (navigator.userAgent.toLowerCase().indexOf("chrome")>-1) (

//kod, jika bukan Chrome

atau seperti ini:

jika (window.chrome) (

//ini ialah penyemak imbas Chrome)

//ini adalah penyemak imbas yang berbeza

dan juga versi:

var chromever=/Chrome\/+\b/i.exec(navigator.appVersion).substring(7);

Dalam pembolehubah kita akan mendapat versi dalam bentuk rentetan, yang boleh dihuraikan untuk mengenali subversi. Kod "kompleks" sedemikian diperlukan kerana sifat appVersion itu sendiri mengandungi kedua-dua versi OS dan Chrome dan AppleWebKit.

Jadi, untuk membuka alat pembangun dalam Google Chrome pada mana-mana halaman, hanya tekan kombinasi kekunci Ctrl+Shift+J. Keseluruhan toolkit muncul dari bawah, membelah keseluruhan tetingkap kepada dua bingkai. Dia benar-benar sudah berakhir Bahasa Inggeris, tetapi ini tidak begitu penting. Di bahagian atas terdapat panel butang yang anda boleh beralih kepada alat tertentu. Di sebelah kanannya terdapat medan carian, yang digunakan untuk mencari teg dan nod lain dalam kod halaman. Dan di bahagian paling bawah ialah konsol Google Chrome. Ia mengandungi semua amaran dan ralat yang berlaku semasa halaman dimuatkan. Apabila menguji halaman buat kali pertama, anda harus melihatnya dahulu, kerana anda akan dengan cepat menemui skrip yang tidak dimuatkan, kod yang memanggil kesilapan kritikal, pelanggaran dalam struktur dokumen, seperti teg tidak tertutup, dsb. Output rekod dalam konsol boleh ditapis menggunakan butang "Semua" - tunjukkan semua acara, "Ralat" - hanya ralat, "Amaran" - amaran. Sudah tentu, pertama sekali, anda perlu menghapuskan ralat, kemudian anda boleh beralih kepada amaran dan menentukan sama ada ia penting.

Panel elemen dalam Alat Pembangun.

Ini mungkin bahagian yang paling penting dan paling mudah. Ruang kerja di sebelah kiri menunjukkan kod sumber halaman dengan penyerlahan sintaks. Dan bukan sahaja yang asal, mencerminkan struktur DOM sebenar dokumen, termasuk elemen yang dicipta secara dinamik, yang semasa tontonan biasa kod sumber tidak kelihatan. Semuanya diatur dalam bentuk senarai pelbagai peringkat, iaitu Apabila anda mengklik, anda boleh melihat semua elemen bersarang (keturunan) yang satu ini. Laluan ke teg yang dipilih dipaparkan di bawah kod (betul-betul di atas konsol). Tetapi di sebelah kanan dipaparkan semua sifat yang dikumpulkan mengikut kategori elemen yang sedang dipilih. Lebih-lebih lagi, apabila anda menggerakkan tetikus anda pada teg tertentu, ia menonjol pada halaman dengan saiznya dan ini saiz semasa muncul sebagai petua alat. Dengan cara ini, anda boleh memantau dengan teliti sama ada blok pada halaman mengambil saiz yang diperlukan, dan juga mencari yang bermasalah yang tidak dipaparkan seperti yang diharapkan.

Tab Gaya Dikira mengandungi semua unsur aktif gaya, dengan mengambil kira semua penggantian, perubahan, pewarisan, dsb. Tersedia dalam pada masa ini makna. Bersamaan dengan objek currentStyle. Tab Gaya mengandungi peraturan yang tertakluk kepada objek yang dipilih. Tetapi tidak seperti yang sebelumnya, tidak semuanya bertepatan dengannya masa sebenar. Di atasnya anda boleh melihat peraturan anda sendiri dan peraturan yang diwarisi daripada ibu bapa, serta maknanya. Jika peraturan ditakrifkan tetapi tidak aktif, ia dipalang. Gaya yang tidak disokong juga dipaparkan sebagai coretan. pelayar Google Chrome dan kemudian ikon dengan tanda seru. Dalam kes lain, ia mempunyai kotak pilihan di sebelah kanan, menyahtanda yang melumpuhkan tindakan atribut CSS tertentu dan menyemaknya membolehkannya. Menggunakan kaedah ini, anda boleh mencari peraturan CSS tertentu kerana unsur tersebut dipaparkan secara tidak betul. Selain itu, nilai setiap harta boleh diedit dan perubahan boleh diperhatikan dengan segera. Untuk melakukan ini, klik dua kali pada nilai harta dan taip nilai baharu. Ini ditunjukkan dalam animasi di atas, tetapi untuk tontonan saiz asal buka dalam tetingkap baharu, jika tidak, tidak semua penyemak imbas mengeluarkannya dengan cara ini.

Tab Metrik seterusnya secara skematik menunjukkan peletakan elemen dan nilainya: jidar, padding, jidar. Nilai inden dan sempadan mudah dilihat.

Tab Properties juga sangat bermaklumat. Di dalamnya, elemen yang dipilih diwakili sebagai contoh objek pokok DOM. Dan semua sifat, kaedah, peristiwa dan nilainya yang tersedia dapat dilihat. Contohnya: id, tajuk, innerHTML, dsb. Mereka juga boleh diedit. Titik putus - Mengandungi titik putus apabila anda menetapkannya. Ini semasa menyahpepijat.

Panel sumber dalam Alat Pembangun.

Alat ini menyuap halaman yang dimuatkan dalam bentuk komponen: the fail html, lukisan, gaya css, skrip disambungkan. Ia juga dipecahkan kepada bingkai, jika ia digunakan. Semua komponen ini, dalam bentuk senarai hierarki, diletakkan dalam panel di sebelah kiri, yang menyerupai panel Windows Explorer. Apabila anda memilih komponen tertentu, ia ditunjukkan di sebelah kanan. Jadi skrip dan helaian gaya tersedia untuk melihat kod dan mengedit.

Panel rangkaian dalam Alat Pembangun.

Bahagian ini menunjukkan semua permintaan yang dibuat semasa memuatkan halaman ini dan komponennya.

Lajur "Kaedah" mengandungi jenis permintaan (GET, POST).

“Status” – respons pelayan, sebaiknya 200 OK. Di sini adalah penting untuk memberi perhatian kepada 404 dan 403 yang salah yang harus dihapuskan. Ia mungkin disebabkan oleh alamat yang salah (atribut src). Ia juga dinasihatkan untuk menghapuskan ubah hala 301 dan 302 untuk mengurangkan jumlah permintaan, dan oleh itu kelajuan memuatkan tapak.

“Jenis” – jenis kandungan, contohnya untuk dokumen web ia mestilah teks/html.

“Saiz/Kandungan” – saiz setiap komponen yang diminta.

“Masa/Latensi” – masa memuatkan.

Maklumat ini juga boleh disemak melalui HandyCache. Secara umum, menggunakan alat Rangkaian, anda boleh menilai dan menganalisis prestasi pelayan, serta saiz fail anda. Cuba kurangkan jika boleh untuk mengurangkan beban pada pelayan. Sudah tentu, juga mengesan dan menghapuskan kemungkinan ralat.

Panel skrip dalam Alat Pembangun.

Ia sangat serupa dengan Elemen, tetapi direka untuk menganalisis dan menyahpepijat skrip. Anda boleh memilih skrip tertentu daripada senarai semua yang dimuat turun di bahagian atas sebelah kiri. Kodnya segera dipaparkan dalam tetingkap di sebelah kiri. Panel di sebelah kanan adalah serupa dalam rupa dan struktur dengan Elemen, tetapi dengan tab khusus. "Ekspresi Tonton" – anda boleh menentukan ungkapan (pembolehubah) yang anda mahu tonton. Dalam yang lain, anda boleh menetapkan titik putus, tindanan panggilan dan perkara lain seperti itu.

Panel garis masa dalam Alat Pembangun.

Ini sangat alat yang berguna untuk menganalisis kelajuan memuatkan halaman laman web. Dengan itu anda boleh dapatkan perwakilan visual dalam bentuk carta, berapa banyak masa yang digunakan untuk memuatkan dan mentafsir halaman.

Bagaimana untuk menggunakan Garis Masa?

1.Lancarkannya dahulu dan pilih bahagian "Garis Masa" di sebelah kiri dengan ikon jam.

2.Klik butang Rakam di bahagian bawah panel ●.

3. Muat semula halaman yang sedang dikaji sehingga dimuatkan sepenuhnya.

4.Tekan butang "Rekod" sekali lagi, yang kini berwarna merah.

Kini, dalam senarai Rekod di sebelah kiri, pelbagai peristiwa yang berlaku semasa proses memuatkan dan memaparkan dokumen tersedia. Dan di bahagian atas sebelah kanan mereka dibentangkan dalam bentuk gambar rajah warna dengan skala masa, menunjukkan proses yang mengambil masa berapa lama. Butiran tentang setiap acara boleh didapati dengan mengklik padanya dalam senarai Rekod. Maklumat ini akan muncul sebagai petua alat. Peristiwa yang sepadan dengan memuatkan dan menerima data diwarnakan warna biru; pelaksanaan skrip - kuning; paparan visual unsur adalah ungu. Dengan cara ini anda boleh melihat dengan mudah dan jelas di mana masa paling banyak dihabiskan untuk memuatkan tapak anda atau bukan milik anda. Hampir mustahil untuk mempengaruhi segmen biru, kerana ia bergantung pada kelajuan pengehosan, tetapi cuba mengurangkan segmen kuning dan ungu adalah dalam kuasa anda.

Untuk mengezum dan menyerlahkan hanya tempoh masa tertentu, gunakan tetikus dan peluncur pada garis masa di bahagian atas. Hanya peristiwa dari tempoh ini akan dipaparkan di bawah pada skala yang diperbesarkan. Di samping itu, di bawah anda boleh melumpuhkan paparan setiap jenis acara dengan menyahtanda kotak yang sepadan.

Dengan pergi ke bahagian "Memori", anda akan mempunyai akses kepada graf penggunaan memori oleh halaman ini.

Panel profil dalam Alat Pembangun.

1. "Profil CPU", yang melaluinya anda boleh melihat masa CPU yang dibelanjakan untuk melaksanakan skrip halaman.

2. “Timbunan Syot Kilat”, direka untuk mengumpul statistik memori yang digunakan oleh unsur halaman dan skrip. Berapa banyak memori yang digunakan oleh objek?

Panel audit dalam Alat Pembangun.

Alat ini akan menilai prestasi halaman dan rangkaian serta memberikan petua tentang cara meningkatkannya. Contohnya: alih keluar peraturan css yang tidak digunakan, fungsi javascript, dan mungkin keseluruhan modul, dsb. Untuk menjalankannya, anda perlu memilih audit yang diperlukan ( Laman sesawang Prestasi) dan tekan butang "Jalankan" di bahagian bawah. Jom dapatkan hasilnya dengan nasihat.

Nampaknya semua yang saya ingin tulis. Saya berharap bahan dalam jawatan ini adalah mengenai alat untuk pembangun web Google Chrome telah menjadi atau akan menjadi berguna kepada anda dan anda akan dapat menggunakannya dalam amalan. Jika anda mempunyai apa-apa untuk ditambah atau dikritik, komen sedia untuk anda. Anda boleh menyatakan rasa terima kasih anda dengan berkongsi siaran di dalam rangkaian sosial atau pautan daripada tapak anda.