如何从Chrome的开发工具中了解网站的Javascript？

Question

我现在正在学习网页开发，并且已经浏览了很多网站，并通过Chrome的开发者工具查看源代码。这有助于理解HTML和CSS。

但是，我无法理解Javascript。如果他们链接外部javascript文件，我打开该文件并尝试通读。我知道它缩小了，但我认为无论如何我都无法理解它。如果他们的代码中直接使用了Javascript，我仍然无法理解它。

BTW - 我已经学过一些Javascript教程，所以我至少对JS很熟悉。

我在这里错过了什么吗？

由于

Answer 1

有一个特殊的按钮，如下所示：{}。它可以在Sources选项卡的源代码下找到。它为你美化代码：D

Answer 2

请注意：在很多情况下，学习javascript，跳入阅读一些网站代码是一种非常糟糕的方式。最好自己编写，并从存储库liek github，或者pastebin，plunkr或者jsfiddle等读取其他人。

那说： 使用浏览器调试器，您可以看到页面中使用的javascript文件。我猜你已经知道了，因为你已经找到了缩小的javascript文件。要解决的2个问题：

1. 如何理解缩小的文件：firefox具有unminifier功能。非常google-able。

2. 给定一个javascript文件，如何查看它正在做什么。我建议在javascript文件中的一行上创建一个断点，当你在网页上做某事时，你会知道这个断点。在html中找到一个按钮，查看附加了什么点击功能，然后进入javascript文件，并使用＆c; ctrl-f＆＃39;按名称查找点击功能。找到它。然后在要调试的函数中的行上创建断点。设置断点后，一旦单击该按钮，您的deubgger将在断点处停止代码，然后您可以逐步完成代码。所有这些关键概念和关键字都是可谷歌的。这应该会让你开始回答你的问题。