資訊專(zhuān)欄INFORMATION COLUMN
摘要：會(huì)把調(diào)試信息顯示在網(wǎng)頁(yè)上，很方便的就能看到。的十分簡(jiǎn)潔簡(jiǎn)單，如果你沒(méi)啥追求，就直接使用這么使用一個(gè)優(yōu)雅的調(diào)試信息你就會(huì)在網(wǎng)頁(yè)頂部看到一個(gè)優(yōu)雅的調(diào)試信息。
創(chuàng)作背景
手機(jī)網(wǎng)頁(yè)兼容性與ie相比，有過(guò)之無(wú)不及，調(diào)試的時(shí)候，我們會(huì)使用console.log，但是手機(jī)上看不到打印出來(lái)的信息。所以只好各種alert，但alert總顯得不那么優(yōu)雅。
初學(xué)js的時(shí)候就alert，現(xiàn)在還在各種alert。而且alert后還要點(diǎn)擊確定，如果循環(huán)alert，那就悲劇了，一直點(diǎn)確定吧，可能手機(jī)還因此搞死機(jī)了。
那么有沒(méi)有一種顯得更加優(yōu)雅的方式去輸出調(diào)試信息呢？
有的。使用debug.js就好了。
貌似看到過(guò)一次，有人在iPhone上打開(kāi)了控制臺(tái)，如果有人知道，請(qǐng)告訴我。
debug.js會(huì)把調(diào)試信息顯示在網(wǎng)頁(yè)上，很方便的就能看到。原理也十分簡(jiǎn)單，動(dòng)態(tài)創(chuàng)建dom元素，然后append到頁(yè)面中。
先睹為快你可以點(diǎn)這里看到使用debug.js的網(wǎng)頁(yè)，想說(shuō)它真的非常好看，你也可以用手機(jī)掃描二維碼訪問(wèn)。
如何使用debug.js引入debug.js后，你會(huì)得到debug這個(gè)方法，它是掛載在window下面的。
debug.js的api十分簡(jiǎn)潔簡(jiǎn)單，如果你沒(méi)啥追求，就直接使用這么使用：
debug.log("一個(gè)優(yōu)雅的調(diào)試信息");
你就會(huì)在網(wǎng)頁(yè)頂部看到一個(gè)優(yōu)雅的調(diào)試信息。
如果你不滿足于此，你追求色彩，追求調(diào)試類(lèi)型，那么debug.js還提供了其他幾個(gè)實(shí)用的方法：
debug.success()
debug.warn()
debug.error()
debug.danger()
意思就不用解釋了，有了這些，輸出的調(diào)試信息也繽紛了起來(lái)，似乎人生也變得colorful。
額，突然覺(jué)得說(shuō)完了，就這么簡(jiǎn)單，講述起來(lái)簡(jiǎn)單，理解和使用起來(lái)亦是如此。
深入了解debug.js你可以在Github上關(guān)注或者Forkdebug.js。
如果你關(guān)心如何實(shí)現(xiàn)，可以點(diǎn)這里看到debug.js的源碼實(shí)現(xiàn)。
色彩我喜歡各種各樣的色彩，我喜歡彩色的物品，住的地方有各種彩色的元素，比如沙發(fā)，比如床單，比如T恤上的涂鴉。我不太會(huì)統(tǒng)一所有的東西，比如我的儲(chǔ)物柜是綠色的，那么我的垃圾桶可能就是黃色，我的熱水壺可能就是紅色。也因此設(shè)計(jì)了豐富多彩的debug.js。也許這算是某種怪癖吧，你呢？喜歡彩色么？
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/87650.html
摘要：這也成為了一些開(kāi)發(fā)者跨入移動(dòng)開(kāi)發(fā)大門(mén)的第一道小門(mén)檻。目前已經(jīng)知道了調(diào)試設(shè)置中和。 React Native(以下簡(jiǎn)稱(chēng)RN)為傳統(tǒng)前端開(kāi)發(fā)者打開(kāi)了一扇新的大門(mén)。其中，使用瀏覽器的調(diào)試工具去Debug移動(dòng)端的代碼，無(wú)疑是最吸引開(kāi)發(fā)人員的特性之一。 試想一下，當(dāng)你在手機(jī)屏幕按下一個(gè)按鈕，處理事件的代碼就可以立即在瀏覽器的調(diào)試工具里進(jìn)行斷點(diǎn)調(diào)試，而且每當(dāng)你對(duì)代碼進(jìn)行修改，界面便可以完成快速地重...
摘要：今天有幸給大家分享一下谷歌瀏覽器針對(duì)移動(dòng)網(wǎng)頁(yè)測(cè)試的技巧，主要是最近做個(gè)微信公共號(hào)網(wǎng)站。今天就簡(jiǎn)單分享下在谷歌瀏覽器測(cè)試頁(yè)面的適配和網(wǎng)速限制展示。、 今天有幸給大家分享一下谷歌瀏覽器針對(duì)移動(dòng)網(wǎng)頁(yè)測(cè)試的技巧，主要是最近做個(gè)微信公共號(hào)網(wǎng)站。所以就要對(duì)頁(yè)面測(cè)試?yán)Ｒ苿?dòng)網(wǎng)頁(yè)我們最長(zhǎng)測(cè)得就是各種手機(jī)大小的頁(yè)面效果和出現(xiàn)網(wǎng)絡(luò)問(wèn)題的效果展示。 今天就簡(jiǎn)單分享下在谷歌瀏覽器測(cè)試頁(yè)面的適配和網(wǎng)速限制展示。 頁(yè)...
摘要：性能卓越的模板引擎簡(jiǎn)潔的模版語(yǔ)法，簡(jiǎn)單的，關(guān)鍵還能前后端共用模板，簡(jiǎn)直就是前端開(kāi)發(fā)利器。是由阿里巴巴部門(mén)推出的矢量圖標(biāo)管理網(wǎng)站。是一個(gè)簡(jiǎn)單的設(shè)備檢測(cè)工具。 artTemplate 性能卓越的 js 模板引擎 簡(jiǎn)潔的模版語(yǔ)法，簡(jiǎn)單的API，關(guān)鍵還能前后端（Nodejs）共用模板，簡(jiǎn)直就是前端開(kāi)發(fā)利器。今天有個(gè)想法，把a(bǔ)rtTemplate封裝下，模版render后給input等注冊(cè)幾個(gè)事...
閱讀 1583·2025-02-07 13:29
閱讀 1007·2024-11-07 18:25
閱讀 131501·2024-02-01 10:43
閱讀 1371·2024-01-31 14:58
閱讀 1148·2024-01-31 14:54
閱讀 83575·2024-01-29 17:11
閱讀 3877·2024-01-25 14:55
閱讀 2392·2023-06-02 13:36
