# Chrome DevTools & debug
## [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
#### Elements Panel
Provides a conduit to **directly interact** with the DOM and styling, 可以直接inspect網頁元素for test out and debug structural and aesthetic issues in HTML and CSS.
* Styles tab可以直接修改或套用css參數
* 右鍵 > Edit Text or Edit as HTML 可以修改html內容
*  滑鼠inspect,快捷:ctrl+shift+c
#### Resources Panel
Provides a picture of the file structure and all the assets and data being loaded into the browser. From here you can view **details about assets** such as images and videos. You can also inspect data stored in cookies, sessions, local storage, and more.
* Local Storage可以create, read, update, or delete any key/value pairs.
* 引導到sources panel 檢視細節<br>
<br>
#### Sources Panel
The Sources panel allows you to make adjustments to your code in real time. You can revert to previous revisions of your changes, or you can save your changes to a file.
* 右鍵 > Save As...: 可以直接把修改好的檔案存下來
* 右鍵 > Local modification: 修改檔案的版本控管
* You can set breakpoints in JavaScript to stop your code from executing.
*  會在出錯的的方暫停程式
#### Network Panel
製作圖表呈現 when assets loaded in, the order in which they loaded, load多久等等 (being accessed with an **HTTP request**). The Network panel is a great tool for investigating front-end *performance issues* and finding parts of the page that can be optimized.
* HARD refresh: command+shift+R
重新整理是捕捉網路活動最好的法,若想pull all assets fresh且不使用cached assets的話,要使用強重整.
* initiator: 檔案是如何被加載的
* 透明是等待時間,實體是下載時間
* 紅線藍線: 藍-HTML下載時間 紅-其他assets下載時間
* 最下面灰條: requests數量,下載容量大小等等
* status 404 500s等代表加載失敗,可以排除這些元素
* sprite map(其中一種減少http requests的方法)
#### Performance Panel
Allows you to see how **pages behave over time**. You can profile memory usage, JavaScript events, and rendering performance. For example, if complex effects are impacting the framerate of a page, the Timeline panel can help reveal where and when those issues exist.
* optimal frame rate: 60fps以上
#### Profiles Panel
Can take snapshots of CPU and memory utilization. This is useful in complex JavaScript applications that can potentially use too much of the processor and memory. In conjunction with the *Performance panel*, it can be useful for tracking down the source of memory leaks and other areas where performance can be improved.
* Start Recording 後會create new profile, Stop recording後會揭露有運行的function
* heap snapshot: 展示網頁上的JS的memory distribution.
#### Audits Panel
The Audits panel provides automated suggestions for improving front-end performance. For example, the audits panel might suggest specifying explicit dimensions for images to improve rendering performance. It can also help identify CSS rules that aren’t being utilized.
#### Console Panel
The Console panel is both a log and a command line tool that allows you to interact with the JavaScript on a page. You can execute existing functions, rewrite variables and functions, or create entirely new code. The console will also JavaScript errors, which is useful for debugging code.
* `$()`:select DOM elements on the page
* 上鍵: recall previous command
* **Console API**: profiling JavaScript code, logging commands, recording the execution time of code, and more. In this video, you’ll learn how to time the execution of a loop.

console.time("Loop");
...loop
console.timeEnd("Loop");

