【譯】你不知道的 Chrome 調試工具技巧 第十五天:Twitter day!

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇,一直更新到 12 月 24 日
版權歸原做者全部。
vue

做者在Twitter上推薦咱們的中文翻譯啦,截圖在最後
node

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀,受權的記錄在這裏
git

正文

在立刻就要迎來假期的這 24 天裏,我將會發布一系列短篇的文章,關於如何更加有意思的使用開發工具,昨天咱們學習了一些實用的 DevTools 的快捷鍵,今天我會作(tou)一(ge)些(xiao)改(lan)變,並從社區中獲取一些 tips 。咱們能夠稱之爲 Twitter appreciation 日 ;-)github

40. monitorEvents function monitorEvents函數

還記得前幾天咱們討論了用 monitor 方法來監聽函數?你能夠使用名爲 monitorEvents 的函數,對 events 作同樣的事情。app

來源:Chrome DevTools認證帳號異步

順便說一句若是你還沒關注ChromeDevTools的話,趕忙關注。編輯器

41. console.log 基於調用堆棧自動縮進

此處應有掌聲 🤯 (譯者注:這句爲意譯)函數

這太酷了!我在想是否是把這條加入到咱們這周早些日子的custom formatters tip工具

42. 給你的 console.log 加上 CSS 樣式

給你的打印文本加上 %c 而後 console.log 的第二個參數變成了...CSS 規則!你能夠利用這一點讓你的日誌脫穎而出(例如 Facebook 在你打開 console 的時候所作的同樣)post

來源:Álvaro Trigo 🐦🔥

43. replay XHR requests (從新發送 XHR 的請求)

如題所示

來源: Chrome Developers

44. expand all child nodes in Elements panel 在元素面板中展開全部的子節點

相比於點擊級聯的 按鈕,不如使用右擊節點後的 expand recursively 命令:

來源:Umar Hansa@umaar

Umar 有超多機智的 tips ,我說的是 超多 。牆裂推薦!

今天的分享就到這裏~

慣例: 若是你從這裏學到了一些新東西

→ 你能夠點個贊再走嘛~
→ 關注我:Twitter:Tomek Sułkowski

其餘系列

其餘此係列的文章,立刻就會翻譯出來,到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定,也能夠關注我一波哦~ 順便個人開源項目,求一波 star→ 看這裏, 美麗的博客系統

做者在Twitter上推薦咱們的中文翻譯啦

相關文章
相關標籤/搜索