# Debug 基本常用方式
###### tags: `Grails` `web` `chrome`

# F12
在Chrome選單中選擇 更多工具 > 開發者工具
在頁面元素上右鍵點擊，選擇 “檢查”
使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)


# 基本 console 使用

/**
 * 視覺化呈現-前端追code使用
**/
console.warn('<output>')
console.error('<output>')
console.info('<output>')
console.log('<output>')


//清除console
clear()


# console 特殊功能

// 計數-前端追code判別用
console.count([String])

//計時-前端效能校正用
console.time([String])  // 開始計時
console.timeEnd([String])  // 結束計時


# console 特殊功能

//檢視這個 DOM 元素中的所有屬性
console.dir([DOMElement])dir([DOMElement])
$("#id") 點箭頭


# console 複合使用

function calFunc(){
    console.log('start calFunc');
    console.time('timer1');
    var a=2;
    
    //do something
    for(var j=1; j<10; j++){
        a=a*j;
        console.log(a);
    }

    console.timeEnd('timer1');
    console.log('end calFunc');
}


# network
Status：HTTP狀態碼
Type：請求資源的MIME型別
Initiator：標記請求是由某一對象發起
Size：請求的資源大小
*Time：總持續時間，從發起請求到資源下載完成-觀察最耗時封包, 可能錯誤或效能校正用
Waterfall：每一個請求活動不同階段的可視化瀑布流

# Network-Header
Headers:
Request URL:請求網址
Request Mthod:請求方法
Status Code:狀態碼
200：表示成功。
304：表示瀏覽器已經有一模一樣的檔案。
400：瀏覽器發出的請求被網頁伺服器拒收，通常是發出的請求格式不正確。
403 ：無查詢權限
404：找不到網頁。
500：網頁伺服器掛了。
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status 詳細對照表
Form Data: 送至伺服器端資料


# Network-Header
Preview：回傳資料以瀏覽器能解析的方式呈現
Response：回傳資料以純文字呈現
Cookies：每次請求都會發送瀏覽器的cookie


# Network
於network內點擊右鍵會有Replay XHR選項，當確認前端功能傳遞的參數皆為正確，僅為後端程式碼有問題時可修正後端程式碼後使用，可節省前端再次介面操作時間

# Mobile Mode 模擬移動設備
在不同的屏幕尺寸和分辨率下模擬網站。
通過可視化和檢查 CSS 媒體查詢進行自適應設計。
使用網絡模擬器在不影響其他標籤流量的情況下模擬您網站的性能。
針對觸摸事件、地理定位和設備方向準確模擬設備輸入

~~公司資料庫設計 不是每一家都相同~~
# 系統維護錯誤紀錄追蹤
系統錯誤紀錄table-ERROR_LOG
系統報錯位置於STACK_TRACE內可查看

常用下法-查詢系統一天內錯誤問題

SELECT *
FROM ERROR_LOG
WHERE DATE_CREATED > SYSDATE-1
ORDER BY DATE_CREATED DESC


# 系統操作者紀錄追蹤
系統操作紀錄table-ACTION_LOG, ACTION_LOG_PARAMS
系統操作詳細參數可於PARAMS內查看

常用下法-用於查詢指定系統操作者於指定區間內動作

SELECT *
FROM ACTION_LOG A, ACTION_LOG_PARAMS B
WHERE A.ID=B.ID
AND DATE_CREATED >= TO_DATE('2020/1/1','YYYY/MM/DD')
AND DATE_CREATED <= TO_DATE('2020/2/1','YYYY/MM/DD')
AND USER_ID=?
ORDER BY DATE_CREATED DESC


# Groovy
於後端追code時可在猜測可能錯誤位置印出對應的資料，確保程式停住或錯誤發生位置
Object可在validate()後查看errors裡面的詳細錯誤

Object可用dump印出詳細資訊，並且若有錯誤也會一併印出