What are all these things under the sources bar of Google Chrome developer tools?

Question

I know this is a stupid question for an experienced developer, but I'm self-taught and really missing the gap between formality and practicality. I'm trying to understand some open sourced idle games that are put together with HTML, CSS, and JavaScript, and almost all of them are calling on these (what I'm assuming to be APIs) in the HTML. The raw HTML looks like this.

<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>

My question is kind of two part here. I could ask you what these things are, but I know somebody doesn't want to take me on a tour down what you would consider basic development knowledge. So, where do I learn about this stuff?

I mean even if I knew what these were doing, where would I learn about more of them? Are they APIs? Because I hear that word thrown around a lot, but that doesn't mean I have experience with it. If they are APIs, where would I find more of them? How would I know which APIs to use and which to not use? Could I theoretically make an entire program made solely from APIs?

Lastly, I just want to thank anyone who is patient enough to deal with a FNG. I apologize for my ignorance.

Answer 1

The code you see starting with function(i,s,o,g,r,a,m) is Google Analytics. You install this code in order to let Google gather information about your site usage and then display to you in a dashboard.

None of the other shown below appear to be directly needed for idle game development, well maybe jQuery.

Answer 2

The other groups are domains the web page loads data from. The Google Analytics script will for example load data from apis.google.com , and the google fonts you have included will load from fonts.google.com . The sources tab has conveniently grouped the resources from those domains together -- it's also quite useful for seeing if your site is loading content from spurious domains.

Note that any JavaScript loaded from another source, could inject more link/html tags or request other resources to be loaded such as CSS or fonts. You can find out more from each of the individual files, but as for what loaded them you'll probably have to trawl through the files to see which file loads what.

Also, as for your questions on "how would I know which APIs to use" — the simple answer is you don't use them. These are used by the other scripts you have added, and those scripts may not be under your control (such as the Google Analytics ones).

Answer 3

To answer your title question, those are all of the sources that make up the page you are seeing. They are grouped by the domain they are being hosted from. Some are HTML files, some are JavaScript files, and some are CSS files.