Chrome 控制檯console的用法(轉)

1、查看命令

下面咱們來看看console裏面具體提供了哪些方法能夠供咱們平時調試時使用。

目前控制檯方法和屬性有：

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

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

2、命令介紹

通常狀況下咱們用來輸入信息的方法主要是用到以下四個：

一、console.log 用於輸出普通訊息

二、console.info 用於輸出提示性信息

三、console.error用於輸出錯誤信息

四、console.warn用於輸出警示信息

用圖來講話：

六、console.groupEnd結束一組輸出信息

看你需求選擇不一樣的輸出方法來使用，若是上述四個方法再配合group和groupEnd方法來一塊兒使用就能夠輸入各類各樣的不一樣形式的輸出信息。

七、console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯。

八、console.count（這個方法很是實用哦）當你想統計代碼被執行的次數。

九、console.dir(這個方法是我常用的 可不知道比for in方便了多少) 直接將該DOM結點以DOM樹的結構進行輸出，能夠詳細查對象的方法發展等等。

十、console.time 計時開始。console.timeEnd  計時結束（看了下面的圖你瞬間就感覺到它的厲害了）

十一、keys和values 前者返回傳入對象全部屬性名組成的數據，後者返回全部屬性值組成的數組。

十二、console.table方法

1三、Chrome 控制檯中原生支持類jQuery的選擇器，也就是說你能夠用$加上熟悉的css選擇器來選擇DOM節。

1四、console.profile和console.profileEnd配合一塊兒使用來查看CPU使用相關信息。

 

3、使用總結

一、修改javascript代碼

不少人遇到手動修改腳本後，而後不生效。

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