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文件。