Heim > Artikel > Web-Frontend > 9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

高洛峰Original: 2017-02-03 14:39:031301Durchsuche

1. Befehle zum Anzeigen von Informationen

<!DOCTYPE html>
<html>
<head>
 <title>常用console命令</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 <script type="text/javascript">
  console.log(&#39;hello&#39;);  
  console.info(&#39;信息&#39;);  
  console.error(&#39;错误&#39;);  
  console.warn(&#39;警告&#39;); 
  </script>
</body>
</html>

Der am häufigsten verwendete Befehl ist console.log.

2. Platzhalter

Die obige Konsolenkonzentration unterstützt das Platzhalterformat von printf. Die unterstützten Platzhalter sind: Zeichen (%s), Ganzzahlen (%d oder %i), Gleitkommazahlen (%f) und Objekte (%o)

<script type="text/javascript">
   console.log("%d年%d月%d日",2011,3,26);
 </script>

Wirkung:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

Drei, Informationsgruppierung

<!DOCTYPE html>
 <html>
 <head>
  <title>常用console命令</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <script type="text/javascript">
   console.group("第一组信息");
  
  　　　　console.log("第一组第一条:我的博客(http://www.ido321.com)");
  
  　　　　console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
  
  　　console.groupEnd();
  
 　　 console.group("第二组信息");
  
  　　　　console.log("第二组第一条");
  
 　　　　console.log("第二组第二条:欢迎你加入");
  
 　　 console.groupEnd();  </script>
 </body>
 </html>

Wirkung:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

4. Sehen Sie sich die Informationen des Objekts an

console.dir( ) kann alle Eigenschaften und Methoden eines Objekts anzeigen.

<script type="text/javascript">
   var info = {
    blog:"http://www.ido321.com",
    QQGroup:259280570,
    message:"程序爱好者欢迎你的加入"
   };   console.dir(info);
</script>

Wirkung:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

5. Den Inhalt eines Knotens anzeigen

console.dirxml() wird verwendet, um den anzuzeigen Webseite Der in einem Knoten enthaltene HTML/XML-Code.

<!DOCTYPE html>
 <html>
 <head>
  <title>常用console命令</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
 <div id="info">
   <h3>我的博客：www.ido321.com</h3>
   <p>程序爱好者:259280570,欢迎你的加入</p>
  </div>
  <script type="text/javascript">
   var info = document.getElementById(&#39;info&#39;);  
   console.dirxml(info); 
   </script>
 </body>
 </html>

Wirkung:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

6. Bestimmen Sie, ob die Variable wahr ist

console.assert() wird verwendet, um eine zu beurteilen Ausdruck oder ob die Variable wahr ist. Wenn das Ergebnis „nein“ ist, wird eine entsprechende Meldung an die Konsole ausgegeben und eine Ausnahme ausgelöst.

<script type="text/javascript">
  　var result = 1;
  　console.assert( result );
  　var year = 2014;
  　console.assert(year == 2018 );
</script>

1 ist ein Wert ungleich Null, was wahr ist; während das zweite Urteil falsch ist, wird eine Fehlermeldung auf der Konsole angezeigt

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

7. Tracking-Funktion Der Aufruf-Trace

console.trace() wird verwendet, um den Aufruf-Trace der Funktion zu verfolgen.

<script type="text/javascript">
 /*函数是如何被调用的，在其中加入console.trace()方法就可以了*/　　
 function add(a,b){  
 console.trace();
 　　　　return a+b;
　　}
　　var x = add3(1,1);
 　function add3(a,b){return add2(a,b);}
　　function add2(a,b){return add1(a,b);}
　　function add1(a,b){return add(a,b);}
　　</script>

Informationen zur Konsolenausgabe:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

8. Timing-Funktion

console.time() und console.timeEnd() , Wird verwendet, um die Laufzeit des Codes anzuzeigen.

<script type="text/javascript">
 　　console.time("控制台计时器一");
 　　for(var i=0;i<1000;i++){
 　　　　for(var j=0;j<1000;j++){}
 　　}
 　　console.timeEnd("控制台计时器一");
</script>

Die Laufzeit beträgt 38,84 ms

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

9. Leistungsanalyse von console.profile()

Leistungsanalyse (Profiler ) Es dient dazu, die Laufzeit jedes Teils des Programms zu analysieren und herauszufinden, wo der Engpass liegt. Die verwendete Methode ist console.profile().

<script type="text/javascript">
 　　function All(){
   alert(11);
　　　　  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++){}
 　　}
 
 　　console.profile(&#39;性能分析器&#39;);
 　　All();
 　　console.profileEnd();
 </script>

Die Ausgabe ist wie in der Abbildung dargestellt:

9 Konsolenbefehle zur Vereinfachung des JavaScript-Debuggings

Das Obige ist der gesamte Inhalt dieses Artikels Jeder lernt und ich hoffe, dass jeder die chinesische Website unterstützt.

Weitere verwandte Artikel über 9 Konsolenbefehle, die das JavaScript-Debuggen erleichtern, finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Funktion console.assert() in JavaScriptNächster Artikel：Einführung in die Funktion console.assert() in JavaScript

In Verbindung stehende Artikel

Mehr sehen