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

dendoink發表於2018-12-20

特別宣告

本文是作者 Tomek Sułkowski 釋出在 medium 上的一個系列。據作者透露一共有 24 篇,一直更新到 12 月 24 日
版權歸原作者所有。

作者在Twitter上推薦我們的中文翻譯啦,截圖在最後

譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀,授權的記錄在這裡

正文

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

40. monitorEvents function monitorEvents函式

還記得前幾天我們討論了用 monitor 方法來監聽函式?你可以使用名為 monitorEvents 的函式,對 events 做一樣的事情。

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

來源:Chrome DevTools認證賬號

順便說一句如果你還沒關注ChromeDevTools的話,趕緊關注。

41. console.log 基於呼叫堆疊自動縮排

此處應有掌聲 ? (譯者注:這句為意譯)

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

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

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

給你的列印文字加上 %c 然後 console.log 的第二個引數變成了...CSS 規則!你可以利用這一點讓你的日誌脫穎而出(例如 Facebook 在你開啟 console 的時候所做的一樣)

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

來源:Álvaro Trigo ??

43. replay XHR requests (重新傳送 XHR 的請求)

如題所示

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

來源: Chrome Developers

44. expand all child nodes in Elements panel 在元素皮膚中展開所有的子節點

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

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

來源:Umar Hansa@umaar

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

今天的分享就到這裡~

慣例: 如果你從這裡學到了一些新東西

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

其他系列

其他此係列的文章,馬上就會翻譯出來,到時會貼出對應的連結在此處。

寫在最後

如果你對我的翻譯表示肯定,也可以關注我一波哦~ 順便我的開源專案,求一波 star→ 看這裡, 美麗的部落格系統

作者在Twitter上推薦我們的中文翻譯啦

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

相關文章