国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

除Console.log()外更多的Javascript調試命令

來源:懂視網 責編:小采 時間:2020-11-27 22:20:55
文檔

除Console.log()外更多的Javascript調試命令

除Console.log()外更多的Javascript調試命令:Console 對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。 Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工
推薦度:
導讀除Console.log()外更多的Javascript調試命令:Console 對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。 Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工

Console 對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。

Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工作臺提供的特殊定義。
它被瀏覽器定義為 Window.Console,也可被簡單的 Console 調用。

最常用的方法就是Console.log(),就是在控制臺輸出內容。剛開始學前端的時候看到大家都是用的Console.log(),幾乎沒有見過Console的其他用法,難道Console真的沒有別的用法了?查了一下后發現Console還是非常強大的,至于為什么很少看到有人用可能是因為用過都刪掉了吧。在此記錄一下Console的其他用法。

注意:因為Console 對象提供對瀏覽器控制臺的接入 所以在不同瀏覽器中的支持及表現形式可能不太一樣,但是調試內容只有我們開發者會看,所以保證開發環境能用這些方法就可以了,下面演示全部都為Chrome上面的效果。

分類輸出

不同類別信息的輸出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('錯誤信息');

分組輸出

使用Console.group()Console.groupEnd()包裹分組內容。

還可以使用Console.groupCollapsed()來代替Console.group()生成折疊的分組。

console.group('第一個組');
 console.log("1-1");
 console.log("1-2");
 console.log("1-3");
console.groupEnd();
console.group('第二個組');
 console.log("2-1");
 console.log("2-2");
 console.log("2-3");
console.groupEnd();

Console.group()還可以嵌套使用

console.group('第一個組');
 console.group("1-1");
 console.group("1-1-1");
 console.log('內容');
 console.groupEnd();
 console.groupEnd();
 console.group("1-2");
 console.log('內容');
 console.log('內容');
 console.log('內容');
 console.groupEnd();
console.groupEnd();
console.groupCollapsed('第二個組');
 console.group("2-1");
 console.groupEnd();
 console.group("2-2");
 console.groupEnd();
console.groupEnd();

表格輸出

使用console.table()可以將傳入的對象,或數組以表格形式輸出。適合排列整齊的元素

var Obj = {
 Obj1: {
 a: "aaa",
 b: "bbb",
 c: "ccc"
 },
 Obj2: {
 a: "aaa",
 b: "bbb",
 c: "ccc"
 },
 Obj3: {
 a: "aaa",
 b: "bbb",
 c: "ccc"
 },
 Obj4: {
 a: "aaa",
 b: "bbb",
 c: "ccc"
 }
}
console.table(Obj);
var Arr = [
 ["aa","bb","cc"],
 ["dd","ee","ff"],
 ["gg","hh","ii"],
]
console.table(Arr);

查看對象

使用Console.dir()顯示一個對象的所有屬性和方法
在Chrome中Console.dir()Console.log()效果相同

var CodeDeer = {
 nema: 'CodeDeer',
 blog: 'www.xluos.com',
 
}
console.log("console.dir(CodeDeer)");
console.dir(CodeDeer);
console.log("console.log(CodeDeer)");
console.log(CodeDeer);

查看節點

使用Console.dirxml()顯示一個對象的所有屬性和方法

在Chrome中Console.dirxml()Console.log()效果相同

百度首頁logo的節點信息

條件輸出

利用console.assert(),可以進行條件輸出。

當第一個參數或返回值為真時,不輸出內容當第一個參數或返回值為假時,輸出后面的內容并拋出異常

console.assert(true, "你永遠看不見我");
console.assert((function() { return true;})(), "你永遠看不見我");
console.assert(false, "你看得見我");
console.assert((function() { return false;})(), "你看得見我");

計次輸出

使用Console.count()輸出內容和被調用的次數

(function () {
 for(var i = 0; i < 3; i++){
 console.count("運行次數:");
 }
})()

追蹤調用堆棧

