Chrome 新功能 - 錄制小視頻

Chrome 97 推出了一個(gè)預(yù)覽功能 - Recorder。它允許你錄制 Web 頁面的操作并支持「回放，編輯，測(cè)量性能」 等諸多功能。

它長(zhǎng)什么樣

你可以直接在 chrome devtool 中看到一個(gè) Recorder 面板，點(diǎn)擊它就可以體驗(yàn)。

?

如果沒有找到，可以嘗試 cmd + shift + p 調(diào)出命令面板搜索 Recorder。當(dāng)然如果該功能未發(fā)布是搜不到的

?

它有什么用？

通過它，你可以實(shí)現(xiàn)一些有趣的功能。

比如：

• 測(cè)試同學(xué)錄制一段“視頻”， 然后發(fā)送給開發(fā)，開發(fā)根據(jù)這段視頻定位問題。
• 測(cè)試某一個(gè)業(yè)務(wù)流程在各種不同的網(wǎng)絡(luò)和硬件環(huán)境下的表現(xiàn)，甚至你可以看其在不同平臺(tái)的表現(xiàn)（比如 PC，手機(jī)，平板等）。

• 自動(dòng)化測(cè)試。你可以錄制一段視頻，然后通過修改其中部分參數(shù)的形式來自動(dòng)化生成很多測(cè)試用例。

• 。。。

由于是預(yù)覽版，因此最終是什么樣可能還不確定。

大招

對(duì)于我來說，我想要到一個(gè)比較有意思的功能。

我們知道 Chrome 的 devtool frontend（就是你看到的開發(fā)者工具） 是開源的，代碼托管在 Github：https://github.com/ChromeDevTools/devtools-frontend

因此你可以直接集成它到你的項(xiàng)目中。比如你可以開發(fā)一個(gè)調(diào)試工具，這個(gè)工具 fork 一下 devtool frontend，然后修改 Recoreder 部分的源碼，使得用戶可以手動(dòng)上報(bào)自己的錄像，然后你將用戶的錄像數(shù)據(jù)，網(wǎng)絡(luò)數(shù)據(jù)等其他數(shù)據(jù)發(fā)送到你的后端進(jìn)行分析。

這個(gè)功能我在之前的公司做過，不過做的并不好。而如果依托于 Chrome 團(tuán)隊(duì)，那些棘手的問題都不需要你解決了，比如性能問題就很棘手。

如果你的公司有做用戶錯(cuò)誤上報(bào)或者信息收集的需求，不妨考慮一下是否可以為你所用。

更多介紹：https://developer.chrome.com/docs/devtools/recorder/

• 后臺(tái)回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對(duì)精品
• 后臺(tái)回復(fù)：電子書，自動(dòng)獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時(shí)間
• 后臺(tái)回復(fù)：不一樣的前端，自動(dòng)獲取精選優(yōu)質(zhì)前端文章。
• 后臺(tái)回復(fù)：算法，自動(dòng)獲取精選算法文章。另外也可關(guān)注我的另外一個(gè)專注算法的公眾號(hào)力扣加加。
• 后臺(tái)回復(fù)：每日一薦，自動(dòng)獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實(shí)用技巧，高效工具等等