天天看點

Chrome 控制台console的用法(轉)

下面我們來看看console裡面具體提供了哪些方法可以供我們平時調試時使用。

Chrome 控制台console的用法(轉)

目前控制台方法和屬性有:

下面我們來一一介紹一下各個方法主要的用途。

一般情況下我們用來輸入資訊的方法主要是用到如下四個:

1、console.log 用于輸出普通資訊

2、console.info 用于輸出提示性資訊

3、console.error用于輸出錯誤資訊

4、console.warn用于輸出警示資訊

用圖來說話:

Chrome 控制台console的用法(轉)

6、console.groupEnd結束一組輸出資訊

看你需求選擇不同的輸出方法來使用,如果上述四個方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出資訊。

Chrome 控制台console的用法(轉)

7、console.assert對輸入的表達式進行斷言,隻有表達式為false時,才輸出相應的資訊到控制台。

Chrome 控制台console的用法(轉)

8、console.count(這個方法非常實用哦)當你想統計代碼被執行的次數。

Chrome 控制台console的用法(轉)

9、console.dir(這個方法是我經常使用的 可不知道比for in友善了多少) 直接将該DOM結點以DOM樹的結構進行輸出,可以詳細查對象的方法發展等等。

Chrome 控制台console的用法(轉)

10、console.time 計時開始。console.timeEnd  計時結束(看了下面的圖你瞬間就感受到它的厲害了)

Chrome 控制台console的用法(轉)

11、keys和values 前者傳回傳入對象所有屬性名組成的資料,後者傳回所有屬性值組成的數組。

Chrome 控制台console的用法(轉)

12、console.table方法

Chrome 控制台console的用法(轉)

13、Chrome 控制台中原生支援類jQuery的選擇器,也就是說你可以用<code>$</code>加上熟悉的css選擇器來選擇DOM節。

Chrome 控制台console的用法(轉)

14、console.profile和console.profileEnd配合一起使用來檢視CPU使用相關資訊。

Chrome 控制台console的用法(轉)

很多人遇到手動修改腳本後,然後不生效。

a、獨立的js檔案的修改方法

  在F12調試界面中修改的JS代碼,是修改的“本地緩存檔案”中的代碼,而不是存在于伺服器上的網頁的真正代碼,網頁的真正代碼在浏覽器中是無法修改的。

  Chrome開發者調試工具(F12),可以在調試界面修改代碼(包括JS、HTML和CSS)模拟本地運作,具體步驟大緻如下:

  在需要修改的代碼段上方合理代碼行設定斷點;按F5鍵重新整理網頁,并等待網頁執行到斷點;修改JS代碼或其它需要修改的代碼,修改後選擇單步執行或繼續執行即可。

  通常,調試中修改無效,是因為網頁加載完成,其實就是運作已經完成了,修改代碼不會再次執行。

b、修改html上的js

  js寫在html的腳本區域上,這時在source面闆下是無法編輯的,但在Elements還是可以的。

  修改方法就是直接将js代碼修改,然後在console再執行一次。

  缺陷:沒法控制已經執行的腳本

原文:http://www.cnblogs.com/zhongxinWang/p/4121111.html

相關推薦:https://github.com/dwqs/blog

繼續閱讀