無廢話ExtJs 入門教程八[腳本調試Firefox:firebug]


朋友炒股兩個月賺了10萬,我幫他推廣一下公眾號,把錢用來投資總比放銀行連通貨膨脹都跑不過里強硬核離職,在家炒股 ,這是他每天的日志,有些經驗是花錢也買不到的。

Firebug是一個Firefox插件,功能:HTML查看和即時編輯、控制台、網絡狀況等,是開發JavaScript、ExtJs的得力調試工具。

一、Firefox的安裝.下載地址:
     http://www.mozilla.org.cn

二、Firebug下載地址:

     https://addons.mozilla.org/zh-CN/firefox/search?q=firebug

   下載后將 firebug 拖入到 firefox 瀏覽器中即可自動安裝。

三、演示[我們以前面講過的login.htm為例]:

  我們在開發的時候,最常用的三個firebug功能分別為:查看元素的構成、腳本調試、client與service交互查看

  1.查看頁面元素,現在我們看一按鈕的組成結構。

      如下圖所示:

 

(1)找開firebug。

(2)點擊左下角的小方塊[小蟲子旁邊的]。

(3)然后把鼠標移動到提交按鈕的位置[即:我們要查看結構的對象]。

如圖所示[默認]:firebug的左側部分顯示的是這個按鈕的構成,右側部分顯示的是樣式表。

  2.js腳本調試

(1)我們故意把login.htm的代碼改出錯,在上節課中59行的位置多加個“,”,如下代碼第8行所示。

 1  //密碼input
 2             var txtpassword = new Ext.form.TextField({
 3                 width: 140,
 4                 allowBlank: false,
 5                 maxLength: 20,
 6                 inputType: 'password',
 7                 name: 'password',
 8                 fieldLabel: '密 碼',,
 9                 blankText: '請輸入密碼',
10                 maxLengthText: '密碼不能超過20個字符'
11             });

(2)點擊firebug控制台。

(3)刷新頁面后如下圖所示:

控制台直接顯示錯誤信息[文件名,行號,列號等],點擊后會直接打開客戶端的js文件,並找到出錯位置。

在firebug中還可以設置斷點,逐步調試,這個功能大家自行看下,這里就不做講解了。

3.我們在做開發的時候,大部分是與service端做交互,在這方面firebug也做出了很好的幫助調試功能,如下圖所示:

點擊“網絡”--》"xhr"

我們在開發中常用的有"Post"和“響應”

(1)我在client向service以post形式發送了3個參數,分別為:username,password,checkcode。

(2)點擊“響應”后會顯示service返回給client的返回值。

這樣我們就可以很容易的查看client與service端的交互,並且判定錯誤是出在service端還是client端。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM