JavaScript- ust Know Dev Tools Trik

Salam semua dan selamat datang kembali ke hari lain mengerjakan JavaScript30 Wes Bos! Cabaran hari ini hanyalah cabaran. Hari ini hanya melihat beberapa (mungkin...14) helah alat dev yang berbeza. Tidak seperti kardio tatasusunannya, ini tidak membuatkan kami benar-benar melakukan apa-apa tetapi hanya menonton sambil menunjukkan kepada kami cara yang berbeza untuk berinteraksi dengan konsol. Saya sebenarnya agak teruja untuk melihat ini kerana saya hampir hilang akal beberapa minggu lalu apabila saya melihat dia menggunakan console.table() dalam video sebelumnya. Saya tidak tahu mengapa ia tidak jelas kepada saya bahawa terdapat banyak cara yang berbeza untuk berinteraksi dengan konsol tetapi saya benar-benar terpegun pada masa itu.

Sebelum bekerja dengan arahan konsol yang berbeza, perkara pertama yang Wes tunjukkan ialah cara memecahkan fungsi JavaScript pada tindakan yang berbeza (pengubahsuaian subpokok, pengubahsuaian atribut atau penyingkiran nod) dan kemudian tunjukkan baris kod yang akan mempengaruhi perubahan dalam halaman tersebut. Ini kelihatan seperti cara yang cukup hebat untuk memecahkan pelbagai aspek tapak web untuk melihat dengan tepat cara mereka menggunakan JavaScript untuk interaktiviti. Anda boleh melihat cara mereka mengodkan perubahan tertentu dan menjeda perubahan sebelum ia berlaku. Baiklah...sekurang-kurangnya itulah yang saya ambil daripada itu.

    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

Bahagian seterusnya merangkumi tindakan dan arahan berbeza yang boleh anda gunakan dalam konsol. Saya tidak pasti sepenuhnya bila anda perlu menggunakan mana-mana ini...tetapi ini tidak bermakna ia tidak menarik. Contohnya: Saya tidak tahu anda boleh menggayakan teks dalam konsol itu sendiri...ia agak tidak perlu tetapi saya rasa ia kelihatan menarik. Perkara yang sama dengan panggilan mesej amaran/ralat/maklumat. Ya, ia agak menarik untuk melakukannya. Tetapi mengapa anda mahu berbuat demikian, saya tidak dapat memahami sebabnya (selain daripada kemungkinan membuat permainan berasaskan teks dalam konsol).

Kemudian kami membincangkan cara menguji sama ada bahagian dokumen itu mengandungi kelas tertentu dengan console.assert(). Ini juga boleh digunakan untuk menguji sama ada sesuatu adalah benar palsu dalam dokumen. Jika ia salah ia boleh/akan memaparkan mesej ralat anda sendiri. Kemudian kami cepat membincangkan cara mengosongkan konsol dengan console.clear() yang membantu membersihkannya. Ia juga boleh berguna jika anda mempunyai beberapa arahan konsol yang berbeza di seluruh dokumen anda dan ingin membersihkannya pada penghujungnya. Ini boleh menghalang anda daripada perlu melalui keseluruhan perkara dan mengeluarkan, atau mengulas, setiap arahan konsol sehingga tahap itu.

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

Seterusnya, kami turut meliputi console.dir() yang membolehkan anda melihat elemen dom sesuatu perkara tertentu. Terdapat begitu banyak bahagian ini yang saya tidak kenali atau faham, tetapi saya membayangkan itu akan tiba pada masanya. Perintah console.group() yang saya rasa mempunyai lebih banyak kegunaan untuk saya pada masa ini. Hanya fakta bahawa anda boleh mengambil maklumat telah disimpan oleh objek atau tatasusunan dan maklumat mereka kelihatan sangat membantu. Kadangkala kod mentah untuk tatasusunan atau objek dalam tatasusunan boleh menjadi sangat menggembirakan tetapi ini akan menyusun maklumat secara automatik. Ia agak menarik sebenarnya.

Dua bahagian akhir pelajaran adalah dengan console.count() dan console.time() yang juga kelihatan seperti kes penggunaan khusus yang saya rasa tidak akan saya perlukan. Fungsi pengiraan adalah sejenis makhluk yang hebat yang anda boleh lihat berapa kali perkataan/frasa tertentu dirujuk. Ia tidak sepenuhnya jelas sama ada ia hanya dirujuk dalam konsol atau untuk keseluruhan dokumen tetapi nampaknya ia hanya dalam konsol. console.time() nampaknya ketinggalan zaman. Saya mengatakan ini kerana terdapat banyak cara yang berbeza untuk melihat seberapa cepat anda mendapat data daripada sumber lain. Sama ada daripada memuatkan elemen berbeza daripada tapak web tertentu atau pergi ke tapak web itu sendiri. Terdapat banyak cara untuk melihat seberapa cepat perkara dimuatkan tetapi saya rasa masuk akal untuk dapat melakukannya dalam konsol juga.

Saya rasa itu pada asasnya merangkumi pelajaran hari ini. Ia tidak begitu menarik tetapi ia bermaklumat. Saya mungkin menggunakan beberapa arahan ini untuk bergerak ke hadapan tetapi pada masa ini saya gembira melihat cara lain untuk menggunakan konsol kerana saya ingin tahu sejak pertama kali saya melihat dia menggunakan console.table() dengan begitu acuh tak acuh sehingga saya masih memikirkannya sekarang . Nah...itu sahaja untuk hari ini! Sila kembali lagi segera untuk melihat: JavaScript 30 - 10 Tahan Shift untuk Memeriksa Berbilang Kotak Semak!

Atas ialah kandungan terperinci JavaScript- ust Know Dev Tools Trik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!