使用debug.js調試手機網頁

創做背景

手機網頁兼容性與ie相比，有過之無不及，調試的時候，咱們會使用console.log，可是手機上看不到打印出來的信息。因此只好各類alert，但alert總顯得不那麼優雅。

初學js的時候就alert，如今還在各類alert。並且alert後還要點擊肯定，若是循環alert，那就悲劇了，一直點肯定吧，可能手機還所以搞死機了。

那麼有沒有一種顯得更加優雅的方式去輸出調試信息呢？

有的。使用debug.js就行了。

貌似看到過一次，有人在iPhone上打開了控制檯，若是有人知道，請告訴我。

debug.js會把調試信息顯示在網頁上，很方便的就能看到。原理也十分簡單，動態建立dom元素，而後append到頁面中。

先睹爲快

你能夠點這裏看到使用debug.js的網頁，想說它真的很是好看，你也能夠用手機掃描二維碼訪問。

如何使用debug.js

引入debug.js後，你會獲得debug這個方法，它是掛載在window下面的。

debug.js的api十分簡潔簡單，若是你沒啥追求，就直接使用這麼使用：

debug.log('一個優雅的調試信息');

你就會在網頁頂部看到一個優雅的調試信息。

若是你不知足於此，你追求色彩，追求調試類型，那麼debug.js還提供了其餘幾個實用的方法：

1. debug.success()
2. debug.warn()
3. debug.error()
4. debug.danger()

意思就不用解釋了，有了這些，輸出的調試信息也繽紛了起來，彷佛人生也變得colorful。

額，忽然以爲說完了，就這麼簡單，講述起來簡單，理解和使用起來亦是如此。

深刻了解debug.js

你能夠在Github上關注或者Forkdebug.js。

若是你關心如何實現，能夠點這裏看到debug.js的源碼實現。

色彩

我喜歡各類各樣的色彩，我喜歡彩色的物品，住的地方有各類彩色的元素，好比沙發，好比牀單，好比T恤上的塗鴉。我不太會統一全部的東西，好比個人儲物櫃是綠色的，那麼個人垃圾桶可能就是黃色，個人熱水壺可能就是紅色。也所以設計了豐富多彩的debug.js。也許這算是某種怪癖吧，你呢？喜歡彩色麼？