#### [Adjusting Settings](https://developers.google.com/chrome-developer-tools/docs/settings)
From the Settings window, you can adjust general settings for the DevTools.
* Disable cache
* Disable JS
* log XMLHttpRequests(AJAX)
* Override user agent & Device metrics
* shortcuts
## Debugging CSS
#### Styles pane
* 被overriden的propertie會被劃掉(**media query**覆蓋的也會)
* hovering到的style rule會hightlights所有有使用此rule的元素
#### [Viewing](https://developer.chrome.com/docs/devtools/css/) Inherited and User Agent Styles
* 淺灰色區域: user agent使用的stylessheet(browser內建的)
* 深灰色區域: 父層繼承的stylesheet, 取消打勾是取消父層,也會影響其他子元素
* 半透明的properties: non-inheritable property
#### Identify and Debug Errors
* Overview of **Element tab** and **Style Pane** in DevTools
* Identify errors in CSS
* Visualize and test [element states](https://developer.chrome.com/docs/devtools/css/#pseudostates)(`:hover` `:focus` `:active` etc...)
1. 右鍵啟用hover pseudo-class
2. 或toggle `:hov`
即可開啟或關閉element states
* Add, enable and disable classes
即可新增,開啟或關閉element classes
**Tips**: 用紅框框出目前debug中的element,新增以下CSS,
`.debug{border: 2px solid red;}`
toggle `.cls`後增加debug class,結果如下:
* Copy and [save out](https://developer.chrome.com/docs/devtools/workspaces/) changeds to CSS
#### Visualizing the Box Model and Computed styles
**Computed pane**: displays the final set of CSS properties the browser is applying to the selected element. It also displays a representation of an element's box model, so you can quickly examine and edit its content, padding, border and margin areas.
* Computed value單位是**px**.下圖顯示2.5em換算後為40px
* Box Model 數值都可編輯
## Debugging javaScript
1. Stop execution at a given line
2. Explore values while the app is paused
3. Step through code, line by line
4. Repeat above, Fix bug
#### Breaking on Events and Basic Stepping
* Overview of **Sources tab** in DevTools
左pane:resources tree. 雲port:How you serving the app,其他的資源
中pane: 檔案內容,刷新載入
右pane: Debug tools
* Set an **Event Listener Breakpoint**
勾選event breakpoitn
* All variables and values in **current scope**
繼續操作網頁,勾選的event發生時網頁會暫停,畫面如下
**e**: event object | [**this**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
DevTools暫停時其他畫面也會暫停,重新整理頁面
* **Step over** button, seeing code execute line-by-line
Step over, 點擊hightlight下一行code,再點擊會執行,並hightlight下一行code
1. viewer會顯示那行code的變數值
2. 或是hover到var,來顯示內容
* Changing value of a variable while program is paused
event暫停處,檢查變數值(有誤)
切換console修改(等於重寫暫停的地方)
切回Sources tab > step下一行會refresh變數值
step往下執行看看有沒有debug成功
成功後把修改好的code改回檔案裡
* **Disable/enable** all breakpoints
啟動/關閉breakpoint
#### Basic and Conditional Line Breakpoints
1. 直接點選想設定Breakpoints的line
2. 會直run程式碼,直到Breakpoint暫停
3. 若在loop打點,按loop會再執行一次後又暫停(圖中Scope block顯示loop到第0個li)
* 設定特定condition條件
1. 在想設定Breakpoints的line右鍵 > Add conditional breakpoint... 
2. 輸入條件
3. (圖中第4個li被highlighted)
4. 可重新編輯條件
#### Debugging Functions
1. 選取event breakpoint,操作網頁觸發event
2. 標記function行位置 > 到function暫停
3. 使用step into進入function
* **Step into** : 因會跳過function,故使用來進入function code檢視
* **Call Stack window**
顯示哪些function在執行,點選function可檢視**1.此function在哪裡** / **2.此function Scope裡有哪些變數**
Call Stack概念
* **Step out**  : 完成current function並跳回call他的function, current function會被call stack移除
#### Debugging Exception Errors
1. 錯誤發生通知
2. 會跳出console(同console tab)
**hotkey**: esc
3. 點選連結會進入Sources tab
4. 開啟Pause exceptions後refresh頁面
* **Pause exceptions**  : 在error發生前停止程式,可以檢查造成error的state
#### Breaking on DOM Changes and Watch Expressions
* DOM-change breakpoints
1. 在想檢視的dom element按右鍵
**subtree modifications** : DOM element內的elements被改變
**attribute modifications** : 例如增加或改變className
**node removal** : DOM element被移除
2. 設定後會有藍點點
* Watch expressions
叫DevTools盯好指定value的變化
refresh頁面操作網頁,在watch window裡檢視value的變化
#### 快取＆重新整理
* Preserve log
* Disable cache
#### 切換Device類型
#### 長按重新整理3秒
#### Wifi 內網 ip
live server開在port:5500`http://[LOCAL HOST]:5500`: ip輸入在這可以給別人測試
[手機測試教程](https://mocationer.com/live-server-phone)
## React
可以觀察state變化
打勾會全部展開
點魔法棒會顯示state名稱