前端網設必知-console.log()取代alert()讓javascript除錯更EZ

梅問題-前端網頁設計師必知-console取代alert讓javascript除錯更EZ
  當在寫javascript效果時,為了除錯或是想知道,目前在這區間抓的值是否正確,應該都會透過alert的方式,將取到的值給吐出來,是一個相當方便的機制,但今天若是在作滾動偵測時,那還真是要命的,就會瘋狂的出現alert視窗,所以這時候不妨可改用console,將取到值直接秀在瀏覽器的開發者人員工具中,如此一來就不會再跳任何的警示框,同時若網頁那邊有出錯,也可從console中來進行查看,甚至有js呼叫不到的錯誤訊息,也會在console中顯示,因此有在開發javascript的朋友們console千萬別錯過了,至於 要怎麼用呢?其方法很簡單與alert差不多。

Step1
console的語法也相當的簡單,只要在要偵測的地方加入console.log("字串"),這樣就可以了囉!
梅問題-前端網頁設計師必知-console取代alert讓javascript除錯更EZ
Step2
以chrome瀏覽器為例,點右上角 設定 / 更多工具 / JavaScript控制台,接著在視窗下方就看到一個訊息框,這時上方就會顯示剛所設定要顯示的訊息。
梅問題-前端網頁設計師必知-console取代alert讓javascript除錯更EZ
Step3
剛是直接寫入固定的字串,當然也可以變數的型式來作顯示。
梅問題-前端網頁設計師必知-console取代alert讓javascript除錯更EZ
Step4
剛是寫了一個滾動偵測,所以當一滾動時,立即就會顯示目前的位置的數值,是不是超方便的呀!!
梅問題-前端網頁設計師必知-console取代alert讓javascript除錯更EZ

相關文章

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

更多講座