日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

JS問題:簡單的Console.log不要再用了!試試這個

來源: 責編: 時間:2024-03-18 09:37:46 183觀看
導讀1. 需求分析一般情況下,我們在項目中進行代碼調試時,往往只會在邏輯中使用console.log進行控制臺打印調試。這種方式雖然比較常規直接,但是如果打印數據多了,就會導致你的控制臺消息變得異常混亂。所以,我們有了更好的選擇

d0228資訊網——每日最新資訊28at.com

1. 需求分析

一般情況下,我們在項目中進行代碼調試時,往往只會在邏輯中使用console.log進行控制臺打印調試。d0228資訊網——每日最新資訊28at.com

這種方式雖然比較常規直接,但是如果打印數據多了,就會導致你的控制臺消息變得異常混亂。d0228資訊網——每日最新資訊28at.com

所以,我們有了更好的選擇,那就是console對象提供的其它API,來讓我們能夠更清晰的區分打印信息。d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

2. 實現步驟

(1)console.warn

當我們需要區分一些比較重要的打印信息時,可以使用warn進行警告提示。d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(2)console.error

當我們需要區分一些異常錯誤的打印信息時,可以使用error進行錯誤提示。d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(3)console.time/timeEnd

想看看一段代碼運行需要多長時間,可以使用time。d0228資訊網——每日最新資訊28at.com

這對于需要一些時間的CPU密集型應用程序非常有用,例如神經網絡或HTML Canvas讀取。d0228資訊網——每日最新資訊28at.com

下面執行這段代碼:d0228資訊網——每日最新資訊28at.com

console.time("Loop timer")for(let i = 0; i < 10000; i++){// Some code here}console.timeEnd("Loop timer")

結果如下:d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(4)console.trace

想看看函數的調用順序是怎樣的嗎?可以使用trace。d0228資訊網——每日最新資訊28at.com

下面執行這段代碼:d0228資訊網——每日最新資訊28at.com

<script setup>function trace(){console.trace()}function randomFunction(){trace();}randomFunction()</script>

setup中,randomFunction 調用trace,然后又調用console.trace。d0228資訊網——每日最新資訊28at.com

因此,當您調用 randomFunction 時,您將得到類似的輸出,結果如下:d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(5)console.group/groupEnd

當我們需要將一類打印信息進行分組時,可以使用group。d0228資訊網——每日最新資訊28at.com

下面執行這段代碼:d0228資訊網——每日最新資訊28at.com

console.group("My message group");console.log("Test2!");console.log("Test2!");console.log("Test2!");console.groupEnd()

結果如下:d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(6)console.table

在控制臺中打印表格信息,可以使用table。d0228資訊網——每日最新資訊28at.com

對!你沒聽錯,就是讓我們以表格形式展示打印信息。d0228資訊網——每日最新資訊28at.com

如果使用log打印:d0228資訊網——每日最新資訊28at.com

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}console.log(person1, person2);

結果如下:d0228資訊網——每日最新資訊28at.com

這樣做是不是讓數據看起來很混亂。d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

反之,如果我們使用table輸出:d0228資訊網——每日最新資訊28at.com

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}console.table({person1, person2})

結果如下:d0228資訊網——每日最新資訊28at.com

怎么樣!從來不知道控制臺可以看起來如此干凈,對吧!d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

(7)console.clear

最后,使用clear把控制臺清空吧!d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

3. 問題詳解

(1)可以自定義log的樣式嗎?

答案當然是可以的,只需要借助%c這個占位符。d0228資訊網——每日最新資訊28at.com

%c 是console的占位符,用于指定輸出樣式或應用 CSS 樣式到特定的輸出文本。d0228資訊網——每日最新資訊28at.com

但請注意,%c 占位符只在部分瀏覽器中支持,如 Chrome、Firefox 等。d0228資訊網——每日最新資訊28at.com

通過使用 %c 占位符,可以在 console.log 中為特定的文本應用自定義的 CSS 樣式。這樣可以改變輸出文本的顏色、字體、背景等樣式屬性,以便在控制臺中以不同的樣式突出顯示特定的信息。d0228資訊網——每日最新資訊28at.com

以下是使用%c 占位符應用樣式的示例:d0228資訊網——每日最新資訊28at.com

console.log("%c Hello, World!", "color: red; font-weight: bold;border: 1px solid red;");

結果如下:d0228資訊網——每日最新資訊28at.com

d0228資訊網——每日最新資訊28at.com

通過使用 %c 占位符和自定義的樣式規則,可以在控制臺輸出中以不同的樣式突出顯示特定的文本,使得輸出更加清晰和易于識別。d0228資訊網——每日最新資訊28at.com

這在調試和日志記錄過程中非常有用,特別是當需要突出顯示特定類型的信息或錯誤時。d0228資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-76490-0.htmlJS問題:簡單的Console.log不要再用了!試試這個

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 業務開發做到零 bug 有多難?

下一篇: 在 Node.js 中發出 HTTP 請求的五種方法

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 攀枝花市| 富阳市| 黔西县| 松桃| 历史| 景洪市| 虎林市| 赞皇县| 晴隆县| 察哈| 宿州市| 大渡口区| 镇安县| 佛坪县| 托里县| 平遥县| 吉水县| 桐柏县| 富宁县| 于田县| 白河县| 行唐县| 宜兰县| 绥德县| 安岳县| 邵阳市| 荣成市| 安丘市| 大连市| 酒泉市| 苍梧县| 方正县| 巴青县| 濮阳县| 大兴区| 漳平市| 达孜县| 黄山市| 马龙县| 阿瓦提县| 普宁市|