Chrome 控制臺實(shí)用指南

前言

Chrome瀏覽器我想是每一個(gè)前端er必用工具之一吧逗载,一部分原因是它速度快塘安,體積不大,支持的新特性也比其它瀏覽器多殴边,還有一部分我想就是因?yàn)樗目刂婆_功能強(qiáng)大了吧憎茂,說它是神器一點(diǎn)也不過分,很方便锤岸。但其實(shí)很多開發(fā)者并沒有用出控制臺的精髓竖幔,只是使用簡單的console.log();其實(shí)控制臺功能遠(yuǎn)遠(yuǎn)不止這么簡單哦。

console.clear

console.clear();清空控制臺是偷,這個(gè)應(yīng)該和console.log知名度一樣高吧拳氢。

console.log家族

先簡單介紹一下chrome的控制臺募逞,打開chrome瀏覽器,按f12就可以輕松的打開控制臺

如果你是一位開發(fā)者馋评,我想console.log肯定是經(jīng)常使用的了放接,我們主要看看console.log的幾個(gè)兄弟:

1.console.log ('普通信息')

2.console.info ('提示性信息')

3.console.error ('錯(cuò)誤信息')

4.console.warn ('警示信息')

大家都會用log,但很少有人能夠很好地利用console.error留特,console.warn 等將輸出到控制臺的信息進(jìn)行分類整理纠脾。他們功能區(qū)別不大,意義在于將輸出到控制臺的信息進(jìn)行歸類磕秤,或者說讓它們更語義化乳乌。

如果再配合console.group 與console.groupEnd,可以將這種分類管理的思想發(fā)揮到極致市咆。這適合于在開發(fā)一個(gè)規(guī)模很大模塊很多很復(fù)雜的Web APP時(shí)汉操,將各自的log信息分組到以各自命名空間為名稱的組里面。

console.group("app.bundle");

console.warn("來自bundle模塊的警告信息1");console.warn("來自bundle模塊的警告信息2");

console.groupEnd();

console.group("app.bundle");

console.log("來自bundle模塊的信息1");console.log("來自bundle模塊的信息2");

console.groupEnd();

這樣的控制臺信息看上去就一目了然了蒙兰,就不用再為了找這是屬于那一行代碼輸出的再翻一遍源碼了磷瘤。

另外,console.log家族還給我們提供了一個(gè)的API:第一個(gè)參數(shù)可以帶一些格式化指令搜变,比如%c,n;看下面這個(gè)炫酷的效果:

console.log('%chello world', '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;');

當(dāng)然采缚,圖片也是可以的,讀者可以自行嘗試挠他,修改上述代碼即可扳抽。

另外,console.log() 接收不定參數(shù)殖侵,參數(shù)間用逗號分隔贸呢,最終會輸出會將它們以空白字符連接如庭。

console.table

看著這種“黑魔法”是不是有種坑分的感覺呢拴驮,其實(shí)還不止哦!console.table可以讓我們輸出表格,示例:

vardata={code:200,content:[{'品名':'杜雷斯','數(shù)量':4},{'品名':'岡本','數(shù)量':3}]};

console.table(data.content);

有的時(shí)候后端傳回來一大串?dāng)?shù)據(jù)摹菠,是不是覺得直接console.log或是通過抓包工具查看都會讓人暈頭轉(zhuǎn)向呢茉唉,這個(gè)時(shí)候正事console.table發(fā)揮作用的時(shí)候了固蛾,以表格的形式呈現(xiàn)數(shù)據(jù),自然一目了然度陆。

console.assert

varisDebug=false;

console.assert(isDebug,'開發(fā)中的log信息艾凯。。懂傀。');

當(dāng)你想代碼滿足某些條件時(shí)才輸出信息到控制臺趾诗,那么你大可不必寫if或者三元表達(dá)式來達(dá)到目的,cosole.assert便是這樣場景下一種很好的工具鸿竖,它會先對傳入的表達(dá)式進(jìn)行斷言沧竟,只有表達(dá)式為假時(shí)才輸出相應(yīng)信息到控制臺。

