九個Console命令,讓js調試更簡單

一、顯示信息的命令

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <script type="text/javascript">9:         console.log('hello');10:         console.info('信息');11:         console.error('錯誤');12:         console.warn('警告');13:     </script>14: </body>15: </html>

最常用的就是console.log了。

二:占位符

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整數(%d或%i)、浮點數(%f)和對象(%o)

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

效果:
image

三、信息分組

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <script type="text/javascript">9:         console.group("第一組信息");10:11:         console.log("第一組第一條:我的博客(http://www.ido321.com)");12:13:         console.log("第一組第二條:CSDN(http://blog.csdn.net/u011043843)");14:15:       console.groupEnd();16:17:       console.group("第二組信息");18:19:         console.log("第二組第一條:程序愛好者QQ群: 259280570");20:21:         console.log("第二組第二條:歡迎你加入");22:23:       console.groupEnd();24:     </script>25: </body>26: </html>

效果:
image

四、查看對象的信息

console.dir()可以顯示一個對象所有的屬性和方法。

   1: <script type="text/javascript">2:         var info = {3:             blog:"http://www.ido321.com",4:             QQGroup:259280570,5:             message:"程序愛好者歡迎你的加入"6:         };7:         console.dir(info);8: </script>

效果:
image

五、顯示某個節點的內容

console.dirxml()用來顯示網頁的某個節點(node)所包含的html/xml代碼。

   1: <!DOCTYPE html>2: <html>3: <head>4:     <title>常用console命令</title>5:     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: </head>7: <body>8:     <div id="info">9:         <h3>我的博客:www.ido321.com</h3>10:         <p>程序愛好者:259280570,歡迎你的加入</p>11:     </div>12:     <script type="text/javascript">13:         var info = document.getElementById('info');14:         console.dirxml(info);15:     </script>16: </body>17: </html>

效果:

?

六、判斷變量是否是真

console.assert()用來判斷一個表達式或變量是否為真。如果結果為否,則在控制臺輸出一條相應信息,并且拋出一個異常。

   1: <script type="text/javascript">2:       var result = 1;3:       console.assert( result );4:       var year = 2014;5:       console.assert(year == 2018 );6: </script>

1是非0值,是真;而第二個判斷是假,在控制臺顯示錯誤信息
image

七、追蹤函數的調用軌跡。

console.trace()用來追蹤函數的調用軌跡。

   1: <script type="text/javascript">2: /*函數是如何被調用的,在其中加入console.trace()方法就可以了*/3:   function add(a,b){4:         console.trace();5:     return a+b;6:   }7:   var x = add3(1,1);8:   function add3(a,b){return add2(a,b);}9:   function add2(a,b){return add1(a,b);}10:   function add1(a,b){return add(a,b);}11: </script>

控制臺輸出信息:
image

八、計時功能

console.time()和console.timeEnd(),用來顯示代碼的運行時間。

   1: <script type="text/javascript">2:   console.time("控制臺計時器一");3:   for(var i=0;i<1000;i++){4:     for(var j=0;j<1000;j++){}5:   }6:   console.timeEnd("控制臺計時器一");7: </script>

運行時間是38.84ms
image

九、console.profile()的性能分析

性能分析(Profiler)就是分析程序各個部分的運行時間,找出瓶頸所在,使用的方法是console.profile()。

   1: <script type="text/javascript">2:       function All(){3:             alert(11);4:          for(var i=0;i<10;i++){5:                 funcA(1000);6:              }7:         funcB(10000);8:       }9:10:       function funcA(count){11:         for(var i=0;i<count;i++){}12:       }13:14:       function funcB(count){15:         for(var i=0;i<count;i++){}16:       }17:18:       console.profile('性能分析器');19:       All();20:       console.profileEnd();21:     </script>

輸出如圖:
image

轉載于:https://www.cnblogs.com/zhuiluoyu/p/5856030.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/256397.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/256397.shtml
英文地址,請注明出處:http://en.pswp.cn/news/256397.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

