免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
Chrome 控制臺(tái)不完全指南

Chrome的開(kāi)發(fā)者工具已經(jīng)強(qiáng)大到?jīng)]朋友的地步了,特別是其功能豐富界面友好的console,使用得當(dāng)可以有如下功效:

  • 更高「逼格」更快「開(kāi)發(fā)調(diào)試」更強(qiáng)「進(jìn)階級(jí)的Frontender」
  • Bug無(wú)處遁形「Console大法好」

console.log

大家都會(huì)用log,但鮮有人很好地利用console.error , console.warn 等將輸出到控制臺(tái)的信息進(jìn)行分類(lèi)整理。
他們功能區(qū)別不大,意義在于將輸出到控制臺(tái)的信息進(jìn)行歸類(lèi),或者說(shuō)讓它們更語(yǔ)義化。
各個(gè)所代表的語(yǔ)義如下:

  • console.log:普通信息
  • console.info:提示類(lèi)信息
  • console.error:錯(cuò)誤信息
  • console.warn:警示信息

當(dāng)合理使用上述log方法后,可以很方便地在控制臺(tái)選擇查看特定類(lèi)型的信息。

console.log('一顆紅心向太陽(yáng)','吼吼~');console.info('樓上藥不能停!');console.warn('樓上嘴太賤!');console.error('樓上關(guān)你毛事?');

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

console.group("app.foo");console.log("來(lái)自foo模塊的信息 blah blah blah...");console.groupEnd();console.group("app.bar");console.log("來(lái)自bar模塊的信息 blah blah blah...");console.groupEnd();

而關(guān)于console.log,早已被玩兒壞了。一切都源于Chrome提供了這么一個(gè)API:第一個(gè)參數(shù)可以包含一些格式化的指令比如%c

比如給hello world 做件漂亮的嫁衣再拉出來(lái)見(jiàn)人:

console.log('%chello world','font-size:25px;color:red;');

如果你覺(jué)得不夠過(guò)癮,那就把你能寫(xiě)出來(lái)的最華麗的CSS樣式都應(yīng)用上吧,比如漸變。于是你可以得到如下華麗麗的效果:

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;');

各種招大招的節(jié)奏啊~

看著上面密集的代碼不用驚慌,上面console.log()第二個(gè)參數(shù)全是純CSS用來(lái)控制樣式的,你不會(huì)陌生。而第一個(gè)參數(shù)里可以帶用百分號(hào)開(kāi)頭的轉(zhuǎn)義指令,如上面輸出帶樣式的文字時(shí)使用的%c指令。更詳細(xì)的指令參見(jiàn)官方API文檔的這個(gè)表格。

如果還不夠過(guò)癮,那咱們來(lái)log一些圖片吧,甚至。。。動(dòng)圖?
對(duì),你得先有圖,我們拿這張圖為例。

console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

看著上面搖擺的豆比兔是不是有種抽它一臉的沖動(dòng)。

除此,console.table 更是直接以表格的形式將數(shù)據(jù)輸出,不能贊得太多!
借用之前寫(xiě)過(guò)的一篇博文里的例子:

var data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}];console.table(data);

另外,console.log() 接收不定參數(shù),參數(shù)間用逗號(hào)分隔,最終會(huì)輸出會(huì)將它們以空白字符連接。

console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了么');

console.assert

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

var isDebug=false;console.assert(isDebug,'開(kāi)發(fā)中的log信息。。。');

console.count

除了條件輸出的場(chǎng)景,還有常見(jiàn)的場(chǎng)景是計(jì)數(shù)。
當(dāng)你想統(tǒng)計(jì)某段代碼執(zhí)行了多少次時(shí)也大可不必自己去寫(xiě)相關(guān)邏輯,內(nèi)置的console.count可以很地勝任這樣的任務(wù)。

