Google Chrome开发人员工具的源代码栏中的这些都是什么？

Question

我知道对于一个经验丰富的开发人员来说这是一个愚蠢的问题，但是我是自学成才，并且确实缺少形式化和实用性之间的鸿沟。 我试图理解一些与HTML，CSS和JavaScript结合在一起的开源空闲游戏，并且几乎所有这些游戏都在HTML中调用这些（我假设是API）。 原始HTML看起来像这样。

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-47311210-3', 'auto');
    ga('send', 'pageview');
</script>

我的问题在这里分为两部分。 我可以问你这些东西是什么，但是我知道有人不想带我参观一下你认为是基础的开发知识。 那么，我在哪里可以学到这些东西？

我的意思是，即使我知道这些程序在做什么，我将在哪里了解更多信息？ 它们是API吗？ 因为我经常听到这个词，但这并不意味着我有经验。 如果它们是API，我在哪里可以找到更多？ 我怎么知道要使用哪些API，哪些不使用？ 从理论上讲，我可以制作仅由API组成的整个程序吗？

最后，我只想感谢任何有足够耐心应对FNG的人。 我为自己的无知表示歉意。

Answer 1

您从function(i,s,o,g,r,a,m)开始看到的代码是Google Analytics（分析）。 您安装此代码是为了让Google收集有关您的网站使用情况的信息，然后在仪表板上向您显示。

空闲的游戏开发似乎不需要下面显示的其他任何东西，也许是jQuery。

Answer 2

其他组是网页从中加载数据的域。 例如，Google Analytics（分析）脚本将从apis.google.com加载数据，而您包含的google字体将从fonts.google.com加载。 “源”选项卡可方便地将这些域中的资源分组在一起-对于查看您的站点是否正在从虚假域中加载内容也非常有用。

请注意，从其他来源加载的任何JavaScript都可能注入更多的link / html标记或请求加载其他资源（例如CSS或字体）。 您可以从每个单独的文件中找到更多信息，但是要了解加载了哪些文件，您可能不得不浏览文件以查看哪个文件加载了什么文件。

另外，关于“我如何知道要使用哪些API”的问题，简单的答案是您不使用它们。 这些脚本已由您添加的其他脚本使用，这些脚本可能不受您的控制（例如Google Analytics（分析））。

Answer 3

为了回答您的标题问题，这些都是构成您所看到页面的所有资源。 它们按托管来源的域分组。 有些是HTML文件，有些是JavaScript文件，有些是CSS文件。