DevTools for Chrome
===

# 查網頁呼叫 API 的參數與回應
## 查API

## 查參數

## 查回應

---

* 怎麼叫出 DevTools
滑鼠右鍵->檢查
或直接按 F12
就能叫出 DevTools

---

## Elements
Styles 可以看到 css 上的設定

Computed 可以知道類似 rem 的計算基數

複製網頁結構來自己使用

Ctrl + F 搜尋關鍵字

當有多數名稱一樣的 class 可以用 Copy XPath
取得絕對路徑
再用 Console 模式輸入指令查詢

選取物件，並點選　:hov
下方會有 hover 等等狀態
勾選 hover 瀏覽器上的物件會一直保持　hover 狀態

選取物件，並點選　:cls
可以選擇要加入的 class
當然也能在左邊視窗 class 後面直接輸入 class
:cls 比較適合不知道 class name 的情境

點擊顏色屬性可以看到該顏色的對比是否足夠
AA 與 AAA 基本上一定要有 AA
選色視窗上有兩條線
代表一半是夠對比
一半不夠對比
在此狀態點擊瀏覽器中的顏色
可以像吸管一樣
取得目前的色塊色碼

Break on 可以在物件被觸發
通知 DevTools
也可以拿來當物件記

點右上角展開選單，選 Show console drawer
或是 More Tools
可以看到 Rendering
Paint flashing 可以看到瀏覽器畫面更新的地方反白一瞬間的提示
而 Animation 可以動態調整動畫參數

## Sources
可以知道下載的程式內容，左下紅色 {} 按下可以 Format 文件格式

## Console
輸入 document.querySelector('#物件 id');
或
$('#物件 id');
都能查找物件
滑鼠移到查找到的物件訊息中
瀏覽器中被查找的物件會出現反白選取

利用指令 $x('XPath 絕對路徑');
如下範例：

$x('/html/body/div/div/main/div[3]');

Preserve log 可以保留 log 不會被清掉
右邊齒輪才能看到上面的 Preserve log 選項

Console 可以宣告變數
直接在 Console 操作得到結果

## Network
可以看下載內容、時間與檔案大小

## Application
Local Storate 可以看本地端網頁儲存的資料內容

## 參考資料
[使用 Chrome 開發者工具檢查 HTML, CSS 元素](https://www.youtube.com/watch?v=QMqcbz80r0M)
[超好用的Chrome DevTool Debug 技巧 | 幫你省下不少時間！](https://www.youtube.com/watch?v=4qUx6lZ1kco)

###### tags: `Chrome`