function foo(){	//其他函數(shù)邏輯blah blah。。。	console.count('foo 被執(zhí)行的次數(shù):');}foo();foo();foo();

console.dir

將DOM結(jié)點(diǎn)以JavaScript對(duì)象的形式輸出到控制臺(tái)
console.log是直接將該DOM結(jié)點(diǎn)以DOM樹(shù)的結(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)試信息是控制臺(tái)最常用的功能,當(dāng)然,它的功能遠(yuǎn)不止于此。當(dāng)做一些性能測(cè)試時(shí),同樣可以在這里很方便地進(jìn)行。
比如需要考量一段代碼執(zhí)行的耗時(shí)情況時(shí),可以用console.timeconsole.timeEnd來(lái)做此事。

這里借用官方文檔的例子:

console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {    array[i] = new Object();};console.timeEnd("Array initialize");

當(dāng)然,我們也可以選擇自己寫(xiě)代碼來(lái)計(jì)時(shí):

var start=new Date().getTime();var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {    array[i] = new Object();};console.log(new Date().getTime()-start);

相信你也看到了,用內(nèi)置的console.time是多么地方便,省去了自己寫(xiě)代碼來(lái)計(jì)算的工作量。另外值得一提的是,通過(guò)調(diào)用內(nèi)置的console.time得到的結(jié)果要比自己手動(dòng)計(jì)算的時(shí)間差更精確可靠。

console.profile & console.timeLime

當(dāng)想要查看CPU使用相關(guān)的信息時(shí),可以使用console.profile配合 console.profileEnd來(lái)完成這個(gè)需求。
這一功能可以通過(guò)UI界面來(lái)完成,Chrome 開(kāi)發(fā)者工具里面有個(gè)tab便是Profile。

與此類(lèi)似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開(kāi)始記錄一段時(shí)間軸,同樣可以通過(guò)Chrome開(kāi)發(fā)者工具里的Timeline 標(biāo)簽來(lái)進(jìn)行相應(yīng)操作。

所以在我看來(lái)這兩個(gè)方法有點(diǎn)雞肋,因?yàn)槎伎梢酝ㄟ^(guò)操作界面來(lái)完成。但至少他提供了一種命令行方式的交互,還是多了種姿勢(shì)供選擇吧。

console.trace

堆棧跟蹤相關(guān)的調(diào)試可以使用console.trace。這個(gè)同樣可以通過(guò)UI界面完成。當(dāng)代碼被打斷點(diǎn)后,可以在Call Stack面板中查看相關(guān)堆棧信息。

上面介紹的都是掛在window.console這個(gè)對(duì)象下面的方法,統(tǒng)稱(chēng)為Console API,接下來(lái)的這些方法確切地說(shuō)應(yīng)該叫命令,是Chrome內(nèi)置提供,在控制臺(tái)中使用的,他們統(tǒng)稱(chēng)為Command Line API。

$

似乎美刀總是被程序員及各種編程語(yǔ)言所青睞「你看看PHP代碼就知道PHPer有多愛(ài)錢(qián)了」,在Chrome的控制臺(tái)里,$用處還真是蠻多且方便的。
$_命令返回最近一次表達(dá)式執(zhí)行的結(jié)果,功能跟按向上的方向鍵再回車(chē)是一樣的,但它可以做為一個(gè)變量使用在你接下來(lái)的表達(dá)式中:

2+2//回車(chē),再$_+1//回車(chē)得5

上面的$_需要領(lǐng)悟其奧義才能使用得當(dāng),而$0~$4則代表了最近5個(gè)你選擇過(guò)的DOM節(jié)點(diǎn)。
什么意思?在頁(yè)面右擊選擇審查元素,然后在彈出來(lái)的DOM結(jié)點(diǎn)樹(shù)上面隨便點(diǎn)選,這些被點(diǎn)過(guò)的節(jié)點(diǎn)會(huì)被記錄下來(lái),而$0會(huì)返回最近一次點(diǎn)選的DOM結(jié)點(diǎn),以此類(lèi)推,$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn),最多保存了5個(gè),如果不夠5個(gè),則返回undefined。

另外值得一贊的是,Chrome 控制臺(tái)中原生支持類(lèi)jQuery的選擇器,也就是說(shuō)你可以用$加上熟悉的css選擇器來(lái)選擇DOM節(jié)點(diǎn),多么滴熟悉。

$('body')

$(selector)返回的是滿(mǎn)足選擇條件的首個(gè)DOM元素。
剝?nèi)ニ齻紊频耐庖?,其?shí)$(selector)是原生JavaScript document.querySelector() 的封裝。
同時(shí)另一個(gè)命令$$(selector)返回的是所有滿(mǎn)足選擇條件的元素的一個(gè)集合,是對(duì)document.querySelectorAll() 的封裝。

$$('div')

copy

通過(guò)此命令可以將在控制臺(tái)獲取到的內(nèi)容復(fù)制到剪貼板。

copy(document.body)

然后你就可以到處粘了:

