玩轉 chrome 效率起飛

亖混子發表於2022-04-28
效率高不高不知道,真的有趣。

Copy as cURL、Copy as PowerShell

使用場景: 前後端溝通無障礙。xxxx/yyy 介面不符合預期,快速讓後端快速還原現場定位問題。

使用方式: 在目標介面上滑鼠右鍵 Copy as cUrl (mac)、Copy as PowerShell(windows) 將文字發給後端同學即可,後端在終端輸入文字請求介面。

Capture full-size screenshot

使用場景: 某天你組長讓提供一張網站完整截圖,不幸的是網頁滾動了幾屏。這可咋整??

使用方式:開啟瀏覽器開發者工具,然後 windows 上鍵入 Ctrl+Shift+P,Mac 上鍵入 Command+Shift+P ,然後輸入 capture 後選擇要截圖的方式。

詳解:Capture full-size screenshot 截全屏、Capture area screenshot 自定義截圖區域、Capture node screenshot 精準截元素展示 ?

Store as global variable

使用場景:臨時處理介面資料,構思設計下程式碼。。。

使用方式:在 network 皮膚上的介面響應上右鍵,然後在 console 視窗操作變數吧

其他: 非常實用,這個例子不足體現它的妙處。自己體會吧

console.table()

使用場景:後端同學看資料?不知道有啥用反正很神奇。

使用方式:和 Store as global variable 一起用簡直妙不可言。

$i

使用場景:想快速試用下 loadsh、dayjs工具包,或者依賴工具包處理資料

使用方式:安裝 console-importer 外掛,重啟下瀏覽器。在 console 中 $i('dayjs') 試試吧

薦文

你不知道的 Chrome DevTools 玩法

你不知道的Chrome除錯工具技巧 - 系列譯

相關文章