自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端奇技淫巧之js調(diào)試

開發(fā) 前端
上班寫bug,下班修bug。調(diào)試在日常開發(fā)中占大半,相信小伙伴們和我一樣,調(diào)試只會用console.log。今天我們一起學(xué)習(xí)其他js調(diào)試工具,幫忙我們提高效率。

上班寫bug,下班修bug。調(diào)試在日常開發(fā)中占大半,相信小伙伴們和我一樣,調(diào)試只會用console.log。今天我們一起學(xué)習(xí)其他js調(diào)試工具,幫忙我們提高效率。

首先看下console對象中有什么我們不知道的方法

前端奇技淫巧之js調(diào)試

哎呀,不看不知道,一看嚇一跳。簡單的console居然有這么多方法!

console.log()

相信小伙伴們會拍著胸口說:不就是簡單的輸出嗎?console.log("Hello World")js入門級別的代碼。

但console.log()還有其他好玩小竅門

占位符:

%s對字符串進行占位

前端奇技淫巧之js調(diào)試

%o 對對象進行占位

前端奇技淫巧之js調(diào)試

%d 對數(shù)字類型進行占位,這個就不演示了

%c css占位符,利用console.log輸出內(nèi)容可以攜帶css樣式

前端奇技淫巧之js調(diào)試

console.dir()

console.dir與log類似,不同之處在于dir打印對象的json表示形式

前端奇技淫巧之js調(diào)試

console.warn()

給生活添加色,console.warn()給控制臺添一祙小黃色

前端奇技淫巧之js調(diào)試

console.table()

這個方法爽爽的不要不要的了,小伙伴們是否console.log輸出過json數(shù)據(jù),一長串,看得是眼花瞭亂。

前端奇技淫巧之js調(diào)試

當(dāng)然這還沒到眼花的地步,數(shù)據(jù)多了,對象屬性多了,反正看著不爽

前端奇技淫巧之js調(diào)試

這點數(shù)據(jù)對比兩種方法誰好,還不明顯。

在看一種情況:我們只需要查看某個對象屬性,不需要對象所有的屬性都展示給我們看

console.tabel完美解決

前端奇技淫巧之js調(diào)試

不足之處在于:處理最多 1000 行的數(shù)據(jù)的能力,所以它可能并不適用于所有的數(shù)據(jù)集合。

console.assert()

console.assert當(dāng)做log用只輸出undefined,

assert第一個參數(shù)是一個boolean值。否則直接輸出undefined

若為true,輸出undefinend,其他參數(shù)并不鳥

前端奇技淫巧之js調(diào)試

若為false,輸出Assertion failed:+其他參數(shù)

前端奇技淫巧之js調(diào)試

console.clear()

清空控制臺

好像有點雞肋,目前我找不到實際的用處

console.count()

寫入count()在同一行與同一標(biāo)簽被調(diào)用的次數(shù)。

與它配套的console.countReset()重置計數(shù)

前端奇技淫巧之js調(diào)試

該方法可用于統(tǒng)計循環(huán)次數(shù):

  1. var arr = [1,2,3,2,...]; 
  2. arr.forEach(()=>{ 
  3.     console.count();//不傳則默認(rèn)用default 
  4. }) 

console.time()

啟動一個新的計時器。調(diào)用console.timeEnd()停止計時器并將運行時間在控制臺

  1. console.time(); 
  2. for(let i=0;i<1000;i++){} 
  3. console.timeEnd(); 

console.debug()

console.debug與log一樣,但在不同瀏覽器中表現(xiàn)不同,下面是firefox與chrome中的展現(xiàn)

前端奇技淫巧之js調(diào)試
前端奇技淫巧之js調(diào)試

console.error()

將對象打印到控制臺,將其格式化為錯誤,并包括堆棧跟蹤

前端奇技淫巧之js調(diào)試

console.info()

與 console.log ()相同。

console.group(label)

可視化地將消息分組在一起,直到調(diào)用 console.groupEnd (label)。 當(dāng)組最初登錄到控制臺時,使用 console.groupcollapped (label)將其折疊。

前端奇技淫巧之js調(diào)試
前端奇技淫巧之js調(diào)試

 

責(zé)任編輯:龐桂玉 來源: 今日頭條
相關(guān)推薦

2021-04-12 06:09:38

Spring擴展點應(yīng)用

2017-08-18 13:30:01

前端CSS布局奇技

2022-01-07 14:50:46

VS CodeLinux代碼

2020-11-26 11:45:31

Python繪圖代碼

2023-06-26 08:05:36

2017-10-24 13:42:55

流氓App安卓Google

2021-03-30 07:47:46

SVG 濾鏡 CSS技巧

2022-09-30 12:55:14

Linux筆記

2023-09-19 08:03:50

rebase?merge

2022-04-21 15:00:53

LinuxShell

2021-06-07 12:20:14

LinuxASCII命令

2015-04-13 13:21:45

JavaScript JavaScript

2021-02-25 09:19:11

LinuxAppimage命令

2022-04-24 16:00:15

LinuxLinux命令ls命令

2021-05-18 13:05:31

LinuxRust復(fù)用器

2019-04-25 13:10:04

Java 8Stream API編程語言

2021-05-07 13:56:13

Linux器監(jiān)視服務(wù)器

2024-11-28 09:21:00

Python字符串代碼

2021-05-31 11:45:37

LinuxRustShell

2019-05-28 14:33:07

Javascript運算符前端
點贊
收藏

51CTO技術(shù)棧公眾號