Chrome 浏览器开发者工具

1. 如何确认资源是否载入 (e.g. css, js, API, ...)

NetWork

ex:axios

错误时：

2. 了解Cookie, Local Storage, Session Storage，开发者工具要怎麽看

(1) Local Storage:网页关掉後还存在(容量大)

(2) Session Storage :网页关掉後不存在

(3) Cookie:网页关掉後还存在(容量小)

3. 了解API Request, Response, Header，开发者工具要怎麽看？

NetWork可观察各资源容量大小，并观察网页读取速度

(1) Header
Request URL：请求网址
Request Method：方法
Status Code：代码200

(2) Request
请求

(3) Response
POST 拿资料
网页服务器回应给浏览器的内文，Preview 较简洁

all内文
get方法送请求，下方回应

4. 了解HTTP状态码 (HTTP Status Code)

NetWork
200：表示成功。
304：表示浏览器已经有一模一样的档案。(手上的档案是最新的)
浏览器抓到资讯(ex:图片、API)放占存记忆体，不会再更新，而可能与使用者体验相违，此时需清快取
400：浏览器发出的请求被网页服务器拒收，通常是发出的请求格式不正确。
404：找不到网页。
500：网页服务器挂了。

5. 了解HTTP Method

NetWork
Request Method ( 方法 ) ：

GET：下载档案 ex:取得产品列表
POST：上传资料 ex:下单进购物车
PUT：更新资料 ex:後台编辑产品
DELETE：删除资料 ex:後台删除产品

6. 线上除错 JavaScript (Event)

Sources > Event Listener Breakpoints(下中断点) > 各种事件点选 > 点触发处(浏览器) > 下一步观察

7. 线上除错 JavaScript (变数状态)

Sources > 点选Js行数下中断点

(1)接下个断点
(2)详细下一步，ex:进入 for(){}
(3)进入function内，ex:进入 aaa();
(4)出去function外
(5)解除断点，看整体效果方便用

F12 + F5
然後就可以下中断点，按F10就可以逐行执行，而按F8就可以直接跳到下个中断点

8. 下断点抓 html标签 变化

Element > 下断点(下图) > 点触发处(浏览器) > 下一步观察

9. 搜寻想要 debug 的 HTML、CSS 位置

10. 侦测事件状态样式

ex:有下focus、hover....

11. 浏览 CSS3 Animation 效果

12. 解缩排

Sources > 选页面

13. Chrome 工作管理员

Chrome浏览器比较卡顿，这时可以开启Chrome浏览器的工作管理员，把占用资源多的网页关闭即可

标签列右键

14. Safari 开发者工具

设定开启开发选单
此时可用command+alt+i打开safari开发人员工具

15. Network 观察网页载入速度(API注意)

API抓取资料速度非常重要，有时甚至要压到0.05毫秒
WS观察 WebSocket 即时回传资料速度(ex:MAX网站)

16. Performance 录影後观察效能

环境模拟、录制执行期间的行为、分析结果

录影

1. HTML 蓝色
2. 指令码 黄色
3. 样式表 紫色
4. 媒体档案 绿色
5. 其他资源 灰色
   藉由圆饼图可得知，该页面各种档案类型读取的效率
   

17. Lighthouse 优化使用者体验

透过检测程序的执行，方便找到问题，并提供解决建议

18. 一次选取多个 可同时编辑