看完此條命令行,機(jī)智的你是不是跟腦洞全開(kāi)的我一樣,冒出了這樣一個(gè)想法:那就是通過(guò)這個(gè)命令可以在JavaScript里進(jìn)行復(fù)制操作從而不用依賴(lài)Flash插件了。
But現(xiàn)實(shí)是殘酷的,如之前所述的,這里的控制臺(tái)命令只能在控制臺(tái)中環(huán)境中執(zhí)行,因?yàn)樗灰栏接谌魏稳肿兞勘热?code>window,所以其實(shí)在JS代碼里是訪問(wèn)不了這個(gè)copy方法的,所以從代碼層面來(lái)調(diào)用復(fù)制功能也就無(wú)從談起。但愿有天瀏覽器會(huì)提供相應(yīng)的JS實(shí)現(xiàn)吧~

keys & values

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

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};keys(tboy);values(tboy);

monitor & unmonitor

monitor(function),它接收一個(gè)函數(shù)名作為參數(shù),比如function a,每次a被執(zhí)行了,都會(huì)在控制臺(tái)輸出一條信息,里面包含了函數(shù)的名稱(chēng)a及執(zhí)行時(shí)所傳入的參數(shù)。

而unmonitor(function)便是用來(lái)停止這一監(jiān)聽(tīng)。

function sayHello(name){	alert('hello,'+name);}monitor(sayHello);sayHello('wayou');unmonitor(sayHello);sayHello('wayou');

debug & undebug

debug同樣也是接收一個(gè)函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時(shí)自動(dòng)斷下來(lái)以供調(diào)試,類(lèi)似于在該函數(shù)的入口處打了個(gè)斷點(diǎn),可以通過(guò)debugger來(lái)做到,同時(shí)也可以通過(guò)在Chrome開(kāi)發(fā)者工具里找到相應(yīng)源碼然后手動(dòng)打斷點(diǎn)。
undebug 則是解除該斷點(diǎn)。

而其他還有好些命令則讓人沒(méi)有說(shuō)的欲望,因?yàn)楹眯┒伎梢酝ㄟ^(guò)Chrome開(kāi)發(fā)者工具的UI界面來(lái)操作并且比用在控制臺(tái)輸入要方便。

