分享內容(
22人
Firebug的功能何其多,也何其好用,但是有一個叫console的東西,一直被我視而不見,直到有一天,切過去看了一下,實在不明所以,於是祭出Google大神翻動一下網海,誰知不看萬事休矣,一看之下真是不得了了,這console真的是不可名狀之好物呀。
在console上可以直接執行JavaScript的語法,因此你可以利用console直接來操作網頁上的元件,我自己就經常用jQuery語法來取dom,直接修改語法,模擬實際修改的結果。
console上直得深究的地方很多,今天先來介紹個console.log的功能。
一般我們在JavaScript除錯時,通常會用到alert(),來抓取某個變數的變化,不過有時如果變數一多,想要得到一個有意義的顯示訊息就會很麻煩,例如:
var a = 5;
var b = 10;
我們如果想要知道 a、b兩個值的話,使用alert的話要這樣加工:
alert('a值是:'+a+',b值是:'+b);
這樣又是字串、又是變數的,很麻煩。
這時我們可以請出console.log來幫忙,透過console.log的話,就可以用:
console.log('a值是:%d,b值是:%d',a,b);
這種方式和php的printf方式一樣,對於偵錯時,比一直跳出的alert方便許多。
可惜的是這種方式只能在firefox上使用,而且由於IE不能辨識console.log,所以會顯示錯誤。
不過如果在開發階段,而且是用Firefox來輔助的話,console還是很好用的。
除了console.log,它還有console.info、console.warn、console.error等不同,完整的console API 可到
http://www.getfirebug.com/console.html
參考參考。
英文看不懂?沒關係,有個中文摘要讓你馬上明白,要不要6分鐘,不用!要不要5分鐘,不用!3分鐘馬上就學會!(這是這篇文章說的,沒在3分鐘學會請洽原文作者)。
圖為firebug執行console的狀況

在console上可以直接執行JavaScript的語法,因此你可以利用console直接來操作網頁上的元件,我自己就經常用jQuery語法來取dom,直接修改語法,模擬實際修改的結果。
console上直得深究的地方很多,今天先來介紹個console.log的功能。
一般我們在JavaScript除錯時,通常會用到alert(),來抓取某個變數的變化,不過有時如果變數一多,想要得到一個有意義的顯示訊息就會很麻煩,例如:
var a = 5;
var b = 10;
我們如果想要知道 a、b兩個值的話,使用alert的話要這樣加工:
alert('a值是:'+a+',b值是:'+b);
這樣又是字串、又是變數的,很麻煩。
這時我們可以請出console.log來幫忙,透過console.log的話,就可以用:
console.log('a值是:%d,b值是:%d',a,b);
這種方式和php的printf方式一樣,對於偵錯時,比一直跳出的alert方便許多。
可惜的是這種方式只能在firefox上使用,而且由於IE不能辨識console.log,所以會顯示錯誤。
不過如果在開發階段,而且是用Firefox來輔助的話,console還是很好用的。
除了console.log,它還有console.info、console.warn、console.error等不同,完整的console API 可到
http://www.getfirebug.com/console.html
參考參考。
英文看不懂?沒關係,有個中文摘要讓你馬上明白,要不要6分鐘,不用!要不要5分鐘,不用!3分鐘馬上就學會!(這是這篇文章說的,沒在3分鐘學會請洽原文作者)。
圖為firebug執行console的狀況

▼ ADVERTISEMENT ▼
廠商來幫忙
邦友收藏動態
- 常用網路管理工具 Getif (Get Interfaces)教學 (kaiin323)
- 5 本超優免費的自學 Linux 電子書 (scottchen)
- 6款Windows平臺免費備份工具 (tomtom123)
- 關於Cisco、linux、MySQL、Oracle、unix一些命令手冊 (fran633)
- 穩定的感覺會咬人 (heero1219248)
- 化繁為簡的工作拆解手法 (brgodman)
- 用群組原則輕鬆管理使用者電腦 (raytracy)
- 系統分析師必須思考的8個問題 (arnolin)
- 關於CCNA一些自我學習資料大全~! (51pass)
- 10 個不可或缺的 Linux/Unix 指令速查表 (scottchen)
安裝「收藏快捷鍵」,可以讓邦友直接透過Google工具列上的按扭,快速收藏站內、站外的網頁。
相關問答
- IT30書之10-《網頁設計‧愛上jQuery》
- 我的網頁設計之路
- 請邦友提供視覺化網頁設計公司
- [自由軟體,鼠到擒來] YesScript:設定Firefox瀏覽器JavaScript的黑名單 (Day25,字母Y)
- 想要幫公司弄網頁
- 程式設計心法:0.前言
- Javascript面面觀:應用篇《測試》
- Javascript面面觀:應用篇《Javascript引擎》
- 請問 Netscreen SSG-5 是否都不附 Console 線了
- Javascript面面觀:應用篇《SpiderMonkey》
- 學習網路多媒體設計的心得
- IT30書之4-《Head First JavaScript》
- IT30書之4-《Head First JavaScript》
- IT30書之2-《JavaScript大全》
- IT30書之13-《JavaScript DOM高級程序設計》
- Javascript面面觀:應用篇《V8》
- IT30書之7-《精通JavaScript》
- 獎金獵人裡面,也有IT相關像是電腦繪圖、程式設計的比賽嗎?
- Javascript面面觀:應用篇《Rhino》
- 請推薦JavaScript有關物理的書







