朋友炒股兩個月賺了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端。