Dojo第一節:學會使用firebug對js,Dojo進行調適,dojofirebug

來源:互聯網
上載者:User

Dojo第一節:學會使用firebug對js,Dojo進行調適,dojofirebug

內容概要:

學會使用firebug的準系統

1. 簡單介紹:Firebug是Firefox的一個外掛程式,用來對js代碼進行調適的工具。

(官方廢話:Firebug是firefox下的一個外掛程式,能夠調試所有網站語言,如Html,Css等,但FireBug最吸引我的就是javascript調試功能,使用起來非常方便,而且在各種瀏覽器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能還很強大,比如html,css,dom的查看與調試,網站整體分析等等。總之就是一整套完整而強大的 WEB開發工具。再有就是其為開源的軟體。)

2.安裝 Firebug

第一步,點擊 Firefox 瀏覽器上的“工具”選項,然後點擊“附加軟體”,在彈出的小視窗中,點擊右下角的“擷取擴充”選項

第二步,在點擊“擷取擴充”選項後,開啟的頁面中搜尋 Firebug,在搜尋結果的頁面中,下載 Firebug 。需要注意的是,Firebug 的版本要與 Firefox 的版本相相容。如果要查看自己 Firefox 的版本,可通過點擊瀏覽器“協助”選項下“關於 Mozilla Firefox ”選項。

第三步,安裝好,重啟瀏覽器即可。

3.Firebug 調試功能

快速鍵一:當你輸入document.get之後,按下tab鍵就能補齊為document.getElementById,非常方便。如果你認為補齊得不夠理想,按下shift+tab又會恢複原狀

快速鍵二:直接在瀏覽器輸入F12即可直接開啟firebug調適工具

進入本文:

功能一,Console 視窗的使用。 Console 視窗除了顯示頁面載入的檔案以外,還可以直接顯示頁面中的代碼錯誤和一些輸出資訊。

Console 視窗中輸出調試資訊。 Firebug 支援的調試語句較為常用的是 console.log 。

比如:

console.debug("I am debug"); console.info("I am info"); console.warn("I am warn"); console.error("I am error");

有 Javascript 經驗的讀者可能會習慣於使用 alert() 進行調試資訊的輸出,但是筆者認為將調試資訊在 Console 視窗中輸出是一個更優的選擇。首先,如果頁面有很多alert(), 則點擊“ OK ”讓彈出框消失也是一個非常煩人的事情。其次,如果調試資訊的量很大,則是用alert() 的快顯視窗將無法良好的完整展示調試資訊。接著,alert() 無法查看對象和數組的細節資訊。最後,如果在一個迴圈中使用alert(), 將很容易造成頁面“死掉”。

功能二,HTML 視窗的使用。在 HTML 視窗中可以查看到頁面的原始碼。除了可以查看頁面的原始碼外,還可以使用 Firebug 的編輯功能直接對頁面進行編輯。


在處於 HTML 視窗的模式下,點擊 Edit 按鈕,將切換查看模式到編輯模式。需要注意的是,在使用 Edit 模式前,最好先提前選中頁面的 body 代碼區塊。

在 Edit 模式下,需要注意的是,在頁面新加完代碼後,需要點擊一下頁面的其它任何地方,則其效果才會在頁面上載入。

功能三,HTML 模式下的 Style,Layout,DOM 三視窗

在 HTML 視窗模式下,與 HTML 視窗相對應,在其右邊有 Style,Layout,DOM 三個用於查看頁面對應部分相關屬性的視窗。當選中頁面中的某個部分時,Style 顯示選中部分的 CSS 屬性,Layout 顯示 CSS 的盒式模型,DOM 顯示其選中部分的所有 DOM 對象。結合使用 Inspect 功能可以方便選擇頁面中所需要關注的部分。

功能四,Script 視窗的使用。 Script 視窗支援對 Javascript 的斷點調試。


功能五,DOM 視窗和 Net 視窗的使用。 DOM 視窗主要顯示的是頁面中的所有對象,及其所包含的屬性和方法。 Net 視窗主要是顯示當前頁面中所載入的各個檔案的大小和載入各個檔案所花費的時間。



在firebug中怎引進dojo

你的網頁裡面引入dojo,用FireFox開啟在firebug裡就可以調試dojo,沒有“在firebug中引進dojo”的概念。
 
2個JS架構(DOJO與EXTJS)的問題

真的是難分優劣...
不知道你問這個問題的初衷,如果你是可以選擇產品使用什麼架構的高層,那Dojo是免費的,這個優勢是巨大的,除非你不考慮法律問題。
如果你是開發人員,現在想學一門來吃飯的話,這兩個會了哪個都OK的,因為你不知道下一家公司用啥,對不對?另外說一句,如果你是在選學哪個,那先學一下jQuery吧,一方面實際項目很有可能就用,比如dojo+jQuery,extjs+jQuery,這種組合很常見,而且jQuery的學習可以很好的讓你瞭解JS架構的核心理念。
就我個人而言,更偏愛dojo,不是說dojo就比extjs好,是因為我的工作環境要求我要用dojo,所以就用,用了後覺得挺好,總比沒有得用好多了,dojo唯一的缺點是幾乎所有有用的資料都是英文的...國外用Dojo更多一些,國內有人說是ExtJs,這個有待考證。
dojo的最大優勢是真正的開源,並且有幾個大公司做支援,所以儘管是免費的,但是代碼的品質的確不錯,而且更新速度比較快,今年一年更新了2個大版本,從1.5到1.6再到1.7,一個架構現在多強都是白搭的,因為多強的架構都有問題,如果更新的效率不行,終究是個失敗品,而dojo目前看到不會爛尾。
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.