【譯】你不知道的Chrome除錯工具技巧第五天：console的log中,讓人疑惑的案例

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

前兩篇的翻譯連結我已經給到了作者本人，雖然他不理解中文，但是他還是很開心哈哈,截圖在最後

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

在馬上就要迎來假期的這 24 天裡，我將會發布一系列短篇的文章，關於如何更加有意思的使用開發工具，昨天我們完成了第15 個,今天我們只有一個tips,但會是相當驚喜的一個：

嘿嘿，這個(列印出來的物件，與預期不符)真的會讓你大吃一驚，並且使得我們基於 console.log 的除錯過程變得撲朔迷離，或者失敗。

在 console 中列印出的物件，在列印之前，都是以引用的形式儲存的。

什麼意思呢？例如:你 (在程式碼中) 列印了一個物件，然後 (在程式碼中) 修改了它，最後將它列印出來 - 當我們在 console 中檢視時，會看到第一條列印的記錄 (進行修改前的記錄) 和第二條列印的記錄 (被修改之後的記錄) 的值是一樣的！

這樣描述之後，如果你仍然不好理解，別擔心，下面的視訊中的這個流程會讓你變得清晰：

現在想象一下，當你想要弄清楚一個物件在何時被修改的時候，如果發生了這樣的情況，怎麼辦呢？怎麼處理這樣的情況呢？

你可以列印從這個物件複製出來的物件，或者...在正式的除錯中使用讓我們可以放心的斷點或者是資源皮膚來替代，在後續的文章中，我們會繼續討論這個問題。

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

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

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

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

相關文章