近來(lái) Chrome 的小缺點(diǎn)，像是速度沒(méi)有以前快、分頁(yè)佔(zhàn)過(guò)多記憶體，還是存在，但隨著 Google 頻繁的改動(dòng) Chromre，其實(shí)也加入許多實(shí)用功能（更別說(shuō)若開(kāi)啟dev模式，還有許多測(cè)試功能可以來(lái)試玩），其中對(duì)於需要反覆測(cè)試的電商或是填表等網(wǎng)站更是新加入了「Recorder」的功能（以往得靠像是 selenium 之類的功能才能達(dá)成）！

讓我們來(lái)看看描述是怎麼說(shuō)的：

1. 記錄一個(gè)網(wǎng)站常見(jiàn)的使用者程序/歷程（user journey）*app也可用!
2. 重播步驟(1)的紀(jì)錄是否可以正確執(zhí)行
3. 追蹤記錄其成效或是匯出記錄的操作程序

聽(tīng)起來(lái)除了自己測(cè)試（還可以在手機(jī)上），還可以把操作結(jié)果分享給別人，這樣網(wǎng)站設(shè)計(jì)公司在追蹤 bug 時(shí)，再也不用像無(wú)頭蒼蠅一樣摸不著頭緒了，相信會(huì)減少很多開(kāi)發(fā)時(shí)間，就讓我們看看如何開(kāi)啟這神奇的功能吧：

第一步：打開(kāi)開(kāi)發(fā)者工具（檢查模式）

右鍵點(diǎn)擊頁(yè)面空白處，選擇檢查（inspect）

*這也是很重要的網(wǎng)頁(yè)檢查功能，不管是讓你看 elements 或是使用 console 功能，都是程式開(kāi)發(fā)或網(wǎng)頁(yè)開(kāi)發(fā)人員第一時(shí)間找問(wèn)題的工具！
**其他開(kāi)啟方法（鍵盤 F12；Mac 直接按 cmd+shift+i）

第二步：選擇 Recorder，就可以開(kāi)始了

Google 還超級(jí)貼心，寫了一個(gè) demo 站供你測(cè)試，點(diǎn)進(jìn)去看看你喜歡喝那樣的咖啡吧（？）

輸入完該記錄的名字後，就可以開(kāi)始了，若要停止就簡(jiǎn)單按下「End recording」。

Google 範(fàn)例的測(cè)試如下：

1. Add a coffee to the cart.
2. Add another coffee to the cart.
3. Go to the cart page.
4. Remove one coffee from the cart.
5. Start the checkout process.
6. Fill in payment details.
7. Check out.

第三步：回放以及觀看成效

錄製完成後，最重要的是如何重現(xiàn)，最大的好處在於減少一些重複操作的步驟或需要填寫的欄位；另一點(diǎn)重要的功能是評(píng)估使用者流程與成效（user flow & performance），在不用重複填寫欄位或操作的情況下，來(lái)測(cè)試每次 code 改動(dòng)或是主機(jī)調(diào)校、版本更新等，成效差異。

更進(jìn)階的應(yīng)用則是利用匯出錄製，利用類似 Puppeteer 來(lái)達(dá)成更多客製功能。

開(kāi)發(fā)人員的利器、PM 的好幫手

這種錄製功能在幫助網(wǎng)站測(cè)試會(huì)有大量幫助，以 CTK Pro 做過(guò)的電商網(wǎng)站法雅客為例，每次更改 code 或者像是例行性的 WordPress、WooCoomerce 更新，我們一定會(huì)協(xié)助將各種不同付款方式測(cè)試過(guò)一次，讓結(jié)帳功能是可被驗(yàn)證的，有了這個(gè)，測(cè)試就可以更加快速，甚至可以依照其效能，再來(lái)做細(xì)部調(diào)整。

對(duì) User Flow 來(lái)說(shuō)，也不失一個(gè)記錄的方法，了解使用者（或測(cè)試人員）的詳細(xì)操作步驟，可以更精準(zhǔn)指出要改、優(yōu)化的地方，都是很棒的工具！