如何從Chrome的開發工具中瞭解網站的Javascript？

Question

我現在在學習網絡開發，並且經歷了很多網站，並通過Chrome的開發人員工具查看源代碼。這有助於理解HTML和CSS。

但是，我無法理解Javascript。如果他們鏈接外部JavaScript文件，我打開該文件並嘗試通讀。我知道它縮小了，但我不認爲我能夠理解它。如果他們直接在他們的代碼中使用Javascript，我仍然無法理解它。

順便說一句 - 我已經經歷了一些Javascript教程，所以我至少有點熟悉JS。

我在這裏錯過了什麼嗎？

感謝

Answer 1

請注意：爭先恐後地閱讀一些網站的代碼是一個非常不好的方式在很多情況下，學習JavaScript的。最好寫你自己的，並從倉庫liek github上，或引擎收錄，或者plunkr，或的jsfiddle等

這就是說閱讀其他人： 使用你的瀏覽器的調試器，你可以看到正在使用的JavaScript文件頁。我猜你已經知道這個，因爲你已經找到了縮小的JavaScript文件。 2問題地址：

1. 如何使一個縮小文件的意義：firefox有一個unminifier功能。非常可以谷歌。

2. 給定一個JavaScript文件，如何看看它在做什麼。我會建議在JavaScript文件中的一行中創建一個斷點，當您在網頁上執行某些操作時，您知道這些斷點會被點擊。在html中找到一個按鈕，看看附加了什麼點擊功能，然後進入JavaScript文件並使用'ctrl-f'按名稱找到該按鈕以找到它。然後在要調試的函數的一行中創建一個斷點。一旦設置了斷點，一旦你點擊了按鈕，你的deubgger就會在斷點處停止代碼，然後你就可以通過代碼進入你的leasure。所有這些關鍵概念和關鍵字都可以通過Google進行搜索這應該讓你開始回答你的問題。

Answer 2

有一個特殊的按鈕，如下所示：{}。它可以在Sources選項卡的源代碼中找到。它prettifies你的代碼：d