REFERENCE

  • Styled console logging in the Chrome DevTools (Canary)
  • Chrome Console API
  • Chrome Console Command Line APIChrome的開(kāi)發(fā)者工具已經(jīng)強(qiáng)大到?jīng)]朋友的地步了,特別是其功能豐富界面友好的console,使用得當(dāng)可以有如下功效:
    • 更高「逼格」更快「開(kāi)發(fā)調(diào)試」更強(qiáng)「進(jìn)階級(jí)的Frontender」
    • Bug無(wú)處遁形「Console大法好」

    console.log

    大家都會(huì)用log,但鮮有人很好地利用console.error , console.warn 等將輸出到控制臺(tái)的信息進(jìn)行分類(lèi)整理。
    他們功能區(qū)別不大,意義在于將輸出到控制臺(tái)的信息進(jìn)行歸類(lèi),或者說(shuō)讓它們更語(yǔ)義化。
    各個(gè)所代表的語(yǔ)義如下:

    • console.log:普通信息
    • console.info:提示類(lèi)信息
    • console.error:錯(cuò)誤信息
    • console.warn:警示信息

    當(dāng)合理使用上述log方法后,可以很方便地在控制臺(tái)選擇查看特定類(lèi)型的信息。

    console.log('一顆紅心向太陽(yáng)','吼吼~');console.info('樓上藥不能停!');console.warn('樓上嘴太賤!');console.error('樓上關(guān)你毛事?');

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

    console.group("app.foo");console.log("來(lái)自foo模塊的信息 blah blah blah...");console.groupEnd();console.group("app.bar");console.log("來(lái)自bar模塊的信息 blah blah blah...");console.groupEnd();

    而關(guān)于console.log,早已被玩兒壞了。一切都源于Chrome提供了這么一個(gè)API:第一個(gè)參數(shù)可以包含一些格式化的指令比如%c。

    比如給hello world 做件漂亮的嫁衣再拉出來(lái)見(jiàn)人:

    console.log('%chello world','font-size:25px;color:red;');

    如果你覺(jué)得不夠過(guò)癮,那就把你能寫(xiě)出來(lái)的最華麗的CSS樣式都應(yīng)用上吧,比如漸變。于是你可以得到如下華麗麗的效果:

    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;');

    各種招大招的節(jié)奏啊~

    看著上面密集的代碼不用驚慌,上面console.log()第二個(gè)參數(shù)全是純CSS用來(lái)控制樣式的,你不會(huì)陌生。而第一個(gè)參數(shù)里可以帶用百分號(hào)開(kāi)頭的轉(zhuǎn)義指令,如上面輸出帶樣式的文字時(shí)使用的%c指令。更詳細(xì)的指令參見(jiàn)官方API文檔的這個(gè)表格。

    如果還不夠過(guò)癮,那咱們來(lái)log一些圖片吧,甚至。。。動(dòng)圖?
    對(duì),你得先有圖,我們拿這張圖為例。

    console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

    看著上面搖擺的豆比兔是不是有種抽它一臉的沖動(dòng)。

    除此,console.table 更是直接以表格的形式將數(shù)據(jù)輸出,不能贊得太多!
    借用之前寫(xiě)過(guò)的一篇博文里的例子:

    var data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}];console.table(data);

    另外,console.log() 接收不定參數(shù),參數(shù)間用逗號(hào)分隔,最終會(huì)輸出會(huì)將它們以空白字符連接。

    console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了么');

    console.assert

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

    var isDebug=false;console.assert(isDebug,'開(kāi)發(fā)中的log信息。。。');

    console.count

    除了條件輸出的場(chǎng)景,還有常見(jiàn)的場(chǎng)景是計(jì)數(shù)。
    當(dāng)你想統(tǒng)計(jì)某段代碼執(zhí)行了多少次時(shí)也大可不必自己去寫(xiě)相關(guān)邏輯,內(nèi)置的console.count可以很地勝任這樣的任務(wù)。

    function foo(){	//其他函數(shù)邏輯blah blah。。。	console.count('foo 被執(zhí)行的次數(shù):');}foo();foo();foo();

    console.dir

    將DOM結(jié)點(diǎn)以JavaScript對(duì)象的形式輸出到控制臺(tái)
    console.log是直接將該DOM結(jié)點(diǎn)以DOM樹(shù)的結(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)試信息是控制臺(tái)最常用的功能,當(dāng)然,它的功能遠(yuǎn)不止于此。當(dāng)做一些性能測(cè)試時(shí),同樣可以在這里很方便地進(jìn)行。
    比如需要考量一段代碼執(zhí)行的耗時(shí)情況時(shí),可以用console.timeconsole.timeEnd來(lái)做此事。

    這里借用官方文檔的例子:

    console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {    array[i] = new Object();};console.timeEnd("Array initialize");

    當(dāng)然,我們也可以選擇自己寫(xiě)代碼來(lái)計(jì)時(shí):

    var start=new Date().getTime();var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {    array[i] = new Object();};console.log(new Date().getTime()-start);

    相信你也看到了,用內(nèi)置的console.time是多么地方便,省去了自己寫(xiě)代碼來(lái)計(jì)算的工作量。另外值得一提的是,通過(guò)調(diào)用內(nèi)置的console.time得到的結(jié)果要比自己手動(dòng)計(jì)算的時(shí)間差更精確可靠。

    console.profile & console.timeLime

    當(dāng)想要查看CPU使用相關(guān)的信息時(shí),可以使用console.profile配合 console.profileEnd來(lái)完成這個(gè)需求。
    這一功能可以通過(guò)UI界面來(lái)完成,Chrome 開(kāi)發(fā)者工具里面有個(gè)tab便是Profile

    與此類(lèi)似的功能還有console.timeLine配合 console.timeLineEnd,它的作用是開(kāi)始記錄一段時(shí)間軸,同樣可以通過(guò)Chrome開(kāi)發(fā)者工具里的Timeline 標(biāo)簽來(lái)進(jìn)行相應(yīng)操作。

    所以在我看來(lái)這兩個(gè)方法有點(diǎn)雞肋,因?yàn)槎伎梢酝ㄟ^(guò)操作界面來(lái)完成。但至少他提供了一種命令行方式的交互,還是多了種姿勢(shì)供選擇吧。

    console.trace

    堆棧跟蹤相關(guān)的調(diào)試可以使用console.trace。這個(gè)同樣可以通過(guò)UI界面完成。當(dāng)代碼被打斷點(diǎn)后,可以在Call Stack面板中查看相關(guān)堆棧信息。

    上面介紹的都是掛在window.console這個(gè)對(duì)象下面的方法,統(tǒng)稱(chēng)為Console API,接下來(lái)的這些方法確切地說(shuō)應(yīng)該叫命令,是Chrome內(nèi)置提供,在控制臺(tái)中使用的,他們統(tǒng)稱(chēng)為Command Line API。

    $

    似乎美刀總是被程序員及各種編程語(yǔ)言所青睞「你看看PHP代碼就知道PHPer有多愛(ài)錢(qián)了」,在Chrome的控制臺(tái)里,$用處還真是蠻多且方便的。
    $_命令返回最近一次表達(dá)式執(zhí)行的結(jié)果,功能跟按向上的方向鍵再回車(chē)是一樣的,但它可以做為一個(gè)變量使用在你接下來(lái)的表達(dá)式中:

    2+2//回車(chē),再$_+1//回車(chē)得5

    上面的$_需要領(lǐng)悟其奧義才能使用得當(dāng),而$0~$4則代表了最近5個(gè)你選擇過(guò)的DOM節(jié)點(diǎn)。
    什么意思?在頁(yè)面右擊選擇審查元素,然后在彈出來(lái)的DOM結(jié)點(diǎn)樹(shù)上面隨便點(diǎn)選,這些被點(diǎn)過(guò)的節(jié)點(diǎn)會(huì)被記錄下來(lái),而$0會(huì)返回最近一次點(diǎn)選的DOM結(jié)點(diǎn),以此類(lèi)推,$1返回的是上上次點(diǎn)選的DOM節(jié)點(diǎn),最多保存了5個(gè),如果不夠5個(gè),則返回undefined。

    另外值得一贊的是,Chrome 控制臺(tái)中原生支持類(lèi)jQuery的選擇器,也就是說(shuō)你可以用$加上熟悉的css選擇器來(lái)選擇DOM節(jié)點(diǎn),多么滴熟悉。

    $('body')

    $(selector)返回的是滿(mǎn)足選擇條件的首個(gè)DOM元素。
    剝?nèi)ニ齻紊频耐庖?,其?shí)$(selector)是原生JavaScript document.querySelector() 的封裝。
    同時(shí)另一個(gè)命令$$(selector)返回的是所有滿(mǎn)足選擇條件的元素的一個(gè)集合,是對(duì)document.querySelectorAll() 的封裝。

    $$('div')

    copy

    通過(guò)此命令可以將在控制臺(tái)獲取到的內(nèi)容復(fù)制到剪貼板。

    copy(document.body)

    然后你就可以到處粘了:

    看完此條命令行,機(jī)智的你是不是跟腦洞全開(kāi)的我一樣,冒出了這樣一個(gè)想法:那就是通過(guò)這個(gè)命令可以在JavaScript里進(jìn)行復(fù)制操作從而不用依賴(lài)Flash插件了。
    But現(xiàn)實(shí)是殘酷的,如之前所述的,這里的控制臺(tái)命令只能在控制臺(tái)中環(huán)境中執(zhí)行,因?yàn)樗灰栏接谌魏稳肿兞勘热?code>window,所以其實(shí)在JS代碼里是訪問(wèn)不了這個(gè)copy方法的,所以從代碼層面來(lái)調(diào)用復(fù)制功能也就無(wú)從談起。但愿有天瀏覽器會(huì)提供相應(yīng)的JS實(shí)現(xiàn)吧~

    keys & values

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

    var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};keys(tboy);values(tboy);

    monitor & unmonitor

    monitor(function),它接收一個(gè)函數(shù)名作為參數(shù),比如function a,每次a被執(zhí)行了,都會(huì)在控制臺(tái)輸出一條信息,里面包含了函數(shù)的名稱(chēng)a及執(zhí)行時(shí)所傳入的參數(shù)。

    而unmonitor(function)便是用來(lái)停止這一監(jiān)聽(tīng)。

    function sayHello(name){	alert('hello,'+name);}monitor(sayHello);sayHello('wayou');unmonitor(sayHello);sayHello('wayou');

    debug & undebug

    debug同樣也是接收一個(gè)函數(shù)名作為參數(shù)。當(dāng)該函數(shù)執(zhí)行時(shí)自動(dòng)斷下來(lái)以供調(diào)試,類(lèi)似于在該函數(shù)的入口處打了個(gè)斷點(diǎn),可以通過(guò)debugger來(lái)做到,同時(shí)也可以通過(guò)在Chrome開(kāi)發(fā)者工具里找到相應(yīng)源碼然后手動(dòng)打斷點(diǎn)。
    undebug 則是解除該斷點(diǎn)。

    而其他還有好些命令則讓人沒(méi)有說(shuō)的欲望,因?yàn)楹眯┒伎梢酝ㄟ^(guò)Chrome開(kāi)發(fā)者工具的UI界面來(lái)操作并且比用在控制臺(tái)輸入要方便。

    REFERENCE

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
Chrome控制臺(tái)實(shí)用指南
Chrome 調(diào)試技巧
小談chrome調(diào)試命令:console.log的使用
Chrome 控制臺(tái)console的用法(學(xué)了之后對(duì)于調(diào)試js可是大大有用的哦)
了不起的CHROME DEV TOOLS
Java教程分享JavaScript常見(jiàn)面試題五
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服