非常酷的 Javascript 簡單調試工具Blackbird

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Blackbird 是一個開源的 Javascript 調試工具，預設提供一種非常酷的方式展現 Javascript 調試資訊，如，效果如何呢？

在我們的日常的學習或工作中，經常都會接觸到 Javascript，有時為了進行一些簡單的調試，我們也許會採用 alert()，但有時也是很麻煩的，比如在一個迴圈中，我們可能就要點擊 n 次的快顯視窗了。但現在有了 Blackbird，我們就可以和 alert() 說拜拜了。

雖然有人說會很多 Javascript 類庫都有類似功能，但我可不想因為進行一些簡單的調試而去載入一個架構，因為 Blackbird 足夠簡潔和小巧了，就 4 個檔案，20 多 KB：

4 個檔案： blackbird.js，blackbird.js，blackbird_icons.png，blackbird_panel.png

使用也非常簡單，保持 css 檔案和 png 檔案在同一目錄下（註：當然你也可以修改 css 檔案，使之按你想要的目錄方式存放。），然後在你想調試的頁面的 < head> 和 < /head> 之間載入該 js 和 css 檔案即可，大概代碼如下：

<html>  <head>    <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>    <link type="text/css" rel="Stylesheet" href="/PATH/TO/blackbird.css" />    ...  </head>  ...

Blackbird 支援當前的主流瀏覽器如 ie6+，Firefox2+，Safari2+，Opera9.5 等，並支援快速鍵操作，非常方便。

F2： 顯示和隱藏控制台Shift + F2 : 移動控制台（目前只支援移動到四個角，如果支援隨意拖動就更炫了。）Alt + Shift + F2：清空控制台資訊

同時，Blackbird 還提供多個公用 API：

log.toggle()          顯示或隱藏 Blackbirdlog.move()            移動log.resize()           修改 Blackbird 視窗顯示大小log.clear()             清空資訊log.debug( message )   debug 資訊log.info( message )     一般訊息log.warn( message )      警告資訊log.error( message )    錯誤資訊log.profile( label )     計算消耗時間

使用方法也很簡單，如想在 Javascript 代碼裡調用 Blackbird，代碼如下：

log.debug( 'this is a debug message' );log.info( 'this is an info message' );log.warn( 'this is a warning message' );log.error( 'this is an error message' );

或一個更詳細，具體的例子：

log.profile( 'local anchors' ); var anchors = document.getElementsByTagName( 'A' );for ( var i = 0; i < anchors.length; i++ ) {  if ( anchors[ i ].name ) {    log.debug( anchors[ i ].name );  }} log.profile( 'local anchors' );

以上代碼來自 Blackbird 官方，示範和如下所示：

Demo：http://www.gscottolson.com/blackbirdjs/
Download：blackbirdjs-1.0.zip
License：MIT License

歡迎轉載，轉載請註明： 轉載自田園牧歌

本文連結地址: 非常酷的 Javascript 簡單調試工具Blackbird

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More