日期：2018年 01月 01日
標籤： Browser Html Debug
摘要：ASP.Net MVC 學習筆記
情境：瀏覽器開啟使用F12時偵錯可以使用的指令說明
基本介紹：本篇分為3大部分。
範例檔案下載：下載
第1部分有13節：說明前端Console函式的Debug使用方法。
第2部分有5節：主流瀏覽器的呼叫Console函式的方法。
第3部分: 提供補充資訊
|
第一部分 |
|
| 1. console.log() | 查閱前端資源屬性 |
| 2. console.assert() | 查閱 Bool 表述式的結果 |
| 3. console.clear() | 清除console控制台資訊 |
| 4. console.count() | 變數、函式使用的頻率 |
| 5. console.dir() | 顯示Dom元件的屬性 |
| 6. console.dirxml() | 顯示Dom的Xml格式 |
| 7. console.error() | 顯示回傳的錯誤資訊 |
| 8. console.group() + console.groupEnd() | 群組化資訊 |
| 9. console.trace() | 追蹤Js的行數 |
| 10. console.table() | Table 格式化Json |
| 11. console.time() + console.timeEnd() | 計算範圍內的物件耗費間 |
| 12. console.info() | 正確顯示資訊用 |
| 13. console.warn() | 正確顯示警告資訊 |
|
第二部分 |
|
| 1. Chrome | F12 |
| 2. FireFox | F12 |
| 3. Internet Explore | F12 |
| 4. Opera | Ctrl + shift + C |
| 5. Safari | 開啟設定 |
|
第三部分 |
|
| 範例檔案下載 (vs2015) | |
| MSDN web docs (瀏覽器支援說明) | |
第一部分：說明前端Console函式的Debug使用方法
1. console.log()：顯示
我們先於.html 頁面建立以下 script語法
<script>
console.log('Hello');
</script>
執行瀏覽器 -> 按下鍵盤的F12 -> 可以看到顯示的Hello資訊
進階用法 ：格式化
我們可以對輸出使用C語言中的 Printf()語法，如下
| 項目 | 說明 |
|---|---|
| %d | 顯示數字 |
| %s | 顯示字串 |
| %c | 顯示格式 |
console.log('輸出數字 %d', 38.5);
console.log('輸出字串 %s', 'String');
console.log('輸出數字(錯誤的參數) %d', 'sss');
console.log('輸出字串(Int 強轉 String) %s', 38.5);
console.log('%c2018 Heppy New %cYear', 'color:blue' , 'color:yellow');
執行結果如下：
2. console.assert()：檢查比較後的結果
我們建立兩個變數值，進行比較，如以下:
<script>
var intA = 10;
var intB = 20;
console.assert( intA != intB, 'Bool = false 時顯示該行訊息 bool結果: ' + (intA != intB));
console.assert(intA === intB, 'Bool = false 時顯示該行訊息 bool結果: ' + (intA != intB));
</script>
執行結果: 只有當true時才顯示資訊
3. console.clear()：清除console資訊
我們建立兩個變數值，進行比較，如以下:
<script>
console.clear();
</script>
執行結果:
4. console.count()：統計變數、函式使用次數
我們建立兩個變數值，進行比較，如以下:
我們建立以下語法：
※ strC 變數，每被呼叫一次都會累計； test()被呼叫也開始累計，便於我們追蹤某個項目的呼叫次數，用於重構與追蹤時使用。
<script>
var strC = 'Hello 2018';
console.count(strC);
console.count(strC);
console.count(strC);
function test(){
strC += ' KK';
};
console.count(test);
console.count(strC);
</script>
執行結果:
5. console.dir()：顯示dom元件中的元件(屬性)
我們對doucument.body 進行檢視
我們建立以下語法：
<script>
console.dir(document.body);
</script>
執行結果:
展開上面的執行結果如下：
6. console.dirxml()：取得dom XML格式資料
<script>
console.dirxml(document.body);
</script>
執行結果:
展開執行結果如下： 等於XML格式
7. console.error()：取得錯誤資訊 EX: ajax回傳的響應資訊
我們宣告以下.ajax ，並且用了錯誤的url。
<script>
$.ajax({
url: 'yahoooo.com.ttttw',
type: 'get',
error: function (responseErrorMsg) {
console.log(responseErrorMsg);//console.log() 不會表示紅底 ※視為一般訊息
console.error(responseErrorMsg.statusText);//錯誤資訊狀態文字
console.error(responseErrorMsg);//錯誤資訊
},
});
</script>
執行結果：
.error 會出現X 深底的資訊
console.log 沒有紅底
8. console.group() + console.groupEnd()：群組化資訊，自訂義或響應資訊
我們宣告以下.ajax ，並且用了錯誤的url。
我們宣告以下.ajax 取得回傳的Json資訊，並且比較console.log 與 console.group 群組化後的差異
<script>
$.ajax({
url: '/Home/GetTest',
type: 'get',
success: function (data) {
console.log(data);
console.group('/Home/GetTest回傳的JSON()');//資訊群組的起點
console.log(data);
console.groupEnd();//群組的結束
},
error: function (responseErrorMsg) {
},
});
</script>
執行結果如下：
顯示效果相同，但是如果今天在大量的取得資訊的情況下，console.log()無法分辨是哪個傳回
※當然可以按後方的追蹤，但會浪費點擊時間
9. console.trace()：追蹤程式實際位置，便於除錯
我們宣告以下4個function ()
<script>
function funA() {
funB();
}
function funB() {
funC();
}
function funC() {
console.trace('追蹤funC');
}
function funD() {
}
</script>
然後執行呼叫funA()：
<script>
funA()
</script>
執行結果：
可以發現，根源為windows.onload() 第124行
最後顯示console.trace 的位置在funC 第170行
10. console.table()：格式化Table便於偵錯物件資訊
我們宣告以下.ajax 取得回傳的資訊，組成console.table() ※可以與 8. console.group 的取得資訊比較
<script>
$.ajax({
url: '/Home/GetTest',
type: 'get',
success: function (data) {
console.table(data);
},
error: function (responseErrorMsg) {
},
});
</script>
執行結果：
很優美的呈現Json物件，除錯更方便了：
11. console.time() + console.timeEnd()：用於檢測物件執行效能
我們執行以下語法，用於檢察.ajax 到底花費多少時間
<script>
console.time('呼叫/Home/GetTest');
$.ajax({
url: '/Home/GetTest',
type: 'get',
success: function (data) {
console.timeEnd('呼叫/Home/GetTest');
},
error: function (responseErrorMsg) {
console.timeEnd('呼叫/Home/GetTest');
},
});
</script>
執行結果：
可以得知耗費了174微秒：
12. console.info()：正確的顯示提示用戶資訊
我們執行以下語法，用於檢察.ajax 到底花費多少時間
執行語法：
<script>
console.info('這是info資訊，不應與error 或 wrar 搞混，用於提示有用資訊');
console.info('此網站為【普遍級】: 一般觀眾皆可觀賞');
</script>
執行結果：
13. console.warn()：正確的顯示警告用戶資訊
我們執行以下語法，用於檢察.ajax 到底花費多少時間
執行語法：
<script>
console.warn('此網站支援IE 7/8 以上版本瀏覽器');
</script>
執行結果：
得到三角!的訊息：
第二部分：主流瀏覽器的呼叫Console函式的方法
1. Chrome：使用鍵盤上的 F12
2. FireFox：使用鍵盤上的 F12
3. Internet Explore：使用鍵盤上的 F12
4. Chrome：網頁右鍵 -> 檢閱元件
※也可以使用鍵盤上的 ctrl + shift + C
5. Safari：較為複雜依序以下
右上角 -> 設定按鈕 -> 偏好設定
進階 -> 打勾 下列項目
網頁右鍵 -> 檢閱元件
第三部分：提供補充資訊
| 區塊 | 內容 |
|---|---|
| MSDN web docs (瀏覽器支援說明) | 連結 |