JS Core III

❓ What are the four questions we ask ourselves in the Debugging Framework?

❓ What are three tools we could use to debug our programs?

❓ What is a syntax error?

❓ What is a reference error?

❓ What is a type error?

❓ What are the four questions we ask ourselves in the Debugging Framework?

What did I expect to happen?

What exactly is broken?

What happened instead?

What have I tried so far?

❓ What are three tools we could use to debug our programs?

Thinking like a computer
Test often
Stack Overflow / other resources
Talking it through (rubber ducking)
console.log()
Chrome debugger
ESLint

❓ What is a syntax error?

Normally a forgotten bracket / brace.

if (3 > Math.PI {
  console.log("wait what?");
}

SyntaxError: missing ) after condition

❓ What is a reference error?

Normally a typo when referring to a variable that doesn't exist.

var ward = "hello";
word.substring(1);

ReferenceError: "word" is not defined

❓ What is a type error?

Normally a typo when referring to a variable or function.

var submit = document.getElById("button");

TypeError: document.getElByID is not a function

Every developer spends a lot of their day debugging.

The best developers aren't the ones who don't debug, because they don't exist.

The best developers are the ones who are best at debugging.

My team at work fixes ~10-20 bugs per week.

So we have to get good at debugging!

How the web works

URL

Uniform Resource Locator

https://assets.slid.es/assets/deck-64ae628b82524.js

GET

Asks the server for a web page, resource, or piece of data.

POST

Used to send data to the server. A POST request has a body of data that we can send with the request.

Making requests

Headers

metadata about the request and the response

Status codes

Useful reference: https://httpstatuses.com/

❓ Was the request successful?

200: Request was successful
301: Request was redirected.
401: Unauthorised request.
404: Not found.
500: Internal server error

Status codes

1XX: Informational
2XX: Successful request.
3XX: Redirected request.
4XX: Error on the client.
5XX: Error on the server.

Useful reference: https://httpstatuses.com/

httpstatusdogs.com

content-type

Specifies the type of content in the request or response. Used to let the browser know what to do with some data once it gets it.

content-type

text/html: HTML.
text/css: CSS.
image/jpeg: A JPEG image.
application/javascript: JavaScript code.
application/json: JSON data.

❓ What can HTTP headers contain?

❓ What is the purpose of status codes?

❓ What can an HTTP request contain?

API

Application Programming Interface

Twitter / Facebook / TFL / Google Maps / GitHub

Your fancy web application

API requests

The API provider can strictly control the abilities of the API, and what data it exposes to the consumers.

Private APIs: for employees only inside a company network

Semi-private: for clients who pay a fee to use the API

Public API: free to everyone on the web to use

The TFL API

https://api.tfl.gov.uk/

https://api.tfl.gov.uk/BikePoint

[
  {
    "$type": "Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities",
    "id": "BikePoints_1",
    "url": "/Place/BikePoints_1",
    "commonName": "River Street , Clerkenwell",
    "placeType": "BikePoint",
    "additionalProperties": [
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "TerminalName",
        "sourceSystemKey": "BikePoints",
        "value": "001023",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "Installed",
        "sourceSystemKey": "BikePoints",
        "value": "true",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "Locked",
        "sourceSystemKey": "BikePoints",
        "value": "false",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "InstallDate",
        "sourceSystemKey": "BikePoints",
        "value": "1278947280000",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "RemovalDate",
        "sourceSystemKey": "BikePoints",
        "value": "",
        "modified": "2020-09-04T09:56:45.65Z"
      },
     ]
      }