使用Console.trace()來追蹤函數被調用的過程,在復雜項目時調用過程非常多,用這個命令來幫你縷清。

function add(a, b) {
 console.trace("Add function");
 return a + b;
}
function add3(a, b) {
 return add2(a, b);
}
function add2(a, b) {
 return add1(a, b);
}
function add1(a, b) {
 return add(a, b);
}
var x = add3(1, 1);

計時功能

使用Console.time()Console.timeEnd()包裹需要計時的代碼片段,輸出運行這段代碼的事件。

Console.time()中的參數作為計時器的標識,具有唯一性。 Console.timeEnd()中的參數來結束此標識的計時器,并以毫秒為單位返回運行時間。最多同時運行10000個計時器。

console.time("Chrome中循環1000次的時間");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循環1000次的時間");

性能分析

使用Console.profile()Console.profile()進行性能分析,查看代碼各部分運行消耗的時間,但是我在Chrome自帶的調試工具中并沒有找到在哪里查看這兩個方法生成的分析報告。應該需要其他的調試工具。

有趣的Console.log()

最后再來介紹一下強大的Console.log(),這個方法有很多的用法(其他輸出方法的用法,如error()等,可以參照log()使用)。

一、提示輸出

可以再輸出的對象、變量前加上提示信息,增加辨識度

var ans = 12345;
console.log("這是臨時變量ans的值:",ans);

二、格式化輸出

占位符 含義 %s 字符串輸出 %d or %i 整數輸出 %f 浮點數輸出 %o 打印javascript對象,可以是整數、字符串以及JSON數據

樣例:

var arr = ["小明", "小紅"];
console.log("歡迎%s和%s兩位新同學",arr[0],arr[1]);
console.log("圓周率整數部分:%d,帶上小數是:%f",3.1415,3.1415);

三、自定義樣式

使用%c為打印內容定義樣式,再輸出信息前加上%c,后面寫上標準的css樣式,就可以為輸出的信息添加樣式了

console.log("%cMy stylish message", "color: red; font-style: italic");
console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");
console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');

總結

Console的用法很多,有些再調試過程中非常實用,可以節省很多時間。當然我知道debug還是用斷點調試的方法比較好,但是小問題用“printf大法”也是很好用的(滑稽臉)。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

除Console.log()外更多的Javascript調試命令

除Console.log()外更多的Javascript調試命令:Console 對象提供對瀏覽器控制臺的接入(如:Firefox 的 Web Console)。不同瀏覽器上它的工作方式是不一樣的,但這里會介紹一些大都會提供的接口特性。 Console對象可以在任何全局對象中訪問,如 Window,WorkerGlobalScope 以及通過屬性工
推薦度:
標簽: js 調試 命令
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 一区二区三区在线视频观看 | 国产在线观看一区二区三区 | 国产成人在线观看免费网站 | 国产精品久久久久久久久免费 | 色综合天天综合中文网 | 一本久久精品一区二区 | 日本高清天码一区在线播放 | 日韩精品第三页 | 欧美国产成人精品一区二区三区 | 国产乱淫a∨片免费视频 | 亚洲风情第一页 | 精品一区二区三区的国产在线观看 | 亚洲欧美综合网 | 午夜免费视频 | 国产精品视频99 | 国产精品一区二区免费 | 亚洲一区二区免费看 | 精品国产三级a在线观看 | 日韩欧美91 | 亚洲图片国产日韩欧美 | 欧美日韩综合网 | 亚洲欧美韩国 | 99久久综合国产精品免费 | 国产成人高清亚洲一区91 | 精品欧美一区二区三区在线 | 一道本在线 | 最新国产精品视频免费看 | 欧美日韩成人 | 在线视频免费观看 | 亚洲最大色网 | 亚洲欧美日韩在线一区 | 国产成人综合久久精品下载 | 亚洲精品国产字幕久久vr | 最新中文字幕第一页 | 国产成人精品视频 | 精品久久亚洲一级α | 国产精品第一 | 日韩精品在线第一页 | 一本久久道 | 日本va视频| 国产高清视频免费 |