console.count

除了條件輸出的場景缚忧,還有常見的場景是計(jì)數(shù)悟泵。

當(dāng)你想統(tǒng)計(jì)某段代碼執(zhí)行了多少次時(shí)也大可不必自己去寫相關(guān)邏輯,內(nèi)置的console.count可以很地勝任這樣的任務(wù).

console.dir

將DOM結(jié)點(diǎn)以JavaScript對象的形式輸出到控制臺闪水,而console.log是直接將該DOM結(jié)點(diǎn)以DOM樹的結(jié)構(gòu)進(jìn)行輸出糕非,與在元素審查時(shí)看到的結(jié)構(gòu)是一致的。不同的展現(xiàn)形式球榆,同樣的優(yōu)雅朽肥,各種體位任君選擇反正就是方便與體貼。

console.dir(document.body);

console.log(document.body);

console.time & console.timeEnd

輸出一些調(diào)試信息是控制臺最常用的功能持钉,當(dāng)然衡招,它的功能遠(yuǎn)不止于此。當(dāng)做一些性能測試時(shí)每强,同樣可以在這里很方便地進(jìn)行始腾。比如需要考量一段代碼執(zhí)行的耗時(shí)情況時(shí),可以用console.time與 console.timeEnd來做此事空执。

console.time("Array耗時(shí)");

vararray=newArray(10000000);

for(vari=array.length-1;i>=0;i--){

array[i]=newObject();

};

console.timeEnd("Array耗時(shí)");

當(dāng)想要查看CPU使用相關(guān)的信息時(shí)浪箭,可以使用console.profile配合 console.profileEnd來完成這個(gè)需求。

這一功能可以通過UI界面來完成辨绊,Chrome 開發(fā)者工具里面有個(gè)tab便是Profile奶栖。使用方法和console.time基本一樣,其實(shí)time開發(fā)者工具里也有個(gè)tab就是timeline门坷。關(guān)于console.prefile博主就不做多余的介紹了宣鄙。想要做更多了解的讀者可以看這里。

$

講真拜鹤,米國程序員們真的很喜歡money翱蚣健(誰又不是呢),看看PHP就知道了敏簿,滿屏的$明也。而在Chrome的控制臺里,$用處同樣是蠻多且方便的惯裕。

2+2//回車温数,再

$_+1//回車得5

上面的$_需要領(lǐng)悟其奧義才能使用得當(dāng),而$0~$4則代表了最近5個(gè)你選擇過的DOM節(jié)點(diǎn)蜻势。

什么意思呢撑刺?在頁面右擊選擇審查元素,然后在彈出來的DOM結(jié)點(diǎn)樹上面隨便點(diǎn)選握玛,這些被點(diǎn)過的節(jié)點(diǎn)會被記錄下來够傍,而$0會返回最近一次點(diǎn)選的DOM結(jié)點(diǎn)甫菠,以此類推,$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn)冕屯,最多保存了5個(gè)寂诱,如果不夠5個(gè),則返回undefined安聘。

另外值得一贊的是痰洒,Chrome 控制臺中原生支持類jQuery的選擇器,也就是說你可以用$加上熟悉的css選擇器來選擇DOM節(jié)點(diǎn)浴韭,多么滴熟悉丘喻。

$('body');

$$('div');

$(selector)返回的是滿足選擇條件的首個(gè)DOM元素。

剝?nèi)ニ齻紊频耐庖履罹保鋵?shí)$(selector)是原生JavaScript document.querySelector() 的封裝泉粉。

同時(shí)另一個(gè)命令$$(selector)返回的是所有滿足選擇條件的元素的一個(gè)集合,是對document.querySelectorAll() 的封裝榴芳。

$x(path)

將所匹配的節(jié)點(diǎn)放在一個(gè)數(shù)組里返回

$x("http://p");

$x("http://p[a]");

