JavaScript 與Chrome Console 基本教學 - 宙思設計

基本上就是當網頁出現問題時，一些程式訊息都會在這裡呈現，也就是網頁的“前端執行紀錄”，記住！只有前端！ 那，要怎麼在JavaScript 開發下，使用Console ... 網頁開發者通常是需要長期跟瀏覽器為伍，所以本篇來針對 瀏覽器Chrome開發JavaScript時常用的幾個習慣說明教學一下！開發Client端的JavaScript最常用到的就是Console，不管是基礎開發者或者資深都會需要要使用這個功能，首先隨便打開一個網頁，滑鼠右鍵有個“檢查”的選項，點擊後會出現分割視窗，再選擇Console；亦或者快捷鍵Cmd+Option+J(Windows是Ctrl+Shift+J)也可以快速打開Console。

網頁上按滑鼠右鍵>檢查選擇Console頁面 Console是做什麼的呢？基本上就是當網頁出現問題時，一些程式訊息都會在這裡呈現，也就是網頁的“前端執行紀錄”，記住！只有前端！ 那，要怎麼在JavaScript開發下，使用Console呢？基本上寫過程式的人都知道“印出”的功能是很重要的，而Console就是可以拿來扮演這樣的角色，以下會用簡單的JavaScript演示如何使用ChromeConsole來log訊息！ 首先新增index.html與index.js兩個檔案，並且在index.html裡面加入引用index.js這樣就可以在本機端開啟index.html囉！ 打開index.js，開始幾個Console範例，第一個就是印出字串console.log("HelloWorld!");然後儲存離開，重新整理index.html後，注意觀察瀏覽器的Console上的變化，就可以看到HelloWorld的字串了！Console介面印出字串了！ 或許你會問，然後呢？沒有然後，等後面再寫邏輯的時候你就會知道這個有多好用了！ 另外，印出訊息除了可以用console.log這個語法外，還有console.info與console.error兩種可以用喔！兩者差別除了info與error的意思外，最主要的差別就是顏色，因為在開發大網站時，通常log也會特別的多，所以可以利用console.info的藍色與console.error的紅色字串做識別喔！ 所以今天重點就是，在JavaScript內，大家可以利用console.log來丟出執行到該處的字串！這對於開發Debug可是很重要！很重要！很重要！ 以上範例大家可以到 這裡 下載喔！JavaScript前端ChromeDebug標籤分類開箱文3C科技藍芽遊戲Nintendo攝影穩定器三軸穩定器JavaScript前端ChromeDebugAppleMacOSOSX後端伺服器RubyonRailsMySQL運動GoProPORTER包包Plantronics耳機Google技術應用ubuntuAWSPHPCodeIgniterApache鋼筆SAILORLAMYAURORAHTMLPHPActiveRecordCSS切版技術觀念題C語言RWD勵志感觸期許閒聊熱門文章MacOS上安裝MySQL以及相關設定筆記飛宇SPGLive360°三軸手機穩定器開箱文HTML元素並排把Google試算表當資料庫，並取得API實作心得PORTERTANKER3WAY開箱文最新文章NintendoSwitch開箱文飛宇SPGLive360°三軸手機穩定器開箱文JavaScript物件JavaScript陣列JavaScript迴圈宙思設計知識文章JavaScript與ChromeConsole基本教學