使用debug.js調試手機網頁

ernest.wang 發布于2019-08-21 12:32 / 454人閱讀

摘要：會把調試信息顯示在網頁上，很方便的就能看到。的十分簡潔簡單，如果你沒啥追求，就直接使用這么使用一個優雅的調試信息你就會在網頁頂部看到一個優雅的調試信息。

創作背景

手機網頁兼容性與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還提供了其他幾個實用的方法：

  
debug.success()
  debug.warn()
  debug.error()
  debug.danger()

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

額，突然覺得說完了，就這么簡單，講述起來簡單，理解和使用起來亦是如此。

深入了解debug.js

你可以在Github上關注或者Forkdebug.js。

如果你關心如何實現，可以點這里看到debug.js的源碼實現。

色彩

我喜歡各種各樣的色彩，我喜歡彩色的物品，住的地方有各種彩色的元素，比如沙發，比如床單，比如T恤上的涂鴉。我不太會統一所有的東西，比如我的儲物柜是綠色的，那么我的垃圾桶可能就是黃色，我的熱水壺可能就是紅色。也因此設計了豐富多彩的debug.js。也許這算是某種怪癖吧，你呢？喜歡彩色么？

云服務器 GPU云服務器網頁js代碼調試工具使用xdebug調試php 手機網頁手機網頁js適配手機

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87650.html

React Native基礎&入門教程：調試React Native應用的一小步

摘要：這也成為了一些開發者跨入移動開發大門的第一道小門檻。目前已經知道了調試設置中和。 React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的調試工具去Debug移動端的代碼，無疑是最吸引開發人員的特性之一。試想一下，當你在手機屏幕按下一個按鈕，處理事件的代碼就可以立即在瀏覽器的調試工具里進行斷點調試，而且每當你對代碼進行修改，界面便可以完成快速地重...

NickZhou 2019-08-26 11:58 評論0 收藏0
【開發調試】谷歌瀏覽器中調試移動網頁和測試網速下頁面效果

摘要：今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧，主要是最近做個微信公共號網站。今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。、今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧，主要是最近做個微信公共號網站。所以就要對頁面測試拉。移動網頁我們最長測得就是各種手機大小的頁面效果和出現網絡問題的效果展示。今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。頁...

番茄西紅柿 2019-04-23 13:23 評論0 收藏0
我推薦的一些前端開發工具

摘要：性能卓越的模板引擎簡潔的模版語法，簡單的，關鍵還能前后端共用模板，簡直就是前端開發利器。是由阿里巴巴部門推出的矢量圖標管理網站。是一個簡單的設備檢測工具。 artTemplate 性能卓越的 js 模板引擎簡潔的模版語法，簡單的API，關鍵還能前后端（Nodejs）共用模板，簡直就是前端開發利器。今天有個想法，把artTemplate封裝下，模版render后給input等注冊幾個事...

nodejh 2019-08-21 10:32 評論0 收藏0