$x("http://p")匹配所有的p節(jié)點(diǎn)搀继,$x("http://p[a]");匹配所有子節(jié)點(diǎn)包含a的p節(jié)點(diǎn)

copy

copy(document.body)

然后你就可以Ctrl+v了。

注意:他不依附于任何全局變量比如window翠语,所以其實(shí)在JS代碼里是訪問不了這個(gè)copy方法的叽躯,所以從代碼層面來調(diào)用復(fù)制功能也就無從談起。但愿有天瀏覽器會提供相應(yīng)的JS實(shí)現(xiàn)吧~這樣我們就可以通過js代碼進(jìn)行復(fù)制操作而不用再依賴Flash插件了肌括。

keys & values

這是一對基友点骑。前者返回傳入對象所有屬性名組成的數(shù)據(jù),后者返回所有屬性值組成的數(shù)組谍夭。具體請看下面的例子:

vartfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};

keys(tfboy);

values(tfboy);

monitor & unmonitor

monitor(function)黑滴,它接收一個(gè)函數(shù)名作為參數(shù),比如function a紧索,每次a被執(zhí)行了袁辈,都會在控制臺輸出一條信息,里面包含了函數(shù)的名稱a及執(zhí)行時(shí)所傳入的參數(shù)珠漂。而unmonitor(function)便是用來停止這一監(jiān)聽晚缩。

functionsayHello(name){

alert('hello,'+name);

}

monitor(sayHello);

sayHello('damonare');

sayHello('tjz');

unmonitor(sayHello);

debug & undebug

debug同樣也是接收一個(gè)函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時(shí)自動(dòng)斷下來以供調(diào)試媳危,類似于在該函數(shù)的入口處打了個(gè)斷點(diǎn)荞彼,可以通過debugger來做到,同時(shí)也可以通過在Chrome開發(fā)者工具里找到相應(yīng)源碼然后手動(dòng)打斷點(diǎn)待笑。而undebug 則是解除該斷點(diǎn)鸣皂。而其他還有好些命令則讓人沒有說的欲望,因?yàn)楹眯┒伎梢酝ㄟ^Chrome開發(fā)者工具的UI界面來操作并且比用在控制臺輸入要方便。

參考

Console API文檔寞缝;

Commond API癌压;

Chrome 控制臺不完全指南?– 劉哇勇

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市荆陆,隨后出現(xiàn)的幾起案子措拇,更是在濱河造成了極大的恐慌,老刑警劉巖慎宾,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浅悉,居然都是意外死亡趟据,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門术健,熙熙樓的掌柜王于貴愁眉苦臉地迎上來汹碱,“玉大人,你說我怎么就攤上這事荞估】却伲” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵勘伺,是天一觀的道長跪腹。 經(jīng)常有香客問我,道長飞醉,這世上最難降的妖魔是什么冲茸? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮缅帘,結(jié)果婚禮上轴术,老公的妹妹穿的比我還像新娘。我一直安慰自己钦无,他們只是感情好逗栽,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著失暂,像睡著了一般彼宠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弟塞,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天兵志,我揣著相機(jī)與錄音,去河邊找鬼宣肚。 笑死想罕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播按价,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼惭适,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了楼镐?” 一聲冷哼從身側(cè)響起癞志,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎框产,沒想到半個(gè)月后凄杯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秉宿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年戒突,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片描睦。...
    茶點(diǎn)故事閱讀 39,731評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡膊存,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出忱叭,到底是詐尸還是另有隱情隔崎,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布韵丑,位于F島的核電站爵卒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏撵彻。R本人自食惡果不足惜技潘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望千康。 院中可真熱鬧享幽,春花似錦、人聲如沸拾弃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽豪椿。三九已至奔坟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間搭盾,已是汗流浹背咳秉。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸯隅,地道東北人澜建。 一個(gè)月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓向挖,卻偏偏與公主長得像,于是被迫代替她去往敵國和親炕舵。 傳聞我的和親對象是個(gè)殘疾皇子何之,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容