這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【F12 console的用法，以及如何debug程式？】 1.背景介紹 Chrome中Console是用於顯示JS ...
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【F12 console的用法，以及如何debug程式？】
1.背景介紹
Chrome中Console是用於顯示JS和DOM對象信息的單獨視窗。並且向JS中註入1個console對象，
使用該對象 可以輸出信息到Console視窗中。在具備調試功能的瀏覽器上，window對象中會註冊一個名為
console的成員變數，指代調試工具中的控制台，console有很多方法，比如我們最常用的log()
1.console對象
console對象代表瀏覽器的javascript控制台，主要有兩個作用：1.顯示網頁代碼運行時的錯誤信息。2.提供一個命令行
介面，用來與網頁代碼互動
2.如何使用開發者工具調試js代碼
使用console對象的內置方法，或者使用開發者工具的斷點調試功能。
2.知識剖析
1.console顯示信息的命令
.log()方法：在console視窗顯示信息
.log用於輸出普通信息
.info用於輸出提示性信息
.error用於輸出錯誤信息
.warn用於輸出警示信息
.debug用於輸出調試信息
.table()方法,把有複合數據的對象作為表格顯示
.assert()方法，驗證條件並輸出
.time(),.timeEnd()方法，計算一個操作消耗的時間
其它方法：
.group(),.groupend()方法：將顯示信息分組
.dir()顯示對象的所有屬性
.clear():console視窗清屏
.trace():顯示在堆棧中的調用路徑
.profile([title])打開Javascript性能測試開關。可選參數title會在列印性能測試報告時在報告的開頭輸出。
.profileEnd()關閉Javascript性能測試開關並輸出報告。
2.用開發者工具進行代碼調試的方法
使用alert（）方法暫停並查看信息
使用console對象的上述方法
console方法的命令行
開發者工具的斷點調試功能
3.常見問題
什麼是斷點調試
什麼sources選項卡？
斷點調試是最基礎的一個調試方法，在調試的過程中查看變數和函數的變化狀態，
這使得不可見的程式運行過程變得可視化。斷點調試都在source選項卡中進行。
01
a.上圖source選項代碼序列上的藍色標簽即為斷點的標識，斷點也顯示在Breakpoint
選項中，可以在Breakpoint選項卡中勾掉暫時不用的斷點，後面再使用的時候可以再
勾選，這樣就不用再代碼中翻來翻去迷失方向了。
b.這幾個小圖標前兩個和調試時頁面的兩個按鈕相同， 分別是暫停/開始和單步；
往右邊兩個向上向下的箭頭意思是進入函數，和（執行完）跳出函數；後面的一個是
忽略所有斷點運行，這樣被避免更改完之後，點掉所有斷點執行一遍在挨個加斷點的尷尬
c. watch視窗： 點擊“+”添加一個想要監視的變數，在整個調試過程中，這個變數會一直顯示在這裡，
就不用在函數之間苦苦尋找，然後再“hover”上去顯示它的值，非常適合全局變數的監視。
4.擴展思考
平時上網瀏覽，看到感興趣的效果，可以用開發者工具直接學習和修改
練習和項目中的遇到的bug，可以在開發者工具中修改，以便找到找到解決辦法
5.參考文獻（點擊查看）
5.更多討論
1.分享人問：為什麼不提倡用alert進行調試？
度娘回答：一方面，傳統的alert調試方式已經漸漸不能滿足前端開發的種種場景。而且alert調試方
式彈出的調試信息，那個視窗著實不太美觀，而且會遮擋部分頁面內容，著實有些不太友好。
另一方面，alert的調試信息會中斷代碼，阻礙頁面的繼續渲染。這就意味著開發人員調試完成後，
必須手動清除這些調試代碼，實在有些麻煩。
小師姐問：堆棧空間區別?
2.分享人回答：1、棧（操作系統）：由操作系統自動分配釋放 ，存放函數的參數值，局部變數的值等。其操作方式類似於數據結構中的棧；
2、堆（操作系統）： 一般由程式員分配釋放， 若程式員不釋放，程式結束時可能由OS回收，分配方式倒是類似於鏈表。
二、堆棧緩存方式區別：
1、棧使用的是一級緩存， 他們通常都是被調用時處於存儲空間中，調用完畢立即釋放；
2、堆是存放在二級緩存中，生命周期由虛擬機的垃圾回收演算法來決定（並不是一旦成為孤兒對象就能被回收）。所以調用這些對象的速度要相對來得低一些。
三、堆棧數據結構區別：
堆（數據結構）：堆可以被看成是一棵樹，如：堆排序；
棧（數據結構）：一種先進後出的數據結構。
3.王野師兄：console.warn（）；能列印出警示圖標嗎？
啊飛師兄回答：展示如下圖
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。
這裡是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的聚集地。"
歡迎加IT交流群565734203與大家一起討論交流