numpy——axis

size()和max()中的含義 以前我理解axis0代表行&#xff0c;axis1代表列&#xff1b; 但是這種含義在函數size()和max()中恰恰相反&#xff1b; 其實不是這樣的&#xff0c;我們回到單詞axis本身&#xff0c;它的意思是“軸”&#xff0c;沒錯軸就是代表一個方向&#xff0c;像…

Android ListView幾個重要屬性

1、transciptMode屬性&#xff0c;需要用ListView或者其它顯示大量Items的控件實時跟蹤或者查看信息&#xff0c;并且希望最新的條目可以自動滾動到可視范圍內。通過設置的控件transcriptMode屬性可以將Android平臺的控件&#xff08;支持ScrollBar&#xff09;自動滑動到最底部…

Halcon例程(基于GMM模型的分類)詳解 —— classify_citrus_fruits.hdev

一、例程簡介 該例程比較有代表性&#xff0c;屬于Halcon里的分類方法之一&#xff0c;直接調用Halcon封裝好的GMM分類器&#xff08;高斯混合模型&#xff09;對橘子和檸檬進行分類。GMM屬于概率分類方法&#xff0c;屬于P(Y|X)&#xff0c;通過對樣本的概率密度分布進行估計…

正則表達式匹配不包含特定字符串解決匹配溢出問題

匹配溢出問題在正則表達式當中算是比較常見的問題&#xff0c;它常常導致我們匹配結果莫名其妙的出錯&#xff0c;本文專門為你講解如何通過匹配不包含特定字符串的方法來解決這類問題。 那么&#xff0c;什么是匹配溢出呢&#xff1f; 下面我們來看個例子&#xff1a; 源文本&…

numpy——mgrid

x1,x2 np.mgrid(x1min:x1max:num1j,x2min:x2max:num2j)x1返回的是x1min到x1max間均勻分成num1個數&#xff0c;進行橫向擴展為方陣 x2返回的是x2min到x2max間均勻分成num2個數&#xff0c;進行縱向擴展為方陣 Examples -------- >>> np.mgrid[0:5,0:5] array([[[0,…

Halcon例程(基于3D形狀匹配識別方法)詳解 —— create_shape_model_3d_lowest_model_level.hdev

一、例程簡介 最近在研究3D識別方面的東西&#xff0c;查了不少資料&#xff0c;發現halcon里有不少關于三維物體識別的例程&#xff0c;這里對其中一個做出詳解。該例程是基于三維匹配方法的&#xff0c;因為有三維模型SM3&#xff0c;所以不需要自己創建&#xff1b;另因為例…

15.瀑布流、測量

排行界面TopProtocol &#xff1a;json數據就是寫字符串&#xff0c;所以不需要寫bean對象public class TopProtocol extends BaseProtocol<List<String>> { Override public List<String> paserJson(String json) { List<String> datasnew ArrayList&…

linear-gradient線性漸變

background:linear-gradient(180deg, sliver 20%, skyblue 80%, gray 100%);180deg 是線性漸變的角度,水平方向;如果是90deg,則是垂直方向. silver 20% 是最上面的顏色和該顏色所在的位置,可以為負值,,如 linear-gradient(180deg, silver -7%, pink 80%, skyblue 127%);的效果是…

numpy——stack

np.stack(array,axis,outNone)&#xff0c;函數原型。 其中最重要是的這個axis怎么理解的。 舉例說明&#xff1a;arrays [np.random.randn(3, 4) for _ in range(10)] 會生成一個 10 *( 3 * 4 )的矩陣列表。十個矩陣&#xff0c;每個矩陣是(3 * 4)大小。 首先說明一下axis的映…

C# —— 簡單工廠設計模式詳述

