Rumah  >  Artikel  >  hujung hadapan web  >  Penjelasan terperinci tentang kemahiran console_javascript javascript

Penjelasan terperinci tentang kemahiran console_javascript javascript

WBOY
WBOYasal
2016-05-16 15:52:541398semak imbas

1. Perintah untuk memaparkan maklumat

console.log(); //Input konsol tidak akan dikeluarkan pada halaman web

console.info(); //Maklumat am

console.debug(); //Maklumat nyahpepijat

console.warn(); //Gesaan amaran

console.error(); //Ralat gesaan

"console.log();" boleh digunakan untuk menggantikan "alert();" atau "document.write();" Sebagai contoh, tulis "console.log("Hello World");" halaman dan kemudian Ia akan dimasukkan dalam konsol, tetapi tidak dalam halaman web.

Kami memasukkan kod berikut ke dalam kod:

console.info( "Ini ialah maklumat" );

console.debug( "Ini ialah nyahpepijat" );

console.warn( "Ini adalah amaran" );

console.error( "Ini adalah ralat" );

Selepas memuatkan, buka konsol dan anda akan melihat sesuatu seperti berikut:

2. Pemegang tempat

Lima kaedah objek konsol di atas semuanya boleh menggunakan ruang letak gaya printf. Walau bagaimanapun, terdapat sedikit jenis ruang letak dan hanya empat jenis ruang letak disokong: aksara (%s), integer (%d atau %i), nombor titik terapung (%f) dan objek (%o). Contohnya:

console.log( "%d tahun %d bulan %d hari" , 2011,3,26);

console.log( "Pi ialah %f" , 3.1415926 );

%o pemegang tempat boleh digunakan untuk melihat keadaan dalaman objek. Sebagai contoh, terdapat objek sedemikian:

var anjing = {} ;

dog.name = "大毛";

dog.color = "kuning";

Kemudian, gunakan pemegang tempat o% untuknya:

console.log( "%o" , anjing );

3. Paparan kumpulan

console.group(); console.groupEnd(); (这两个方法是成对使用的)
  console.group("第一组信息");
    console.log("第一组第一条");
    console.log("第一组第二条");
  console.groupEnd();
  console.group("第二组信息");
    console.log("第二组第一条");
    console.log("第二组第二条");
  console.groupEnd();

4. console.dir(); (memaparkan semua sifat dan kaedah objek)

Sebagai contoh, sekarang tambahkan kaedah bark() pada objek anjing dalam Bahagian 2, dan kemudian gunakan "dir();" untuk memaparkannya:

dog.bark = function(){ alert( "bark woof" };

console.dir( anjing );

5. console.dirxml(); (dapatkan semua kod html/xml yang terkandung dalam nod)

 var table = document.getElementById("table1"); //Dapatkan nod

console.dirxml( table ); //Paparkan semua kod nod

6. console.assert(); (digunakan untuk menentukan sama ada ungkapan atau pembolehubah adalah benar. Jika hasilnya tidak, mesej yang sepadan akan dikeluarkan pada konsol dan pengecualian akan dilemparkan)

 hasil var = 0;

console.assert( result ); //false

 var tahun = 2000;

console.assert( tahun == 2011 ); //false

7. console.trace(); (digunakan untuk mengesan jejak panggilan fungsi)

/*Fungsi tambahan*/

Fungsi tambah( a,b ){

kembalikan a b;

 }

Saya ingin tahu bagaimana fungsi ini dipanggil, cuma tambah kaedah console.trace() padanya:

Fungsi tambah( a,b ){

console.trace();

kembalikan a b;

 }

Anggap bahawa kod panggilan fungsi ini adalah seperti berikut:

 var x = add3(1,1);

Fungsi add3( a,b ){ return add2(a,b);

Fungsi add2( a,b ){ return add1( a,b );

Fungsi add1( a,b ){ return add( a,b );

Selepas berjalan, jejak panggilan add() akan dipaparkan, dari atas ke bawah, add(), add1(), add2(), add3()

8. console.time(); dan console.timeEnd();

  console.time( "计时器一" );

  for( var i=0;i<1000;i++ ){

    for(var j=0;j<1000;j++){}

  }

  console.timeEnd( "计时器一" );

9. Analisis Prestasi

Analisis prestasi (Profiler) adalah untuk menganalisis masa berjalan setiap bahagian program dan mengetahui di mana halangannya Kaedah yang digunakan ialah console.profile();

Andaikan terdapat fungsi Foo(), yang memanggil dua fungsi lain funcA() dan funcB(), yang mana funcA() dipanggil 10 kali dan funcB() dipanggil sekali.

Kemudian analisis prestasi larian “Foo();”:
  function Foo(){

    for(var i=0;i<10;i++){funcA(1000);}

    funcB(10000);

  }

  function funcA(count){

    for(var i=0;i<count;i++){}

  }

  function funcB(count){

    for(var i=0;i<count;i++){}

  }

Bar tajuk menunjukkan bahawa sejumlah 12 fungsi telah dijalankan, mengambil jumlah keseluruhan 2.656 milisaat. Antaranya, funcA() berjalan 10 kali, mengambil masa 1.391 milisaat, masa berjalan terpendek ialah 0.123 milisaat, masa berjalan paling lama ialah 0.284 milisaat dan purata ialah 0.139 milisaat, mengambil masa 1.229ms.

Selain menggunakan kaedah "console.profile();", firebug juga menyediakan butang "Profiler". Apabila anda mengklik butang untuk kali pertama, "Analisis Prestasi" bermula dan anda boleh melakukan operasi tertentu pada halaman web (seperti operasi ajax Kemudian apabila anda mengklik butang untuk kali kedua, "Analisis Prestasi" tamat, dan semua operasi yang dicetuskan oleh operasi ini akan dilakukan.

10. menu Atribut

Selepas nama panel konsol, terdapat segi tiga terbalik Apabila diklik, menu sifat akan dipaparkan.

Secara lalai, konsol hanya memaparkan ralat Javascript. Jika anda memilih Hantar amaran Javascript, ralat CSS dan ralat XML, maklumat segera yang berkaitan akan dipaparkan.

Apa yang lebih berguna di sini ialah untuk memaparkan "XMLHttpRequests", iaitu untuk memaparkan permintaan ajax. Selepas memilih, semua permintaan ajax halaman web akan dipaparkan dalam panel konsol.

Sebagai contoh, jika anda mengklik pada contoh YUI, konsol akan memberitahu kami bahawa ia mengeluarkan permintaan GET menggunakan ajax Maklumat pengepala dan kandungan permintaan dan respons http juga boleh dilihat .

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn