Web Developer Tools in FireFox 10

在美國時間 2012/01/31 FireFox 發佈 10.0 版本,大家可以參考 Release Note,其實對於網頁程式設計師最大的福音就是 Firefox 內建 Web Develop Tool,以後不必在安裝 FireBug Addon,就可以任意查詢網頁 Element 功能,大家可以參考底下 Mozilla 所製作的影片以及快速瀏覽 CSS properties。 不多說了看完影片直接打開 FireFox,按下快捷鍵 Ctrl+Shift+I 就可以開始嘗試 Firfox 內建 Web Develop Tool。 Ref: Firefox 10 tooling closes in on Firebug Firefox Adds Powerful New Developer Tools

Using firebug for firefox 除錯 javascript

在 Web 程式設計,不管是 html 或者是 CSS、甚至 javascript,都可以利用 FireFox Plugin: firebug 來除錯,順便推薦另一套 Web Develper 工具:Web Developer 1.1.8,這兩套都可以玩看看,在網路看自己東華電機學長 gasolin 寫過一篇:3 分鐘學會用 firebug 除錯 ,裡面有一個影片,建議大家看看:影片,如何利用 firebug 來對 javaascript 除錯,介紹了 firebug 優點。底下整理我看到的內容 1. 利用 console.log() 來針對變數除錯 以往都是利用 window.alert() 的方式來看看變數是否正確,現在只要在 javascript 裡面加入 console.log() 針對不同變數取值出來觀看 輸出會顯示: a is test [1, 2, 3, 4] 2. 印出有圖示的訊息 console.info/console.warn/console.error 這功能跟 console.log 差不多,只有差在前面有圖示符號,請看下圖: 3. 使用 firebug 除錯 debugger; 只要在 js 裡面加入 debugger; 就會進行 逐步除錯,我想如果寫過 Window form 的使用者,C# ASP.net 最常用的就是逐步徵測錯誤,這功能相當方便,每一行跑了哪些變數,都可以逐一在旁邊顯示喔 大家看到逐步偵錯到第19行,前面變數都會在旁邊顯示喔,原本都是 null。 [Read More]