一、基本概念 眾所周知&#xff0c;C#是一種面向對象的語言&#xff0c;而其中封裝&#xff0c;繼承&#xff0c;多態是面向對象的三大重要特征&#xff0c;簡單工廠的設計模式則可以完全體現這些特征。要徹底理解這個模式&#xff0c;必須要先將封裝&#xff08;訪問修飾符的…

【計算機視覺】計算機視覺、模式識別、機器學習常用牛人主頁鏈接

計算機視覺、模式識別、機器學習常用牛人主頁鏈接 牛人主頁&#xff08;主頁有很多論文代碼&#xff09; Serge Belongie at UC San DiegoAntonio Torralba at MITAlexei Ffros at CMUCe Liu at Microsoft Research New EnglandVittorio Ferrari at Univ.of EdinburghKristen G…

C# 中的 ConfigurationManager類引用方法

c#添加了Configuration;后&#xff0c;竟然找不到 ConfigurationManager 這個類&#xff0c;后來才發現&#xff1a;雖然引用了using System.Configuration;這個包&#xff0c;但是還是不行的。 后來終于找到一個解決方法&#xff0c;就是在解決方案資源管理器里找到類文件選擇…

機器學習——支持向量機SVM之python實現簡單實例一(含數據預處理、交叉驗證、參數優化等)

目錄 一、SVM理論 二、numpy的相關函數介紹 三、python實現之準備 1、數據集的下載

工業相機常用類型詳述

一、工業相機定義 工業相機是應用于工業領域、安防和交通等對相機要求較高領域的攝像機&#xff0c;功能就是將光信號轉變成有序的電信號&#xff0c;此信號經過模數轉換為數字信號&#xff0c;然后傳遞給圖像處理器。與一般的家用相機相比&#xff0c;其具有更高的穩定性能&a…

機器學習——SVM之python實現數據樣本標準化和歸一化

目錄 一、標準化和歸一化的目的 1、標準化 2、歸一化 二、標準化和歸一化常用的理論公式 1、歸一化 2、標準化 三、python實現SVM樣本數據標準化和歸一化 1、標準化 2、歸一化 本文源代碼&#xff1a;《機器學習——支持向量機SVM之python實現簡單實例一》 一、標準化…

[黑群暉經典教程] 一步一步建立自己的黑群暉

【申明&#xff1a;本文并非本人所作&#xff0c;為內部網絡中一位大神所寫&#xff0c;個人覺得寫得很好&#xff0c;遂原文搬了過來&#xff0c;如有侵犯原作者的權利&#xff0c;請及時與我聯系】 PS:有好幾個兄弟覺得我擅自轉發&#xff0c;不是很妥。解釋一下&#xff1a;…

Java為什么能跨平臺運行

因為java程序編譯之后的代碼不是能被硬件系統直接運行的代碼&#xff0c;而是一種“中間碼”--字節碼。不同的硬件平臺上裝有不同的java虛擬機&#xff08;JVM&#xff09;&#xff0c;由JVM來把字節碼再翻譯成所對應的硬件平臺能夠執行的代碼&#xff0c;因此java可以跨平臺運…

C++和Opencv4.5 實現全景圖像拼接

前言 最近剛下了最新版的opencv4.5&#xff0c;急不可待的試下操作&#xff0c;就用了opencv自帶的Stitcher類拼接下圖像&#xff0c;結果傻眼了&#xff0c;程序顯示Stitcher沒有createDefault成員&#xff0c;看了好久&#xff0c;終于找到了解決方法。 Stitcher原理 Stit…

機器學習——python實現SVM模型w,b的查看

基于源代碼&#xff1a;《機器學習——支持向量機SVM之python實現簡單實例一》進行講解 1、線性模型 這里以二特征三類&#xff0c;一對多策略為案例 kernel “linear”&#xff1a;線性核&#xff0c;參數有w&#xff0c;b 線性模型的決策邊界是&#xff1a;w0iTx0i w1i…

Codeforces-712C-Memory and De-Evolution

轉載于:https://www.cnblogs.com/GrowingJlx/p/6642764.html